Web色変換

色とWebデザインに関するサイト,ホームページ制作のサポートツール, WEBや印刷で使う色 ,配色,dic,pantone(パントーン),16進数,cmyk

web色変換

カラーコードの覚え方

カラーコード、毎回WEBなどで色を確認するというのは
手間がかかりますね。
その時間を短縮する為にカラーコードをどのように覚えるのかと
いうことを書いてみました。

 

カラーコード 覚え方 仕組み

 

カラーコードを覚える場合、詳しい正確な値まで
覚えるのは難しいですが、おおざっぱにこの辺りの値は何色の
ような色ということは覚えることができます。

 

主に16進数(に#がついたもの)が『カラーコード』
呼ばれています。

 

カラーコードを指定する時10進数が使える事もかなり多いです。
WEBに関するものCSSなどは普通にRGB指定ができて
Photoshopなどでもカラー選択する場合
10進数16進数どちらも入力欄などがあります。

 

カラーコードの覚え方は16進数か、rgb(10進数)で
変わります。

それぞれどのような値になっているのかと
いいますと。

10進数の場合の値

  • R : 赤 1~255の値
  • G : 緑 1~255の値
  • B : 緑 1~255の値

 

赤,緑,青の各値が1~255の値で色が決定されます。

10進数の場合赤,緑,青の組み合わせなので
直観的に判りやすい。

例を挙げてみると

rgb(255,160,220)であれば ピンク

rgb(240,255,230)であれば 水色

となります。

 

16進数の場合の値

16進数に関しては、上記のrgbと少し異なっていますが
原理は似たような感じです。

16進数の場合の組み合わせは

#rrggbb (rが赤の値、gが緑の値,bが青の値 どれも10進数の1~255)と
なっています、16進数のカラーコードの場合は
値が各 16進数となるのが厄介です。

16進数の簡単に仕組みは9以降がa,b,c,d,e,fと16で
一桁となっています。
1~255の値を16進数の表は下のようになっています。

10進数と16進数の比較表

以下のページで確認できます。

16進数 変換 早見表

 

 

この値を覚えることができれば
16進数のカラーコードでも、10進数のように直観的に
使えることができると思います。

 

実際の特定の色 カラーコードの範囲の覚え方

カラーコード10進数と16進数の値の仕組みは
上のようになっていますが、もうすこし踏み込んで
どの範囲内にどのようなカラーコードがあるかをということを
いろいろと書いておきます。

 

色によっても薄い色と濃い色があります。
これらの違いは、黒(#000000)に近いか、白(#ffffff)に近いかというので
判別できると思います。
この違いと書くRGBの値の組み合わせを覚えると
かなりのカラーコードの範囲が覚えることができます。

薄い色を得たい場合はrgbを各255に近い値の範囲が
かなり薄い色になります。

ピンクであれば、
R値は240~255の間
G値は220~240の20間隔
B値は180~255の約20間隔
などで、 R,G がかなり高い値となります。

見た目が肌色なども
RGB R値を 240~255
RGB G値を 180~220
RGB B値を 130~160

とRとGの値が高い数値のものが多いです。

tag:16進数, rgb,



記事
cmyk 色見本

cmyk RGB 数値変換 使い方 CMYK⇔RGBの相互変換可能なWEBツールです。 RGBやcm…

rgb 変換(HEX,CMYK,HSV,HSL,補色)

  rgb 変換 使い方 rgbをカラーピッカーから選択してカラーコード(16進数),CM…

画像 色の割合 調べるツール

画像の色抽出 割合を調べるツール 説明 画像から 色(カラーコード)や 色の面積や面積の割合を分析し…