Webで使える色

CSSで使える色の指定方法を総合的に解説する。CSS Color Module Level 4準拠。

目次

1. 指定名カラーキーワード
2. 16進数表記（HEX）
3. rgb() / rgba()
4. hsl() / hsla()
5. hwb()
6. モダンカラー関数（lab, lch, oklab, oklch）
7. color()関数
8. color-mix()
9. 相対カラー構文（Relative Color Syntax）
10. 特殊なキーワード
11. 表記方法の比較
12. 実践的な使い方

1. 指定名カラーキーワード

CSS Color Level 4では、148個の指定名カラーが定義されている。nameとcolorの対応関係はW3C仕様で定められている。

基本カラーキーワード（8個）：

拡張カラーキーワード（CSS Color Level 3で定義）：

CSS Color Level 4では、grayとgreyが同義（spelling variant）。grey表記のカラーも全て用意されている。

2. 16進数表記（HEX）

Red・Green・Blueの各チャンネルを2桁の16進数で指定する。Web開発で最も一般的な表記。

3桁/4桁表記は、各文字を2回繰り返した値と等価。つまり#f0fは#ff00ffと同値。

/* 不透明な青 */
color: #0000ff;
color: #00f;       /* 同値 */

/* 50%透過の赤 */
color: #ff000080;
color: #f008;       /* 同値 */

3. rgb() / rgba()

Red・Green・Blueの各チャンネルを0〜255の数値で指定する。アルファチャンネルはスラッシュ/で区切る。

/* 色空间指定なし（sRGB、推奨） */
color: rgb(255 128 0);             /* オレンジ */
color: rgb(255 128 0 / 50%);      /* 50%透過 */

/* パーセンテージ表記 */
color: rgb(100% 50% 0%);          /* オレンジ */

/* カンマ区切り（レガシー、非推奨） */
color: rgb(255, 128, 0);          /* まだ有効だが非推奨 */

4. hsl() / hsla()

Hue（色相）・Saturation（彩度）・Lightness（明度）で色を指定する。直感的に色を調整しやすい。

color: hsl(210 80% 50%);           /* 青 */
color: hsl(210 80% 50% / 0.5);   /* 50%透過の青 */

/* 角度指定 */
color: hsl(210deg 80% 50%);

/* パーセンテージで彩度・明度 */
color: hsl(210 80% 50%);

Hueは0〜360度の回転環。赤(0)→黄(60)→緑(120)→シアン(180)→青(240)→マゼンタ(300)→赤(360)。

5. hwb()

Hue（色相）・Whiteness（白の量）・Blackness（黒の量）で色を指定する。HSLより直感的だが、実際にはほとんど使われていない。

color: hwb(210 10% 20%);          /* 青に白と黒を混ぜた色 */
color: hwb(210 10% 20% / 0.5);  /* 透過 */

6. モダンカラー関数

CSS Color Level 4で導入された、知覚的に均一な色空間ベースの関数。HSLの問題を解決し、より正確な色操作が可能。

oklch()（推奨）

Oklab色空間の円柱座標版。新規プロジェクトでのデフォルトとして推奨されている。明度・彩度・色相の各チャンネルが知覚的に均一に振れる。

color: oklch(0.7 0.15 250);          /* 青系 */
color: oklch(0.7 0.15 250 / 0.8);  /* 透過 */

oklab()

Oklab色空間の直交座標版。oklchと同一の色を表現するが、軸がa（赤緑軸）とb（青黄軸）。

color: oklab(0.7 -0.05 -0.13);

lab() / lch()

CIELAB色空間ベース。印刷・画像処理の世界で長く使われてきた。oklab/oklchがより均一だが、Photoshop等から値をコピーする場合に有用。

color: lab(50% 20 -20);           /* CIELAB */
color: lch(50% 60 300deg);        /* CIELABの円柱座標 */

各関数の使い分け

7. color()関数

