HEXカラーコードの仕組み

HEXカラーコード: 各チャンネルを16進数として読む

16進数は0から9に加え、10から15をAからFで表す合計16個の記号を使います。2個の記号で16×16、つまり256通りを記録できます。6桁のHEXカラーコードでは最初のペアが赤、次が緑、最後が青です。00は最小、FFは10進数255の最大です。#2468ACなら赤は0x24で36、緑は0x68で104、青は0xACで172となり、rgb(36 104 172)は同じsRGB座標を別の書式で表します。HEXカラーコードを読むときは、最初から2桁ずつ区切ると順序を間違えにくくなります。

すべてのペアを暗算できなくても、HEXカラーコードは十分に扱えます。00に近いペアはそのチャンネルが弱く、FFに近いペアは強いと読めます。#777777のように3つのペアが同じなら、赤・緑・青が等しいので中立なグレーです。ただしコード、デザイントークン、コントラスト計算、他者への引き渡しでは正確な変換が必要です。ハッシュ記号と6桁全体をコピーし、プロジェクトの規則に合わせて大文字か小文字を統一し、色名の印象だけで判断せずにツールでRGB値を確認してください。

HEXカラーコード: 短くする前に短縮形の条件を確認する

3桁のHEXカラーコードは、6桁から好きな文字を省いたものではありません。各桁を複製して展開します。#F09は#FF0099、#ABCは#AABBCC、#123は#112233です。6桁を短くできるのは、赤・緑・青の各ペアで2文字が同じ場合だけです。#33AA77は#3A7にできますが、#32AA77の32は1文字の複製で表せません。3桁は各チャンネル16段階なので16³、合計4,096色です。6桁のHEXカラーコードは各チャンネル256段階で、256³、合計16,777,216色を表せます。

短いHEXカラーコードは完全に同じ値になる場合には便利ですが、3文字を節約するためにブランド色やUIの指定を変えるべきではありません。トークンの原本には6桁を残し、短縮がチームの意図的な規約である場合だけ利用すると安全です。AからFの大文字と小文字は色を変えないため、#00ff88と#00FF88は等価です。それでも表記を統一すると検索、差分レビュー、重複確認が容易になります。受け渡しで確認すべきなのは、ハッシュ、3・4・6・8の有効な長さ、チャンネル順、そして正確な文字です。

HEXカラーコード: アルファは青の後ろに置く

8桁のHEXカラーコードは#RRGGBBAAの順です。最後のAAがアルファで、00は完全な透明、FFは完全な不透明、中間は部分的な不透明度です。たとえば#0000FFCCは青にCCのアルファを加えた値で、W3Cの例では80%の不透明度に相当します。4桁の#RGBAは3桁と同じ複製規則なので、#05ACは#0055AACCへ展開されます。古いAPIや一部のグラフィックス環境はパックされた整数を別のバイト順で見せることがありますが、現代のCSSに書くHEXカラーコードではアルファを最後に置きます。

HEXカラーコード: HEXが保持できる情報と限界を知る

CSSのHEXカラーコードはsRGBを直接指定します。短く広く通用しますが、Display P3の広色域、デバイス非依存のLab、印刷用CMYKの配合、測色した物体の反射特性までは記録しません。広色域の原色を6桁のHEXカラーコードへ変換すると、sRGB内へ色域マッピングまたはクリッピングされる場合があります。スクリーンショット、ブラウザのスポイト、デザインファイルが違う値に見えるときは、カラープロファイル、画面能力、書き出し処理も確認してください。重要な案件では元の色空間を保存し、sRGBが納品先のときにHEXを使います。