「CSSの色の指定の際によく見る、#〇〇〇〇〇〇って何か意味があるのかな？」
CSSでフォントカラーや背景色のプロパティの値を指定する際、「#〇〇〇〇〇〇」のような謎の文字列を見た事があると思います。これを、カラーコードと呼びます。
この、カラーコードの仕組みをうまく理解できていない方が多い印象なので、今回記事にさせていただきました。
意味が分からないと、不思議な文字列に見えるかもしれませんが、理解すると「成程！」となります。今回は、カラーコードについて、詳しく解説します。
今回の記事は、次のような方にお勧め！
・カラーコードの仕組みを理解したい
・普段意味もわからず、何となく使用してた
目次
解説前の予備知識。RGBと16進数。
まずは、解説前の予備知識として、RGB（アールジービー）と16進数ついて理解する必要があります。順番に解説していきます。
RGBとは？
RGBとは、色の表現方法の一つで、赤（Red）、緑（Green）、青（Blue）の頭文字をとって、RGBと呼んでいます。これは、「光の三原色」とも呼ばれています。コンピュータディスプレイに表示されるすべての色は、このRGB、3色の光線の強さで表現されています。
16進数とは？
16進数とは、0〜9までの10個の数字と、A〜Fまでの6個のアルファベットを使って数値を表現する方法です。RGB各色の光線の強さは、256段階で、数値に表すと0〜255の数字で表されます。この数字を16進数で表すと「00（弱い）」〜「FF（強い）」となります。
「RGB」と「16進数」は密接な関係があります。
カラーコードが意味する事とは？
RGBと16進数について理解していただいたところで、下記の画像をご覧ください。
これだけでも、何となくカラーコードの仕組みが分かった方もいらっしゃると思います。カラーコードは、#の後、2桁ごとに、RGBの濃淡が16進数で表現されています。
ちなみに、光の三原色では、赤、緑、青全ての色を重ねると、「白」になるので、#ffffff（強い）と表現されます。逆に、#000000（弱い）は「黒」になります。
実は、省略できる場合もあります。
カラーコードは、「00」「FF」のように1桁目と2桁目の文字や数字が同じ場合があります。このような場合は、省略して1桁で書いてもOKです。例えば、「#33FF22」は「#3F2」と書いても結果は同じです。
・RGBの濃淡を16進数で表現したものが、カラーコードというもの
・省略できる場合もある
WEBデザイン技能検定（3級）でもよく出る内容です
今回の内容は、WEB業界唯一の国家資格である、WEBデザイン技能検定でも、よく出題される内容となりますので、この資格の取得を狙っている方は、ぜひ覚えておいていただければと思います。
※WEBデザイン技能検定（3級）について知りたい方は、こちらから。
「#ffffff」「#000000」は何色になるかという問題が過去に出ていた例があります。
まとめ
いかがでしょうか？普段、意味もわからず使うよりも、理解していた方が、スッキリすると思いますので、是非頭にいれておいていただければと思います。
コメント