超現場ブログ

Technique,Design and Events

難解カラーコードも、意味を知れば簡単!

Twitter Facebook Google+ はてブ

color_03

今日は、主にCSSで色の指定をする時に使う、カラーコードについてです。
#ea34f1」こんなやつです。

一見すると「何の暗号?」って感じてしまいますが、きちんとルールがあり、そのルールを覚えてしまえば、さほど難しい問題ではありません。

パソコンのモニターは、三色の組み合わせ

パソコンだけでなくテレビ等もそうなのですが、いわゆるモニターが色を再現する際は、光の三原色を組み合わせる事で色を再現しています
光の三原色は「」の3色です。
英語にしたときの頭文字を取って、「RGB」という言葉がよく使われます。
Red Green Blue

各々の色をどれくらい組み合わせるか

上記で説明したRGBは、3色の色を各々どれくらい組み合わせるかによって、色を再現します。
そして、組み合わせる量は、0〜255の、計256段階に分かれています。
つまり再現出来る色の数は、256の三乗で、16,777,216通りになります。

例えば「赤」は、
R=255、G=0、B=0
と考えます。

カラーコードは16進数で考える

カラーコードは、RGBの値を、各々16進数で表した時の数値になります。

普段使う10進数が、10で位が一つ上がるのに対し、16進数は、16で位が一つ上がります。9以上はアルファベットを使います。

10進数
1,2,3,4,5,6,7,8,9,10
16進数
1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10

16進数で表した時、255は、「FF」になります。
再現出来る色の段階である、0〜256は、16進数で考えると、00〜FFになるわけです。

さて、最初に書いたカラーコードを見てみます。

#ea34f1

これは、#以降の2文字ずつ分解して考えます。
最初の2文字が赤(R)
次の2文字が緑(G)
最後の2文字が青(B)
を16進数で表しています。

#ea34f1

各々十進数に戻すと、
R:ea→234
G:34→52
B:f1→241

となり、各々0〜255の256段階のうち、
赤が234、緑が52、青が241
の色を組み合わせた色となります。

こんな色です。

まとめ

カラーコードは、RGBの0〜255の数値を、16進数にしてくっつけたものです。
一見すると暗号みたいに思えてしまいますが、ルール自体は上記の様に単純だったりします。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.