カラーコード、毎回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進数のカラーコードでも、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の値が高い数値のものが多いです。
