カラーコードとは
読み：からーこーど英語：Hex color code
更新日：2026年10月31日
ひとことで
カラーコードとは、「#FF8000」のように、RGB の赤・緑・青の強さを16進数で並べて、色を表す書き方のことです。
ひとに説明するなら
「カラーコードは、色の住所みたいなもの。#のあとに6けたの英数字が並んでいて、2けたずつが赤・緑・青の強さ。これを伝えれば、誰とでも同じ色を共有できる」
たとえるなら
郵便番号のようなものです。短い番号ひとつで、たくさんある中から、ひとつの場所（色）をぴたりと指し示せます。
6けたの中身
カラーコードは、「#」のあとに6けたの英数字が並んでいます。前から2けたずつが、赤（R）・緑（G）・青（B）の強さです。HEX（ヘックス）コードとも呼ばれます。
たとえば「#FF8000」は、赤が FF、緑が 80、青が 00 です。赤が最大、緑が半分くらい、青がゼロなので、オレンジになります。
R 200 ／ G 120 ／ B 60 → #C8783C
16進数の読み方
16進数は、0〜9 のあとに A〜F を使って、16で位が上がる数え方です。A が10、F が15にあたります。
2けたの16進数は、00（0）から FF（255）まで。RGB の 0〜255 を、2けたで書けるのが便利なところです。80 は10進数で128、ちょうど真ん中あたりです。
| 16進数 | 10進数 | 光の強さ |
|---|---|---|
| 00 | 0 | なし |
| 40 | 64 | 4分の1くらい |
| 80 | 128 | 半分くらい |
| C0 | 192 | 4分の3くらい |
| FF | 255 | 最大 |
3けた、8けたのカラーコード
「#F80」のような3けたの書き方もあります。これは、それぞれの文字を2回くり返した「#FF8800」の省略形です。
「#FF800080」のような8けたの書き方では、最後の2けたが透明度を表します。00 が完全に透明、FF が不透明です。英字は大文字でも小文字でも、同じ色になります。
.button {
background: #FF8000; /* 6けた */
color: #FFF; /* 3けた（#FFFFFF と同じ） */
border-color: #00000033; /* 8けた（黒の透明度20%くらい） */
}
よくある勘違い
勘違いカラーコードが同じなら、どの画面でも同じ色に見える
ほんとうは数字は同じでも、画面の性能や設定で見え方は少し変わります。カラーコードは、ふつう sRGB の値として扱われます。
勘違い英字の大文字と小文字で、色が変わる
ほんとうは変わりません。#ff8000 と #FF8000 は同じ色です。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットには、6色それぞれのカラーコードがついています。そのまま CSS やデザインツールに貼りつけて使えます。
まとめて使いたいときは、CSS、Tailwind の設定、トークン JSON、スウォッチ（.ase）もダウンロードできます。中身はすべて同じカラーコードです。
参考になるパレット
クイズ
「#00FF00」は何色？
赤
ちがいます。答えは「緑」。真ん中の2けた（緑）だけが最大の FF なので、緑です。
緑
正解です。答えは「緑」。真ん中の2けた（緑）だけが最大の FF なので、緑です。
青
ちがいます。答えは「緑」。真ん中の2けた（緑）だけが最大の FF なので、緑です。
「#F80」と同じ色は？
#F80000
ちがいます。答えは「#FF8800」。3けたは、それぞれの文字を2回くり返した省略形です。
#FF8800
正解です。答えは「#FF8800」。3けたは、それぞれの文字を2回くり返した省略形です。
#F8F8F8
ちがいます。答えは「#FF8800」。3けたは、それぞれの文字を2回くり返した省略形です。
よくある質問
カラーコードとは何ですか？
赤・緑・青の強さを16進数で並べた、色の書き方です。「#FF8000」のように、#のあとに6けたで書きます。
HEX コードとカラーコードは同じですか？
同じものです。16進数（hexadecimal）で書くので、HEX コードとも呼ばれます。
8けたのカラーコードの最後の2けたは何ですか？
透明度です。00 が完全に透明、FF が不透明です。
カラーコードを RGB の数字にするには？
2けたずつ16進数を10進数に直します。#FF8000 なら、赤255・緑128・青0 です。