CSSで16進数カラーコード（HEXカラー）を使う方法を徹底解説

この記事では、CSSで16進数カラーコード（通称「HEXカラー」）を使う方法を、基本構文から透明度の指定までわかりやすく解説します。

16進色（HEXカラー）とは？

16進表記（ヘックスカラー表記）は、RGBカラーを別の形式で表現するための記法です。HEXカラーは、2桁の値を3つのブロックに分けて指定します。

• RR … 赤（Red）の強さ
• GG … 緑（Green）の強さ
• BB … 青（Blue）の強さ

これらを組み合わせると #RRGGBB となります。ギリシャ語で「Hexa」は「6」を意味しており、RRGGBBの合計がちょうど6文字であることから、この名前が付いています。

RGB表記との違い

HEXカラーとRGBの大きな違いは、0〜255までの値をたった2桁で表現できる点です。例えば、次のRGBコードは100%の白を表します。

rgb(255,255,255);

同じ色をHEXカラーで書くと、次のようになります。

#ffffff /* 100%の白 */

さらに、2桁が同じ値の場合（FF FF FF など）は、1桁に省略して書くことも可能です。

#fff /* 100%の白のショートハンド */

アルファチャンネル付きのHEXカラー

RGBにRGBa、HSLにHSLaがあるように、HEXカラーにもアルファチャンネル（透明度）を指定できます。2桁のブロックを1つ追加して、#RRGGBB を #RRGGBBAA（AはAlpha）という形式にするだけです。

アルファ値は「00」（完全な透明）〜「FF」（完全不透明）の範囲で指定します。例えば、次のコードは不透明度25%の黒を表します。

#00000040 /* 不透明度25%の黒 */

表示すると、下にあるコンテンツが透けて見える半透明の黒い要素になります。

よく使う透明度の早見表

ちなみに、HEXカラーは大文字・小文字どちらでも記述でき、#ffffff と #FFFFFF に違いはありません。チームやプロジェクト内で表記を統一しておくと、コードの可読性が向上します。

16進表記のブラウザ対応状況

• #RRGGBB 形式は、レガシーブラウザを含むすべてのブラウザでサポートされています。
• #RRGGBBAA 形式は、すべてのモダンブラウザで動作しますが、IE11では利用できません（IE11を今なお「モダン」と呼ぶ人がいるかどうかは別として）。