この記事の要点

CSS の色指定はHEX / RGB / HSL / 名前付き＋現代の oklch / oklab / color-mix HEX: #fff / #ffffff / #ffffff80（アルファ付き）。最も普及 HSL: hsl(210 100% 50%) 色相 / 彩度 / 輝度で直感的に oklch (2023〜): 人間の知覚に近い色空間。明度を揃えやすく ダークモード設計に最適 CSS Custom Properties + color-mix() でテーマ管理が一気にスマートになる

HEX（16 進数）

/* 6 桁 */
color: #ff0000;       /* 赤 */
color: #00ff00;       /* 緑 */
color: #1e293b;       /* 紺 */

/* 3 桁短縮 */
color: #fff;          /* = #ffffff（白） */
color: #000;          /* = #000000（黒） */
color: #f00;          /* = #ff0000 */

/* 8 桁（アルファ付き） */
color: #ff000080;     /* 赤 50% 透明 */
color: #00000033;     /* 黒 20% 透明（影によく使う） */

/* 4 桁短縮アルファ */
color: #f008;         /* = #ff000088 */

RGB / RGBA

/* 旧記法（カンマ区切り、互換性最大） */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);     /* 50% 透明 */

/* 新記法（スペース区切り、CSS Colors 4） */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);
color: rgb(255 0 0 / 50%);       /* % でも可 */

/* 0-255 だけでなく 0%-100% でも書ける */
color: rgb(100% 0% 0%);

HSL / HSLA

色相（Hue 0-360 度）/ 彩度（Saturation %）/ 輝度（Lightness %）で指定。「同じ色相のまま明るくする」が直感的:

color: hsl(0   100% 50%);     /* 赤 */
color: hsl(120 100% 50%);     /* 緑 */
color: hsl(240 100% 50%);     /* 青 */
color: hsl(210 100% 50%);     /* 水色寄りの青 */

/* 明度バリエーション */
color: hsl(210 100% 90%);     /* 淡い青（背景向き） */
color: hsl(210 100% 50%);     /* 標準青 */
color: hsl(210 100% 20%);     /* 濃い青 */

/* アルファ */
color: hsl(210 100% 50% / 0.5);
color: hsla(210, 100%, 50%, 0.5);  /* 旧記法 */

色相 (deg)	色
0 / 360	赤
30	橙
60	黄
120	緑
180	シアン
240	青
300	マゼンタ

名前付き色

color: red;       /* #ff0000 */
color: blue;      /* #0000ff */
color: black;     /* #000000 */
color: white;     /* #ffffff */
color: tomato;    /* #ff6347 */
color: salmon;    /* #fa8072 */
color: dodgerblue;
color: rebeccapurple;  /* #663399 - Rebecca Meyer 追悼カラー */

/* 全部で約 140 種類定義済 */

特殊な値: currentColor / transparent / inherit

/* 親の color プロパティの値を引き継ぐ */
border: 1px solid currentColor;
fill: currentColor;            /* SVG アイコンを文字色に同期 */

/* 完全透明 */
background: transparent;       /* = rgba(0,0,0,0) */

/* 親から継承 */
color: inherit;

/* システム色（OS ベース） */
color: ButtonText;
background: Canvas;            /* システムの背景色 */

CSS Colors Module 4: oklch / oklab

2023 年から主要ブラウザでサポート。人間の目に「同じ明るさに見える」色を作れる新しい色空間:

/* oklch(明度 彩度 色相) */
color: oklch(70% 0.15 250);      /* 中明度の青 */
color: oklch(50% 0.20 30);       /* 中明度の赤橙 */

/* 同じ明度のまま色相だけ変えるとカラーパレット作成が楽 */
.brand-blue   { background: oklch(60% 0.18 250); }
.brand-red    { background: oklch(60% 0.18  30); }
.brand-green  { background: oklch(60% 0.18 140); }
/* → 3 色とも「同じ明るさ」に見える */

/* oklab は a/b 軸（赤緑・青黄）で指定 */
color: oklab(70% 0.1 -0.05);

従来の HSL は同じ lightness でも色相により明るさが違って見える問題がありました。oklch はその問題を解決します。

CSS Custom Properties (CSS Variables)

:root {
  /* ブランドカラー */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-bg: #ffffff;
  --color-text: #1e293b;

  /* セマンティック */
  --color-success: #16a34a;
  --color-warning: #ea580c;
  --color-error: #dc2626;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-text: #f1f5f9;
  }
}

/* 利用 */
body {
  background: var(--color-bg);
  color: var(--color-text);
}
.btn {
  background: var(--color-primary);
}
.btn:hover {
  background: var(--color-primary-dark);
}

/* デフォルト値付き */
.alert {
  background: var(--color-accent, var(--color-primary));
}

color-mix() で動的に色を混ぜる

2023 年から実用化された色の混合関数。ベースカラー + 透明度やホバー時に少し暗くが CSS だけで書ける:

:root { --primary: #2563eb; }

/* ホバー時に黒を 15% 混ぜる */
.btn:hover {
  background: color-mix(in srgb, var(--primary), black 15%);
}

/* 透明化 */
.alert {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* oklch 空間で混ぜると知覚的に滑らか */
.btn {
  background: color-mix(in oklch, var(--primary), white 40%);
}

ダークモード対応

/* OS 設定に追従 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
  }
}

/* ユーザー切替可能（data 属性ベース） */
:root {
  --bg: #ffffff;
  --text: #1e293b;
}
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #f1f5f9;
}

/* JS で切り替え */
/* document.documentElement.dataset.theme = 'dark'; */

/* 新しい light-dark() 関数（Chrome 123+）*/
:root {
  color-scheme: light dark;
}
body {
  background: light-dark(white, black);
  color: light-dark(#1e293b, #f1f5f9);
}

色指定の使い分け早見表

用途	推奨
デザイナーから渡された決め打ち色	HEX #1e293b
透明度を含む色	rgb(0 0 0 / 0.5) or HEX 8 桁
同色のバリエーション展開	HSL（hue 固定で lightness を変える）
知覚的に均一なパレット	oklch
テーマ切替前提	CSS Custom Properties
ホバー / 押下の少し暗い色	color-mix()
SVG アイコンを文字色と揃える	currentColor

FAQ

Q: HEX と RGB、性能差は？
A: ありません。ブラウザ内で同じ表現に正規化されます。

Q: oklch をサポートしないブラウザ対応
A: @supports (color: oklch(0% 0 0)) でフォールバックを書く、または HEX を併記する。

Q: アルファ付きの HEX #80000080 は古いブラウザで動く？
A: Chrome 62+ / Firefox 49+ / Safari 9.1+ から対応。IE は対応せず、レガシー対応なら rgba を使う。