カラーコード

Webサイトやデザインツールでは、文字や背景などの色を正確に指定するために「カラーコード」を使用します。

Web制作でよく使われるのが、次のような「16進数カラーコード」です。

先頭に「#」を付け、その後に6桁の数字やアルファベットを並べて色を表します。

6桁のコードは、2桁ずつ次の3つに分かれています。

• 最初の2桁：赤（Red）
• 中央の2桁：緑（Green）
• 最後の2桁：青（Blue）

赤・緑・青の光を組み合わせて色を表す方法を「RGB」といいます。

16進数とは

16進数とは、0〜9の数字とA〜Fのアルファベットを使って数を表す方法です。

普段使っている10進数では、0〜9まで数えると次の桁に進みます。

16進数では16で次の桁に進みます。

そのため、16進数の「10」は、10進数では「16」を意味します。

カラーコードでは、赤・緑・青の強さをそれぞれ00〜FFで表します。

• 00：最も暗い
• FF：最も明るい

例えば、#FF0000は赤が最大、緑と青が0なので、赤になります。

省略した書き方

カラーコードの省略表記は、6桁の各2文字が同じ場合に、3桁へ短くできる書き方です。

たとえば、#FF0000は次のように分けられます。

FF・00・00

それぞれ同じ文字が2つずつ並んでいるため、1文字ずつに省略して#FFFと書けます。

• #FFFFFF → #FFF
• #000000 → #000
• #CCAA88 → #CA8
• #336699 → #369

一方、#3A7BD5のように、各2文字が同じではないカラーコードは省略できません。

#3A・7B・D5

この場合は、それぞれの組が同じ文字ではないため、6桁のまま記述します。

3桁表記は短く書けることが利点ですが、教材や制作現場では、色を確認しやすい6桁表記が使われることも多くあります。