HEXカラーコードとは：#RRGGBBの仕組みを解説

HEXカラーコードの仕組み

画面上の色はすべて、赤・緑・青の光を混ぜて作られています。HEXコードは、それぞれの光の強さを#記号の後に2文字ずつ書きます。最初が赤、次が緑、最後が青です。これが#RRGGBBという形です。

使われる文字は16進数で、16個の数字で数える方法です。0〜9の後に、a（10）、b（11）、c（12）、d（13）、e（14）、f（15）が続きます。1組で00（0）からff（255）までの256通りを表せ、これはrgb()の範囲とぴったり同じです。

1組を普通の数値に直すには、1桁目に16を掛けて2桁目を足します。下はCSSの色名dodgerblueである#1e90ffを4つのフォーマットで示し、1組ずつ計算したものです。

つまり#1e90ffはrgb(30, 144, 255)です。赤が少し、緑がそこそこ、青が最大で、合わせると明るい空色になります。256通りの組が3つで、表せる色は16,777,216色です。

3桁と4桁のHEX省略形

どの組も2桁が同じ数字なら、各組を1文字で書けます。#ffcc00は#fc0になり、ブラウザが各桁を2つに戻して解釈します。#1e90ffには省略形がありません。1eも90も同じ数字の組ではないからです。

省略形で表せるのは約1,670万色のうち4,096色だけです。4桁にすると同じ方法で不透明度が加わり、#f008は#ff000088と同じ意味になります。

HEXの不透明度：アルファ付き8桁HEX

8桁のコードでは、4つ目の組としてアルファ、つまり不透明度が加わります。形は#RRGGBBAAです。00は完全に透明、ffは完全に不透明です。現行のすべてのブラウザがCSSでこれに対応しており、4桁の省略形#RGBAも使えます。

組の値を求めるには、不透明度に255を掛けて整数に丸め、16進数に変換します。50%なら127.5で、丸めると128、16進数では80です。#1e90ffに当てはめた一覧表は次のとおりです。

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

注意点が2つあります。1つ目に、80は255のうち128で、ちょうど50%ではなく50.2%です。HEXのアルファは256段階しかないので、きりのいいパーセントの多くは近似値になります。2つ目に、Androidではアルファが先頭に来ます。Androidのカラーリソースの#801e90ffは、CSSの#1e90ff80と同じ意味です。

HEXコードを見ただけで色を読み取る方法

変換しなくても色の見当はつきます。各組の1桁目を見てください。情報のほとんどはそこに詰まっています。

• 1桁目が最も大きいチャンネルが主役の光です。#d2691eは赤がd、緑が6、青が1なので、オレンジがかった茶色です。
• 2つのチャンネルが高いと混ざり合います。赤と緑で黄色、緑と青でシアン、赤と青でマゼンタや紫になります。
• 3つの組が同じならグレーです。#333333は濃いグレー、#999999は明るいグレーです。#708090のようにほぼ同じ組なら、くすんだグレーがかった色になります。
• 全体に数字が大きければ明るい色、小さければ暗い色です。3つの組がすべてc0以上なら淡い色、すべて30以下ならかなり暗い色です。
• 同じ数値でも、緑は青よりずっと明るく見えます。#00ff00のOKLCH明度は0.866、#0000ffはわずか0.452です。

#808080が中間のグレーではない理由

#808080は数値の上ではちょうど真ん中で、どのチャンネルも255のうち128です。しかし見た目は黒と白のちょうど中間ではありません。OKLCH明度は0.600なので、白までの道のりの60%の位置に見えます。

HEXの値はすでにsRGBのカーブでエンコードされています。このカーブは目の感じ方におおむね沿っていますが、完全には一致しません。#808080が発する光は白のおよそ21.6%で、知覚モデルでは見た目の中間点はもっと暗いところにあります。OKLCHでは#636363、CIELABでは#777777です。

これはテキストの色を選ぶときに重要です。白地にグレー#808080のコントラストは3.95:1で、本文のWCAG AAを満たしません。4.5:1を満たす最も明るいグレーは#767676で、1段階明るい#777777はすでに4.48:1で基準を下回ります。

大文字か小文字か、#は付けるか

HEXコードは大文字と小文字を区別しません。#1E90FF、#1e90ff、#1E90ffは、CSSでもSVGでもデザインツールでも同じ色です。どれか1つのスタイルを選んで全体で統一すれば、コードを検索したときにすべての使用箇所が見つかります。CSSでは小文字が一般的です。

#記号はCSSの構文の一部で、色そのものの一部ではありません。Figmaをはじめ多くのデザインツールは#なしでコードを表示します。プログラミング言語では0xを付けた数値として書くことも多く、FlutterのColor(0xFF1E90FF)はアルファの組から始まります。

画面上の色のHEXコードを調べる方法

スポイトを使います。カーソルの下にある色を読み取ってコードを表示するツールです。どれも無料で、たいていはすでにインストールされています。

• ChromeとEdge：F12でDevToolsを開き、Stylesパネルの色の四角をクリックして、スポイトのアイコンでページ上の色を取得します。
• PickShade：トップページのカラーピッカーには、ChromeとEdgeで使えるスポイトボタンがあり、画面上のどこからでも色を取得できます。
• Windows：Microsoft PowerToysをインストールし、Win + Shift + Cでカラーピッカーを開きます。
• macOS：「アプリケーション」の「ユーティリティ」から「Digital Color Meter」を開きます。sRGBに切り替えてから、「表示」、「値を表示」、「16進数」の順に選びます。
• Figma、Photoshopなど多くのデザインアプリ：Iキーでスポイトになります。
• 写真やスクリーンショットの場合：画像カラーピッカーで開き、好きなピクセルをクリックします。画像が端末の外に送られることはありません。

取得した値は元の色と数値が少しずれることがあります。画面にはカラープロファイルが適用され、画像は圧縮されているためです。正確な値が必要なときは、スクリーンショットからではなく、デザインファイルやCSSからコピーしてください。

よくある質問