PR

納得!カラーコードとは?仕組みを詳しく解説!

WEB制作技術系

「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」は何色になるかという問題が過去に出ていた例があります。

まとめ

いかがでしょうか?普段、意味もわからず使うよりも、理解していた方が、スッキリすると思いますので、是非頭にいれておいていただければと思います。

タイトルとURLをコピーしました