Webデザインやアプリ開発をしていると、#FF5733 や rgb(255, 87, 51) といった色の表記を頻繁に目にします。これらはすべて同じ色を異なる形式で表したものです。なぜ複数の形式があるのか、それぞれをいつ使うべきかを理解しておくと、デザインと実装の両方がスムーズになります。

さらに、色を扱ううえで見落とされやすいのが「明るさ」の扱いです。HSLの明度と、人間が感じる明るさは一致しません。ここを取り違えると、文字が読みにくい配色になります。

RGBとは — 光の三原色で色を表す

コンピュータのディスプレイは、赤（Red）・緑（Green）・青（Blue）の光を混ぜて色を表現します。これが RGB です。それぞれの成分を0〜255の数値で指定し、組み合わせることで 256 × 256 × 256 = 16,777,216色（約1,678万色）を表現できます。

色 R G B
赤 255 0 0
緑 0 255 0
青 0 0 255
白 255 255 255
黒 0 0 0

RGBは数値が直感的で、プログラムで色を計算・操作するのに向いています。CSSでは rgb(255, 87, 51) のように記述します。

HEXとは — 16進数で短く表記する

HEX（16進数）カラーコードは、RGBの各成分を0〜FFの16進数で表し、6桁にまとめた形式です。#RRGGBB の順に並んでいます。

たとえば #FF5733 は R=255（FF）、G=87（57）、B=51（33）を表します。RGBと表現できる色の範囲はまったく同じで、記法が異なるだけです。

HEXはCSSやHTMLで広く使われており、Figma・Sketch・Adobe XDなどのデザインツールでも標準的に使われています。コピー＆ペーストしやすい短い形式のため、コード内での色指定によく使われます。

なお、HEXには3桁の省略記法もあります。各桁を2回繰り返した色と同じ意味になります。

#F53  →  #FF5533
#FFF  →  #FFFFFF

省略できるのは、RR・GG・BB がそれぞれ同じ文字の繰り返しになっている場合だけです。#FF5733 は 57 が 55 ではないため、3桁には短縮できません。また、#ff5733 と #FF5733 のように大文字と小文字が混在しても同じ色として扱われますが、grep で色を検索するときに引っかからなくなるので、プロジェクト内では表記をそろえておくと扱いやすくなります。

透明度を含める書き方

色に透明度（アルファ値）を加える方法は2つあります。

/* rgba() で指定する */
color: rgba(255, 87, 51, 0.5);

/* HEXを8桁にする（#RRGGBBAA） */
color: #FF573380;

8桁HEXの末尾2桁がアルファ値です。16進数なので少しわかりにくいのですが、目安は次のとおりです。

末尾2桁 透明度
FF 100%（不透明）
CC 80%
80 約50%
00 0%（完全に透明）

デザインツールが8桁HEXを出力してくることもあるため、末尾2桁の意味を知っておくと戸惑わずに済みます。

HSLとは — 人間の感覚に近い色の指定

HSL は色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。RGBやHEXと異なり、人間の色の感覚に近い形で指定できます。

先ほどの #FF5733 をHSLで表すと hsl(11, 100%, 60%) になります。色相が11度（赤寄りのオレンジ）、彩度100%、明度60%という意味です。

「同じ色相で明度だけ上げた色バリエーションを作りたい」という場合、RGBでは3つの値をそれぞれ計算する必要がありますが、HSLなら明度の数値だけを変えれば済みます。デザインシステムのカラーパレット設計や、ホバー状態の色変化をCSSで表現するときに特に便利です。

HSLの「明度」は見た目の明るさではない

ここがHSLの最大の落とし穴です。HSLの明度（L）が同じでも、人間が感じる明るさは大きく異なります。

黄色と青を比べると一目瞭然です。

色 HEX HSLの明度 相対輝度
黄 #FFFF00 50% 0.9278
青 #0000FF 50% 0.0722

どちらもHSLの明度は50%です。ところが実際の明るさ（相対輝度）は、黄色が青の約13倍あります。人間の目は緑〜黄の波長に最も敏感で、青には鈍いためです。

つまり「HSLの明度を50%でそろえたから、明るさは均一になったはず」という考え方は成り立ちません。カラーパレットを設計するとき、HSLの明度だけを頼りにすると、色によって浮いたり沈んだりします。

コントラスト比 — 読みやすさを測る指標