任意の色空間で色を指定する汎用関数。広色域ディスプレイ（Display P3など）の色を直接指定できる。

/* sRGB（デフォルトと同等） */
color: color(srgb 1 0.5 0);

/* Display P3（広色域） */
color: color(display-p3 1 0.5 0);

/* 透過 */
color: color(display-p3 1 0.5 0 / 0.8);

対応する色空間：

• srgb — 標準RGB（最も一般的）
• srgb-linear — リニア補正されたsRGB
• display-p3 — Appleディスプレイ向け広色域
• a98-rgb — Adobe RGB (1998)
• prophoto-rgb — ProPhoto RGB
• rec2020 — UHDTV向け
• xyz, xyz-d50, xyz-d65 — CIE XYZ色空間

8. color-mix()

2つの色を指定した色空間で混合する。Sass等のビルド時処理に代わり、ブラウザ上でパレットを動的に生成できる。

/* 50%ずつ混合 */
color-mix(in oklch, blue, red);

/* 比率を指定 */
color-mix(in oklch, blue 30%, red 70%);

/* 異なる色空間でも混合可能 */
color-mix(in hsl, hsl(0 50% 50%), #7acedd);

混合に使える色空間：srgb、oklch、oklab、hsl、lch、lab、hwb、xyzなど。

9. 相対カラー構文（Relative Color Syntax）

既存の色から派生色を算出する。fromキーワードで基準色を指定し、各チャンネルを加工する。

/* 既存の色をベースに、明度だけ変更 */
--base: oklch(0.6 0.2 250);

.lighter { color: oklch(from var(--base) calc(l + 0.2) c h); }
.darker  { color: oklch(from var(--base) calc(l - 0.2) c h); }
.desaturated { color: oklch(from var(--base) l calc(c * 0.5) h); }

from以降の3つの引数は、基準色の各チャンネルに対応する。変更しないチャンネルは変数名そのままを書く。

10. 特殊なキーワード

transparent

完全に透明な色。rgb(0 0 0 / 0%)のショートカット。CSS Color Level 3で正式な色値になった。

background: transparent;

currentColor

要素のcolorプロパティの現在値を参照する。color以外のプロパティ（border-color、backgroundなど）で使える。

a {
  color: blue;
  border: 1px solid currentColor; /* ボーダーも青になる */
}

system colors

ユーザーのOS・ブラウザ設定に連動する色。forced-colorsモード（ハイコントラストモード）での利用を想定。

• Canvas — 背景色
• CanvasText — テキスト色
• LinkText — リンク色
• ButtonFace — ボタンの背景色
• ButtonText — ボタンのテキスト色
• Highlight — 選択中の背景色
• HighlightText — 選択中のテキスト色

@media (forced-colors: active) {
  .card {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }
}

11. 表記方法の比較

12. 実践的な使い方

段階的な拡張（Progressive Enhancement）

モダンカラー関数は、古いブラウザで無視される。レガシーフォールバックを先に書く。

.button {
  background: #4f46e5;                         /* フォールバック */
  background: oklch(0.63 0.19 260deg);         /* モダンオーバーライド */
}

CSSカスタムプロパティでパレットを管理

:root {
  --primary: oklch(0.6 0.2 260);
  --primary-light: oklch(from var(--primary) calc(l + 0.15) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 0.15) c h);
  --primary-bg: oklch(from var(--primary) 0.95 0.02 h);
}

ダークモード対応

:root {
  --text: oklch(0.2 0.01 260);
  --bg: oklch(0.98 0.005 260);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: oklch(0.9 0.01 260);
    --bg: oklch(0.15 0.01 260);
  }
}

カラーコントラストの確認

WCAG 2.1では、通常テキストは4.5:1以上、大きなテキストは3:1以上のコントラスト比が推奨されている。oklchのL値は知覚的明度に近いので、コントラストの概算に使える。

参考：CSS Color Module Level 4（W3C Candidate Recommendation）