この記事の要点

CSS の色プロパティ: color（文字色）/ background-color（背景）/ border-color（枠線） 色値の書き方: 名前付き色（147 個） / HEX (#fff/#ffffff/#ffff/#ffffffff) / rgb()/rgba() / hsl()/hsla() / oklch()/oklab() currentColor: 親の color と同じ値を参照、SVG アイコンの色を CSS から制御するのに最適 color-mix(in srgb, red 50%, blue): 2 色を混ぜる（CSS Color Module Level 5） CSS Custom Property (--color-primary) で集中管理 → テーマ切替・ダークモード対応

CSS で色を指定するプロパティ

プロパティ	対象	例
color	文字色	color: #333;
background-color	背景色	background-color: #fafafa;
border-color	枠線色（border ショートハンド内でも可）	border: 1px solid red;
outline-color	アウトライン色（フォーカス枠等）	outline-color: blue;
text-decoration-color	下線・取り消し線	text-decoration-color: red;
caret-color	入力カーソル色	caret-color: orange;
accent-color	チェックボックス・ラジオ等のフォーム部品の差し色	accent-color: purple;
box-shadow / filter: drop-shadow()	影	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
fill / stroke	SVG 塗り・線	fill: currentColor;

色値の書き方（全形式）

/* 1. 名前付き色（CSS Named Colors 147 個） */
.a { color: red; }
.b { color: cornflowerblue; }
.c { color: rebeccapurple; }   /* CSS4 で追加 */

/* 2. HEX */
.d  { color: #f00; }           /* 3 桁: #rgb (#ff0000 と同義) */
.e  { color: #ff0000; }        /* 6 桁: #rrggbb */
.f  { color: #f008; }          /* 4 桁: #rgba (#ff000088 と同義) */
.g  { color: #ff000080; }      /* 8 桁: #rrggbbaa（alpha 含む）*/

/* 3. rgb() / rgba() */
.h { color: rgb(255, 0, 0); }
.i { color: rgba(255, 0, 0, 0.5); }
.j { color: rgb(255 0 0); }            /* Color 4: スペース区切り */
.k { color: rgb(255 0 0 / 0.5); }
.l { color: rgb(100% 0% 0%); }         /* % でも可 */

/* 4. hsl() / hsla() */
.m { color: hsl(0, 100%, 50%); }
.n { color: hsl(0 100% 50% / 0.5); }

/* 5. oklch() / oklab() - 広色域・知覚均等 */
.o { color: oklch(70% 0.15 30); }      /* L=70%, C=0.15, H=30 */
.p { color: oklab(70% 0.1 0.1); }

/* 6. hwb() - Hue, Whiteness, Blackness */
.q { color: hwb(0 0% 0%); }            /* = 純赤 */

/* 7. transparent / currentColor */
.r { background: transparent; }
.s { fill: currentColor; }             /* color プロパティと同値 */

HEX 表記の桁数と意味

桁数	形式	例	展開後
3 桁	#rgb	#f0a	#ff00aa
4 桁	#rgba	#f0a8	#ff00aa88
6 桁	#rrggbb	#ff5733	—
8 桁	#rrggbbaa	#ff573380	alpha 0x80 ≈ 0.5

3 桁・4 桁は同じ文字を 2 回繰り返すと展開されます。#f0a = #ff00aa。微妙な階調（#e7 等）は表現できません。

CSS Named Colors（一部）

CSS 仕様で名前が付いた色は 147 色（CSS3 時点）。代表的なものを示します:

カテゴリ	名前の例
原色	red, green, blue, yellow, cyan, magenta, black, white
グレー	gray, lightgray, darkgray, dimgray, slategray, silver
暖色	orange, coral, tomato, salmon, gold, khaki, brown, sienna, maroon
寒色	navy, teal, turquoise, aqua, skyblue, steelblue, mediumblue
緑系	limegreen, forestgreen, seagreen, olivedrab, mediumseagreen
紫系	purple, indigo, violet, orchid, plum, rebeccapurple
透明・特殊	transparent, currentColor

currentColor の使い所

currentColor は「現在の color プロパティの値」を参照する特別なキーワード。SVG アイコンの色を文字色と一致させたいときに最強です:

/* リンクの文字色とアイコン色を統一 */
.link {
  color: #3b82f6;   /* これだけ書けば */
}
.link svg {
  fill: currentColor;   /* 自動で #3b82f6 になる */
  stroke: currentColor;
}

/* ボーダーも文字色と同期 */
.tag {
  color: red;
  border: 1px solid currentColor;   /* 赤い枠 */
}

/* ホバーで一括変更 */
.link:hover {
  color: #1d4ed8;
  /* SVG も border もここに追従する */
}

CSS Custom Property + 色管理

:root {
  /* デザイントークン */
  --color-bg:      #ffffff;
  --color-text:    #111827;
  --color-primary: #3b82f6;
  --color-danger:  #ef4444;
  --color-success: #10b981;
}

[data-theme="dark"] {
  --color-bg:   #0f172a;
  --color-text: #f1f5f9;
}

body {
  background: var(--color-bg);
  color:      var(--color-text);
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.alert-danger {
  background: var(--color-danger);
  color: #fff;
}

color-mix() で動的に色を作る（CSS Color 5）

:root {
  --brand: #3b82f6;
}

/* brand と白を 50:50 で混ぜる → 薄いブランド色 */
.bg-tint {
  background: color-mix(in srgb, var(--brand) 20%, white);
}

/* brand と黒を混ぜる → 暗いブランド色 */
.bg-shade {
  background: color-mix(in srgb, var(--brand) 80%, black);
}

/* alpha も color-mix で */
.bg-overlay {
  background: color-mix(in srgb, black 50%, transparent);
}

/* oklch 空間で混ぜると、知覚的に滑らかなグラデーション */
.smooth {
  background: color-mix(in oklch, red, blue);
}

広色域カラー: oklch() / oklab() / display-p3

2024 年以降、ディスプレイの色域拡大に合わせてsRGB を超える色が CSS で扱えるようになりました:

/* P3 ディスプレイで sRGB より鮮やかな赤 */
.vivid-red {
  color: color(display-p3 1 0 0);
}

/* oklch: 知覚均等な明度（hsl の弱点を克服） */
.btn { background: oklch(60% 0.15 250); }      /* 鮮やかな青 */
.btn:hover { background: oklch(55% 0.15 250); }  /* 知覚的に均等に暗くなる */

/* @media で対応端末だけ広色域 */
@media (color-gamut: p3) {
  :root { --brand: color(display-p3 0 0.5 1); }
}

アクセシビリティ: コントラスト比

• WCAG 2.1 AA 基準: 通常文字 4.5:1 以上、大きな文字 3:1 以上
• Chrome DevTools の色ピッカーで「コントラスト比」がリアルタイム表示される
• oklch() の L 値で背景と文字の明度差を 40% 以上にすると安全
• 純色 (#ff0000) の組合せは派手すぎて NG → 落ち着いた色を選ぶ
• 赤緑色覚異常対応: 赤と緑だけで情報を伝えない（形 / アイコン / テキスト併用）

ダークモード対応

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

/* 手動切替: data-theme 属性 */
[data-theme="dark"] {
  --color-bg:   #0f172a;
  --color-text: #f1f5f9;
}

よくある質問

Q: HEX と RGB、どちらを使うべき？
A: 不透明色は HEX（短い）、透明色は rgba() か #rrggbbaa。最新は hsl() や oklch() でデザイントークンを統一する流れ。

Q: transparent と rgba(0,0,0,0) の違い？
A: 描画結果は同じ。ただしアニメーション・グラデーションで挙動が異なるブラウザがあるので、rgba(色値, 0) 推奨。例: background: linear-gradient(red, rgba(255,0,0,0))。

Q: 文字色を「親要素より少し暗く」したい
A: CSS Color 5 の color: color-mix(in srgb, currentColor 80%, black) または filter: brightness(0.8)。子要素全体に影響する点に注意。