WebデザインやHTMLを学んでいると、「#FF5733」のような16進数のカラーコードを目にする機会が多いでしょう。
16進数のカラーコードとは、色をRGB（赤・緑・青）の3要素に分解し、それぞれを16進数2桁で表現する色指定の方式です。
この仕組みを理解することで、デザインツールやCSSでの色指定が格段にわかりやすくなります。
本記事では、カラーコードの仕組み・RGB値との関係・Webカラーの代表例・デザインでの活用方法まで詳しく解説していきます。
16進数カラーコードの基本的な仕組み
それではまず、16進数カラーコードの基本的な仕組みについて解説していきます。
HTMLやCSSで使われる16進数カラーコードは、「#RRGGBB」という形式でRed（赤）・Green（緑）・Blue（青）の各成分を16進数2桁（00〜FF）で表現したものです。
RR・GG・BBそれぞれが00〜FF（10進数で0〜255）の256段階で指定でき、3つの組み合わせで約1677万色（256^3＝16,777,216色）を表現することができます。
先頭の「#」はカラーコードであることを示す記号であり、HTMLやCSSで色を指定する際のお作法のようなものでしょう。
カラーコードの構造
#RRGGBB
#（識別子）＋RR（赤成分）＋GG（緑成分）＋BB（青成分）
各成分：00（最小＝なし）〜FF（最大＝最も鮮やか）
例：#FF0000（純粋な赤）、#00FF00（純粋な緑）、#0000FF（純粋な青）
RR・GG・BBの各値が大きいほど（FFに近いほど）その色成分が強くなり、すべてFFだと白（#FFFFFF）、すべて00だと黒（#000000）になります。
この直感的なルールを覚えるだけで、カラーコードを見て大まかな色のイメージをつかめるようになるでしょう。
RGB値と16進数の相互変換
RGB値と16進数カラーコードは相互に変換できます。
RGB値→16進数カラーコードの変換例
RGB(255, 87, 51) → R=FF、G=57、B=33 → #FF5733
RGB(0, 128, 255) → R=00、G=80、B=FF → #0080FF
各成分を16進数（DEC2HEX）に変換して連結するだけ。
Pythonでの変換：’#{:02X}{:02X}{:02X}’.format(255, 87, 51) → ‘#FF5733’
デザインツール（PhotoshopやFigmaなど）ではRGB値と16進数カラーコードを両方表示・入力できるため、どちらの形式も扱えると作業効率が上がります。
RGB値の各成分を256で割ることで0〜1の小数で表した値は、CSSのrgba()関数やゲームエンジンでよく使われるでしょう。
3桁の短縮カラーコード
CSSでは「#RGB」という3桁の短縮形式のカラーコードも使えます。
短縮形式は各成分が「RR」「GG」「BB」のように同じ数字の繰り返しである場合に適用でき、「#FF5500」は「#F50」と省略できます。
短縮形式が使える条件は、各2桁が同じ文字（11・22・AA・FFなど）の場合のみであり、すべてのカラーコードを短縮できるわけではありません。
よく使う色のカラーコードを短縮形式で覚えておくと、CSSを書く際の効率が上がるでしょう。
代表的なWebカラーとカラーコード一覧
続いては、代表的なWebカラーとカラーコードの一覧を確認していきます。
| 色名 | カラーコード | RGB値 |
|---|---|---|
| 白（White） | #FFFFFF | RGB(255,255,255) |
| 黒（Black） | #000000 | RGB(0,0,0) |
| 赤（Red） | #FF0000 | RGB(255,0,0) |
| 緑（Green） | #008000 | RGB(0,128,0) |
| 青（Blue） | #0000FF | RGB(0,0,255) |
| 黄（Yellow） | #FFFF00 | RGB(255,255,0) |
| オレンジ | #FFA500 | RGB(255,165,0) |
| 紫（Purple） | #800080 | RGB(128,0,128) |
| 灰色（Gray） | #808080 | RGB(128,128,128) |
| 水色（Cyan） | #00FFFF | RGB(0,255,255) |
カラーコードから色の特徴を読み取るコツ
カラーコードを見て色のイメージを把握するコツを紹介します。
まずRR（赤成分）が大きければ暖色系、BB（青成分）が大きければ寒色系と判断できます。
RR・GG・BBがすべて近い値であれば無彩色（グレー系）であり、値が大きいほど明るく、小さいほど暗いでしょう。
3成分のうち1つだけが突出して大きい場合は、その色が強調された鮮やかな色になります。
このような読み方ができると、デザインの現場で色の調整をスムーズに行えるようになるでしょう。
アルファ値（透明度）を含むカラーコード
CSSでは8桁のカラーコード「#RRGGBBAA」でアルファ値（透明度）も指定できます。
AAの部分が透明度を示し、FF（不透明）〜00（完全透明）の範囲で指定します。
たとえば「#FF000080」は赤色の50%透明を意味し、背景を透かして表示するデザインに活用できるでしょう。
CSSのrgba()関数では「rgba(255, 0, 0, 0.5)」のように0〜1の小数でアルファ値を指定する書き方も一般的です。
デザインツールでのカラーコード活用方法
続いては、デザインツールでのカラーコード活用方法を確認していきます。
FigmaやAdobe XD・Photoshopなどのデザインツールでは、カラーコードを直接入力することで正確な色指定が行えます。
カラーパレットとブランドカラーの管理
企業やプロダクトのブランドカラーは16進数カラーコードで厳密に管理されることが多いです。
ブランドカラーのカラーコードをデザインシステムに登録しておくことで、さまざまなデバイスやメディアで一貫した色表現が実現できます。
CSSのカスタムプロパティ（CSS変数）でカラーコードを一元管理することで、サイト全体の配色変更も一括で行えるようになるでしょう。
カラーコードのアクセシビリティ考慮
Webデザインでは、文字色と背景色のコントラスト比をWCAG（Webコンテンツアクセシビリティガイドライン）に基づいて確認することが重要です。
カラーコードをコントラストチェッカーツールに入力することで、アクセシビリティ基準を満たしているかどうかを確認できます。
明るい背景（白系）には暗い文字色（黒・濃紺など）を、暗い背景には明るい文字色を組み合わせることが基本のルールでしょう。
まとめ
本記事では、16進数カラーコードの仕組み・RGB値との変換方法・代表的なWebカラー・デザインでの活用方法まで幅広く解説してきました。
カラーコードは「#RRGGBB」という形式で赤・緑・青の各成分を16進数2桁で表現する仕組みであり、約1677万色を表現できる優れた色指定方式です。
各成分の値を見るだけで色のおおよその特徴がわかるようになると、デザイン作業の効率が大きく向上するでしょう。
CSSやデザインツールでの色指定に活かすために、ぜひ本記事の内容を参考にしてください。
