HEXカラーコードとは？読み方・仕組み・RGBとの関係

HEXカラーコードは、WebやCSSで色を指定するときに使われる16進数表記のカラーコードです。代表的な形は #RRGGBB で、赤（Red）・緑（Green）・青（Blue）の3成分を、それぞれ00〜FFの16進数で表します。

HEXカラーコードとは？

HEX（hexadecimal）は「16進数」という意味です。CSSでは、# に続けて赤・緑・青の値を16進数で記述します。

MDNとCSS Color Module Level 4では、3・4・6・8桁の16進色表記が定義されています。

#RRGGBBの読み方

6桁のHEXカラーコードは、2桁ずつ3つに分けて読みます。

#336699 なら、赤が 33、緑が 66、青が 99 です。

なぜ0〜9のあとにA〜Fを使う？

10進数は0〜9の10個の数字を使いますが、16進数は16個の値を1桁で表す必要があります。そのため、10〜15に相当する値としてA〜Fを使います。

2桁の最大値 FF は10進数で255です。そのためRGBの各成分は0〜255で表せます。

HEXとRGBの関係

HEXと rgb() は、どちらもCSSでsRGB色を指定する代表的な方法です。

たとえば FF は255なので、#FF0000 と rgb(255 0 0) は同じ色を表します。

3桁のHEXはどういう意味？

#RGB は #RRGGBB の短縮形です。各桁を2回繰り返します。

• #F00 → #FF0000
• #0F0 → #00FF00
• #09C → #0099CC

MDNでは、1桁の値は複製されると説明されています。たとえば C は CC になります。

8桁HEXの最後2桁は透明度

#RRGGBBAA の最後の AA はアルファ値、つまり透明度を表します。

4桁の #RGBA も同じ考え方で、それぞれの1桁を2回繰り返します。

大文字と小文字で色は変わる？

変わりません。CSSのHEX表記では大文字・小文字を区別しないため、#FF0000 と #ff0000 は同じ色です。

HEXは全部で何色ある？

6桁HEXでは、赤・緑・青の各成分が256段階あるため、

256 × 256 × 256 = 16,777,216通り

の組み合わせがあります。

HEXはどこで使う？

主にHTML/CSS、Webデザイン、UI制作、デザインツール、画像編集ソフトなどで使われます。

body {
  color: #222222;
  background-color: #FFFFFF;
}

.button {
  background-color: #006AB6;
}

CSSではHEX以外にも、rgb()、hsl()、名前付き色、さらに現代的な色関数などが使えます。

HEXとHSL・CMYKは何が違う？

HEXをCMYKへ変換することはできますが、画面のsRGBと印刷のCMYKでは色域や再現方法が違うため、完全な一対一変換ではありません。

HEXでよくある勘違い

「HEXは色そのものの公式番号」ではない

HEXはWeb上でRGB値を記述する方法です。伝統色・塗料色・印刷色などに「唯一の公式HEX」があるとは限りません。

同じHEXならどの画面でも完全に同じ色に見える？

コードが同じでも、ディスプレイの色域、キャリブレーション、明るさ、周囲の照明などで見え方は変わります。

HEXなら印刷でも同じ色になる？

なりません。印刷ではCMYKや特色、紙、インキ、印刷条件などが関係します。

色しるべでHEXを調べる

よくある質問

参考資料

• MDN Web Docs「<hex-color>」
• MDN Web Docs「CSS 色値」
• W3C CSS Color Module Level 4