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

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

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

この記事でわかること

カラーコード(HEXカラーコード)とは何か、6桁それぞれが何を表すか
そもそも16進数とは何か、なぜFFが最大でOOが最小なのか
3桁の省略形が使える正確な条件
RGBとの使い分け・透明度の指定方法・大文字小文字の扱い

基本の理解

まずはカラーコードの見た目のルールと、その裏にある16進数の仕組みを押さえます。

ここが分かると、以降の「省略形」や「実務での使い分け」も自然に理解できるようになります。

カラーコード(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桁ずつに分けて読むと、どの色がどれくらいの強さで混ざっているかが分かる仕組みです。

そもそも16進数とは何か

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

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

数字だけでは10種類しか記号がないため、10進数の10・11・12…15にあたる部分をA〜Fの文字で補っている、とイメージすると分かりやすいです。

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

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

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

この対応関係が分かると、「#000000」はRGBすべての光がゼロなので黒、「#FFFFFF」はRGBすべてが最大なので白になる、という理屈も自然につながります。

なぜカラーコードが必要なのか

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

カラーコードを使えば、誰が見ても寸分違わず同じ色を再現できるため、認識のズレが起こりません。

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

また、ブランドカラーのように長期間使い続ける色は、カラーコードとして正確に記録しておくことで、担当者が変わっても同じ色を再現し続けられます。

実践のポイント

ここからは、カラーコードを実際に使うときにつまずきやすい点と、現場でよく出る疑問をまとめます。

仕組みが分かっていても、運用ルールを知らないと迷いやすい部分です。

注意点・よくある間違い

カラーコードでよくあるつまずきが、桁数の間違いです。「#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)の方が便利なことがあります。

透明度(アルファ値)はどう指定する?
通常の6桁のカラーコード(#RRGGBB)だけでは透明度を表せません。透明度も含めたい場合は、末尾に2桁を追加した8桁の「#RRGGBBAA」形式(モダンブラウザで対応)を使うか、rgba(255, 0, 0, 0.5)のように、RGBの値と0〜1の透明度をセットで指定するrgba形式を使います。8桁形式の末尾2桁は、RGBと同じく00(完全に透明)〜FF(完全に不透明)で指定します。

大文字・小文字は区別される?
「#FF0000」と「#ff0000」は、どちらも同じ色として扱われ、区別されません。大文字・小文字どちらで書いても動作は変わりませんが、コーディング規約として小文字に統一しているプロジェクトが多いため、チームのルールがあればそれに合わせるとよいでしょう。

よくある質問

Q. カラーコードとRGBは何が違うのですか?
A. どちらも赤・緑・青の組み合わせで色を表す点は同じです。違いは表記方法で、RGBは「rgb(255, 0, 0)」のように10進数の数値3つで表すのに対し、カラーコードは同じ内容を「#FF0000」という16進数6桁の文字列にまとめて表します。
Q. カラーコードはどうやって調べればいいですか?
A. デザインツールのカラーピッカーで色を選ぶと、対応するカラーコードが自動で表示されます。また、Web上のカラーコード検索ツールを使えば、色見本から対応するコードをすぐに確認できます。
Q. #RRGGBBのどこが赤・緑・青なの?
A. 最初の2桁(RR)が赤、真ん中の2桁(GG)が緑、最後の2桁(BB)が青の強さを表します。詳しくは本文の「カラーコードとは何か」の表を参照してください。