カラーコードとは?HEXカラーコードの仕組みと読み方を初心者向けに解説

Webサイトやデザインツールで色を指定するとき、「#FF0000」のような文字列を見かけたことはないでしょうか。これがカラーコード(HEXカラーコード)です。

この記事では、カラーコードとは何か、その裏にある16進数の仕組み、そして実際に使うときに気をつけたいポイントを、専門知識がない方にもわかるように解説します。

この記事でわかること

カラーコード(HEXカラーコード)とは何か、6桁それぞれが何を表すか
赤・緑・青を全部最大にすると白になる理由
そもそも16進数とは何か、なぜFFが最大で00が最小なのか
黄色・グレーなど、よく使う色のカラーコードの作り方
3桁の省略形が使える条件、RGBとの使い分け、透明度の指定方法

基本の理解

まずはカラーコードが何を表しているのか、その仕組みを押さえましょう。

カラーコード(HEXカラーコード)とは何か

カラーコードとは、シャープ記号(#)の後に英数字6桁を並べて色を表す、Web業界で標準的に使われている色の指定方法です。

正式には「HEXカラーコード」と呼ばれ、HEXは「16進数(hexadecimal)」の略です。

パソコンやスマホの画面の色は、「赤・緑・青」という3つの光の強さの組み合わせ(いわゆるRGB)で作られています。

カラーコードの6桁は、#RRGGBBという構造になっており、2桁ずつ区切って、それぞれ赤・緑・青の強さを表しています。

桁の位置	対応する色	例(#3399FFの場合)
1〜2桁目(RR)	赤(Red)の強さ	33
3〜4桁目(GG)	緑(Green)の強さ	99
5〜6桁目(BB)	青(Blue)の強さ	FF

たとえば「#FF0000」なら、RR(赤)が最大の「FF」、GG(緑)とBB(青)がゼロの「00」なので、純粋な赤になります。

このように、6桁を2桁ずつに分けて読むと、どの色がどれくらいの強さで混ざっているかが分かる仕組みです。

全部最大で白になるのは「光」を混ぜているから

絵の具は、赤・緑・青を全部混ぜると黒っぽく濁った色になります。

ところがカラーコードでは、赤・緑・青を全部最大にした「#FFFFFF」が白、全部ゼロにした「#000000」が黒です。

これは、画面が絵の具ではなく「光」を重ねて色を作っているためです。

真っ暗な部屋で、赤・緑・青の3つのライトを壁に当てるところを想像してみてください。

ライトを全部消す(#000000)
光がないので真っ暗、つまり黒になります。
3つのライトを全部最大で当てる(#FFFFFF)
3色の光が重なった場所は、まぶしい白になります。
2つのライトだけを重ねる
赤と緑の光が重なると黄色、赤と青ならマゼンタ(赤紫)、緑と青ならシアン(水色)になります。

赤・緑・青の光を重ねたときの色。重なるほど明るくなり、3色が重なった中心は白になる

このように、光は重ねるほど明るくなる性質があり、これを「加法混色」と呼びます(絵の具との違いは光と色料による色の違いとは?で解説しています)。

そもそも16進数とは何か

普段使っている数字は「0〜9」の10種類の数字で位が上がる10進数です。

それに対して16進数は「0〜9」の後、10〜15を「A・B・C・D・E・F」というアルファベットで表し、16種類の文字で位が上がる数え方です。

実際に数えてみると、次のような流れになります。

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 … 19, 1A … 1F, 20 … FF

Fの次で位が上がって「10」になり、この「10」は10進数の16にあたります。

2桁の最大値「FF」を10進数に直すと、15×16+15=255です。

つまりカラーコードでは、16進数2桁で「00」〜「FF」、10進数でいう0〜255の256段階を表しています。

数字が大きい(FFに近い)ほどその色の光が強い=明るい、数字が小さい(00に近い)ほどその色の光が弱い=暗いという対応関係になっています。

16進数	10進数	明るさの目安
00	0	一番暗い(光なし)
80	128	中間の明るさ
FF	255	一番明るい(最大)

よく使う色のカラーコード

仕組みが分かると、赤以外の色も「どの光をどれくらい混ぜるか」で読み解けます。

色	カラーコード	混ぜ方
黄色	`#FFFF00`	赤(FF)+緑(FF)
マゼンタ(赤紫)	`#FF00FF`	赤(FF)+青(FF)
シアン(水色)	`#00FFFF`	緑(FF)+青(FF)
紫	`#800080`	赤(80)+青(80)を半分ずつ
グレー	`#888888`	赤・緑・青をすべて同じ中間の値に

赤・緑・青の3つが同じ値のときは、色みのない白・グレー・黒(無彩色)になり、値が大きいほど白に、小さいほど黒に近づきます(無彩色については有彩色・無彩色とは?で解説しています)。

なお、赤と青を最大で混ぜた「#FF00FF」は、紫というよりピンクに近いマゼンタです。

落ち着いた紫にしたいときは、「#800080」のように値を下げて暗くします。

カラーコードが使われる理由

次に、なぜ言葉ではなくカラーコードで、しかも16進数で色を指定するのかを見ていきましょう。

言葉では色を正確に伝えられないから

色を「明るい青」や「少しくすんだ緑」のような言葉で伝えようとすると、人によって思い浮かべる色合いが微妙に異なってしまいます。

カラーコードを使えば、どの色を指定したのかを数値で正確に共有できるため、認識のズレが起こりません。

デザインツール(Figmaなど)とコード(HTML・CSS)の両方で共通して使える形式なので、デザイナーとエンジニアがお互いに色の情報をやり取りする際の「共通言語」としても機能します。

ブランドカラーのように長期間使い続ける色も、カラーコードとして記録しておけば、担当者が変わっても同じ色を指定し続けられます。

ただし、同じカラーコードでも、画面の性能や明るさの設定によって見え方が少し変わることはあります(詳しくは色域(ガモット)とは?で解説しています)。

なぜわざわざ16進数を使うのか

同じ色は、10進数でrgb(255, 0, 0)のようにも書けます。

それでも16進数のカラーコードがよく使われるのには、次のような理由があります。

どの色も6桁でコンパクトに書ける
10進数では0〜255で桁数が変わります(例:rgb(0, 5, 255))。
16進数なら、どの値も必ず2桁(00〜FF)に収まるため、どんな色も「#」+6桁の決まった形で短く書けます。
コンピュータのデータの単位とぴったり合う
256段階は、コンピュータの基本的なデータの単位である1バイト(8ビット)で表せる数と同じです。
16進数2桁でちょうど1バイトを表せるため、HTMLで色を指定し始めた初期の頃から使われ、標準として定着しました。

なお、カラーコードとRGBのどちらで書いても、表現できる色は同じです(使い分けは後の「実務でよく出る疑問」で解説します。RGBの仕組みはWebでRGBカラーが使われる理由とは?も参考にしてください)。

実践のポイント

カラーコードを実際に使うときの注意点と、実務でよく出る疑問をまとめます。

注意点・よくある間違い

カラーコードでよくあるつまずきが、桁数の間違いです。

「#333333」と入力するつもりが「#3333333」のように1桁多く(または少なく)入力してしまい、意図しない色になったり、色が反映されなかったりすることがあります。

カラーコードは基本が6桁(条件を満たせば3桁に省略可能)である点を意識すると、こうしたミスに気づきやすくなります。

3桁への省略には、実は明確な条件があります。

6桁のコードを2桁ずつ「RR・GG・BB」に分けたとき、それぞれのペアが同じ文字2つの繰り返しになっている場合だけ、その文字を1つに省略して3桁で書けます。

省略できる例
「#112233」は、RR=11・GG=22・BB=33とすべて同じ文字の繰り返しなので、「#123」に省略できます。
省略できない例
「#121212」は、RR=12・GG=12・BB=12となっていますが、各ペアの中身が「1」と「2」という異なる文字なので、この条件には当てはまりません。
そのため「#121212」を「#123」に省略することはできません(「#123」が表すのは「#112233」だけです)。

また、「赤」「青」といった色の名前だけでやり取りを進めてしまい、実際のカラーコードを確認しないまま作業を進めてしまうケースもあります。

後になって「思っていた色と違う」と気づくと手戻りが発生するため、色を指定する際は早い段階で具体的なカラーコードをすり合わせておくことが大切です。

実務でよく出る疑問

RGBとHEX、どちらを使えばいい?
どちらも同じ情報(赤・緑・青の強さ)を表しているので、表現できる色に違いはありません。
CSSで固定の色を指定するだけなら、短く書けるHEX(カラーコード)が広く使われています。
一方、透明度を指定したい場合や、JavaScriptで色を計算・変化させたい場合は、数値がそのまま扱えるRGB(rgba)の方が便利なことがあります。
大文字・小文字は区別される?
「#FF0000」と「#ff0000」は、どちらも同じ色として扱われ、区別されません。
大文字・小文字どちらで書いても動作は変わりませんが、コーディング規約として小文字に統一しているプロジェクトが多いため、チームのルールがあればそれに合わせるとよいでしょう。

透明度(アルファ値)の指定方法

通常の6桁のカラーコード(#RRGGBB)だけでは透明度を表せません。

透明度も含めたい場合は、末尾に2桁を追加した8桁の「#RRGGBBAA」形式を使います(現在の主要なブラウザで使えます)。

末尾の2桁(AA)は、RGBと同じく00(完全に透明)〜FF(完全に不透明)の256段階で指定します。

「何%透かしたいか」から書き方を考えるときは、255にその割合を掛けて16進数に直します。

たとえば約50%の不透明度なら、255の半分の約128を16進数にした「80」を使い、赤なら#FF000080と書きます。

100%
#FF0000FF

約75%
#FF0000BF

約50%
#FF000080

約25%
#FF000040

8桁のカラーコードで不透明度を変えた赤(背景の市松模様が透けて見えるほど透明)

同じ半透明の赤は、rgba(255, 0, 0, 0.5)のように、RGBの値と0〜1の透明度をセットで指定するrgba形式でも書けます。

透明度を%で直感的に調整したいときは、rgba形式の方が分かりやすいでしょう。

よくある質問

Q. カラーコードとRGBは何が違うのですか?
A. どちらも赤・緑・青の組み合わせで色を表す点は同じです。
違いは表記方法で、RGBは「rgb(255, 0, 0)」のように10進数の数値3つで表すのに対し、カラーコードは同じ内容を「#FF0000」という16進数6桁の文字列にまとめて表します。
印刷で使うCMYKとの違いはRGBとCMYKの違いとは?で解説しています。
Q. カラーコードはどうやって調べればいいですか?
A. デザインツールのカラーピッカーで色を選ぶと、対応するカラーコードが自動で表示されます。
また、Web上のカラーコード検索ツールを使えば、色見本から対応するコードをすぐに確認できます。
Q. 「#FF0000」のように00・33・66…FFだけを使う決まりはありますか?
A. ありません。
昔は表示できる色数の少ない環境のために、こうした値だけを組み合わせた216色(Webセーフカラー)が使われていましたが、今は00〜FFのどの値でも自由に使えます(詳しくはWebセーフカラーとは?で解説しています)。