目次
はじめに
Webサイトを作っていると、色を指定するときに「#FFFFFF」や「#FF5733」といった文字列をよく見かけますよね。
これが、「16進数カラーコード」と呼ばれるものです。
Hex(Hexadecimal color code)とも言いますね。
「FF？なぜ数字じゃなくてアルファベット？」
「どうして#がついているの？」
そんな疑問を、この記事でスッキリ解消しましょう！
デザイナーやコーダーが必ず使う カラーコードの仕組みと意味 を理解すれば、色選びの精度がグッと上がり、より美しいデザインが作れるようになります。
16進数カラーコードとは？
16進数カラーコードとは、Web上で色を表すための表記方法です。
HTMLやCSSでは、次のように指定します。
color: #FF0000; /* 赤 */
background-color: #00FF00; /* 緑 */
border-color: #0000FF; /* 青 */
📘 形式
#RRGGBB の6桁で構成されます。
| 記号 | 意味 | 範囲 |
|---|---|---|
| RR | 赤（Red） | 00〜FF |
| GG | 緑（Green） | 00〜FF |
| BB | 青（Blue） | 00〜FF |
たとえば、#FF0000 → 赤、#00FF00 → 緑、#0000FF → 青 になります。
RGBと16進数の関係
カラーコードは、RGB（Red, Green, Blue） の3要素を組み合わせて表現しています。
それぞれの値は 0〜255 の範囲で設定でき、この数値を16進数に変換したものがカラーコードです。
| RGB(10進数) | 16進数 | 色 |
|---|---|---|
| (255, 0, 0) | #FF0000 | 赤 |
| (0, 255, 0) | #00FF00 | 緑 |
| (0, 0, 255) | #0000FF | 青 |
| (255, 255, 255) | #FFFFFF | 白 |
| (0, 0, 0) | #000000 | 黒 |
なぜ16進数で表すの？
10進数では3桁（例：255）を3回書く必要がありますが、16進数では 「FF」 と2桁で済みます。
つまり、コンピューターが理解しやすく、人間も読みやすいという理由で使われているのです。
また、16進数は 2進数4桁 = 16進数1桁 で変換できるため、メモリや処理効率の面でもメリットがあります。
カラーコードの読み方・仕組み
例1：#FF5733 の場合
| 要素 | 16進数 | 10進数 | 意味 |
|---|---|---|---|
| R（赤） | FF | 255 | 強い赤 |
| G（緑） | 57 | 87 | 弱めの緑 |
| B（青） | 33 | 51 | 弱めの青 |
→ 赤が強く、少しオレンジがかった温かみのある色。
例2：ショートコード #FFF とは？
6桁のカラーコードのうち、同じ文字が2つずつ繰り返されている場合は省略できます。
たとえば：
| フルコード | 省略形 | 色 |
|---|---|---|
| #FFFFFF | #FFF | 白 |
| #000000 | #000 | 黒 |
| #FFCC00 | #FC0 | 明るい黄色 |
CSSで書くときに、短くて便利です。
デザインに活かす色のコツ
1. トーンを意識する
RGBのバランスを少しずつ変えると、色の「明るさ」や「鮮やかさ」が微妙に変わります。
#FF6666 → #FF9999 → #FFCCCC のように、数字を増やすほど淡くなります。
2. 配色比率を考える
基本は ベース（70%）＋アクセント（20%）＋ポイント（10%）。
16進数コードで色を統一すると、CSS設計も整いやすくなります。
3. トーンを固定する
同系統で彩度を変えたパレットを作ると、ブランドイメージを統一しやすいです。
例：青系のトーン
- 濃い青：#003366
- 標準青：#3366CC
- 淡い青：#99CCFF
便利なカラーコードツール3選
| ツール名 | 特徴 | URL |
|---|---|---|
| Adobe Color | カラーホイールで配色を自動提案 | https://color.adobe.com/ja |
| Coolors | ワンクリックで5色のパレット生成 | https://coolors.co |
| HTML Color Codes | 名前・コード・RGB値がすぐわかる | https://htmlcolorcodes.com |
まとめ
- 16進数カラーコードは、RGBの各値を16進数で表したもの。
- #RRGGBB の形式で、00〜FF（0〜255）を指定できる。
- 2進数4桁＝16進数1桁なので、デジタル的にも効率的。
- デザインでは「配色バランス」「トーン」「統一感」を意識すると◎。
- ツールを活用して、自分だけのカラーコードパレットを作ろう！