では明るさをどう測るのか。そこで使われるのがコントラスト比です。背景色と文字色の相対輝度から計算され、1:1（同じ色）から 21:1（白と黒）の範囲を取ります。

Webアクセシビリティのガイドライン（WCAG）では、次の基準が示されています。

基準 必要なコントラスト比
AA・通常のテキスト 4.5:1 以上
AA・大きい文字（18pt以上、または14pt太字以上） 3:1 以上
AAA・通常のテキスト 7:1 以上

先ほどの黄色と青に白い文字を載せた場合を比べてみます。

背景 白文字とのコントラスト比 判定
黄 #FFFF00 1.07:1 到底読めない
青 #0000FF 8.59:1 AAAも満たす

HSLの明度は同じ50%なのに、白文字の読みやすさはまったく違います。背景色を選ぶときは、HSLの明度ではなくコントラスト比で判断する必要があります。

明るい色を背景にするなら文字は黒、暗い色を背景にするなら文字は白、と直感的に判断しがちですが、中間の明るさの色（青緑・紫・中間調の赤など）はどちらとも判断がつきにくく、実際に計算してみると基準を満たしていないことがあります。ボタンの背景色などは、一度きちんと測っておくと安心です。

CSSの新しい色の書き方

近年のCSSでは、色の指定方法がいくつか増えています。

/* カンマなしの区切り + スラッシュで透明度（CSS Color Level 4） */
color: rgb(255 87 51 / 50%);
color: hsl(11 100% 60% / 50%);

/* 2色を混ぜる */
background: color-mix(in srgb, #0891b2 70%, white);

color-mix() を使うと、ホバー時に少し明るくした色などをCSSだけで作れます。従来はデザインツールで色を作ってHEXを貼り付けていた作業が、コード上で完結します。

また oklch() という、知覚的な均一性を持たせた色空間の記法も使えるようになっています。こちらは明度の数値と見た目の明るさが対応しやすいため、前の節で触れたHSLの弱点を解消できます。カラーパレットを一から設計する場合には検討する価値があります。

形式の使い分け

  • HEX：コードやデザインツールで色を指定するとき。コピー＆ペーストしやすく最も広く使われます。
  • RGB：プログラムで色を計算・操作するとき。透明度を加えた rgba() も使えます。
  • HSL：カラーバリエーションを作るとき。ただし明度＝見た目の明るさではない点に注意します。
  • OKLCH：明るさをそろえたパレットを設計するとき。

よくある質問

Q. HEXとRGBで表現できる色に違いはありますか

A. ありません。まったく同じ色空間（sRGB）を、16進数で書くか10進数で書くかの違いだけです。相互に変換しても情報は失われません。

Q. デザインツールで見た色と、ブラウザで見た色が違います

A. 表示するディスプレイの色域が異なることが主な原因です。同じ #FF5733 でも、sRGBのモニタと広色域（Display P3）のモニタでは見え方が変わります。色の確認は、できるだけ実際の利用環境に近い画面で行うのが確実です。

Q. 3桁のHEXは使わないほうがよいですか

A. #FFF のようなよく使う色では読みやすさの面で有効です。ただし6桁と混在すると検索しづらくなるため、プロジェクト内でどちらかにそろえておくのがおすすめです。

Q. コントラスト比はどう計算するのですか

A. 各色の相対輝度を求め、(明るい方 + 0.05) ÷ (暗い方 + 0.05) で計算します。手計算は現実的ではないので、ブラウザの開発者ツールやチェックツールを使うのが一般的です。開発者ツールでは要素を選択すると、文字色と背景色のコントラスト比が表示されます。

まとめ

HEX・RGB・HSLは同じ色を別の書き方で表したもので、変換しても色は変わりません。使い分けの基準は次のとおりです。

  • HEX は記述用、RGB は計算用、HSL はバリエーション作成用
  • 8桁HEXの末尾2桁は透明度。80 でおよそ50%
  • HSLの明度と、人間が感じる明るさは一致しない
  • 文字が読めるかどうかは、明度ではなくコントラスト比（AA基準は4.5:1）で判断する

以下のカラーコード変換ツールでは、HEX・RGB・HSLを相互に変換しながら、同じ色が形式によってどう表記されるかをその場で確認できます。デザインツールから受け取ったHEXをCSSのHSLに直したいときなどにお使いください。