CSS colorプロパティ｜HEX・rgb()・hsl()・oklch()とCSS変数

▶

この記事の要点

color は要素のテキスト色（前景色）を指定する CSS プロパティ
値はキーワード（red）、16進（#ff0000）、rgb() / hsl() / 新しい oklch() など多数
currentColor で「現在の color 値」をボーダーや SVG に流用できる
本文と背景のコントラスト比 4.5:1 以上を確保するのがアクセシビリティの基本
配色は CSS 変数 (--main 等) にまとめ、ダークモードはメディアクエリで上書きすると保守性が高い

color プロパティとは

color は要素のテキスト色（前景色）を指定する CSS の基本プロパティです。::before / ::after や text-decoration、border の currentColor 経由などにも影響します。継承されるので、親に指定すれば子も追従します。

基本構文

selector {
  color: red;                /* キーワード */
  color: #1976d2;            /* 16進 */
  color: rgb(25 118 210);    /* RGB（モダン記法） */
  color: rgb(25 118 210 / .8);  /* 透明度付き */
  color: hsl(210 80% 46%);   /* HSL */
  color: oklch(60% 0.15 250);/* OKLCH（知覚均等） */
  color: currentColor;       /* 現在の color 値 */
  color: inherit;            /* 親の値を継承 */
}

値の書き方

形式	例	備考
キーワード	`red` / `black` / `rebeccapurple`	140 種以上の名前付き色
16進 6 桁	`#1976d2`	最も普及。`#rgb` 短縮形も可
16進 8 桁	`#1976d2cc`	末尾 2 桁がアルファ
`rgb()`	`rgb(25 118 210 / .5)`	モダン記法はカンマ不要
`hsl()`	`hsl(210 80% 46%)`	色相・彩度・明度で直感的
`oklch()` / `oklab()`	`oklch(60% .15 250)`	知覚的に均等な新色空間
`currentColor`	border-color に流用	テキスト色と連動させたい時
`transparent`	完全透明	`rgb(0 0 0 / 0)` と等価

currentColor の活用

SVG アイコンのストロークやボーダーをテキスト色と連動させたいときに便利です。

.btn {
  color: #1976d2;
  border: 1px solid currentColor;  /* テキスト色と同じ青 */
}

.btn svg { fill: currentColor; }   /* SVG も連動 */

CSS 変数でテーマ管理

:root {
  --color-text: #1a1a1a;
  --color-link: #1976d2;
  --color-muted: #666;
}

body { color: var(--color-text); }
a    { color: var(--color-link); }

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e6e6e6;
    --color-link: #82b1ff;
    --color-muted: #aaa;
  }
}

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

WCAG 2.1 では本文テキストは背景に対してコントラスト比 4.5:1 以上（大きい文字は 3:1 以上）が求められます。Chrome DevTools の「Lighthouse」や「Inspect → Styles → color picker」で簡単に確認できます。

背景	NG（薄い文字）	OK
白 (#fff)	#bbb（2:1 程度）	#555 以下（7:1）
黒 (#000)	#666	#bbb 以上
水色 (#e3f2fd)	#90caf9	#0d47a1

color の継承を活かす

color は継承されるので、body に基本色を 1 回書けば下位の要素にすべて伝わります。例外的に色を変える要素だけ color を上書きする設計が保守しやすいです。

よくある落とし穴

症状	原因 / 対処
リンクの色が変わらない	ブラウザ既定スタイルが優先。`a { color: ... }` を明示
placeholder の色が効かない	`::placeholder` 疑似要素で指定
SVG アイコンの色が変わらない	`fill: currentColor` + 親の `color` で制御
ダークモードで読みにくい	`prefers-color-scheme: dark` でテーマ変数を切替
iOS Safari でリンクが青くなる	`-webkit-tap-highlight-color` や `color` を明示

透明度（アルファ）の指定

色の透明度（アルファチャンネル）は次の 3 通りで指定できます。どれも内部的には同じ値ですが、見やすさで選べます。

/* 50% 透明な青の 3 通りの書き方 */
color: rgb(25 118 210 / 50%);
color: rgb(25 118 210 / .5);
color: #1976d280;   /* 末尾 80 が 16進アルファ(=128/255≒50%) */

opacity との違い

テキストを薄く見せたいとき、color: rgba(...) と opacity は別物です。opacity は要素全体（子要素含む）を半透明にしますが、color の透明度指定はテキストだけを薄くします。背景色や子の SVG はそのまま残ります。

/* テキストだけ薄く */
.label { color: rgb(0 0 0 / .6); }

/* 子要素も含めて全体を薄く */
.disabled { opacity: .5; }

新しい色空間: oklch / oklab

CSS Color Module Level 4 で登場した oklch() / oklab() は知覚的に均等な色空間です。RGB / HSL より「明度を少し下げる」「彩度を 5% 上げる」などの直感的な調整が安定し、デザインシステムでの色管理に向きます。

/* 同じ Lightness で色相だけ変える */
--blue:   oklch(60% 0.15 250);
--green:  oklch(60% 0.15 145);
--red:    oklch(60% 0.15 30);
/* 3 色とも明度が揃って見えるため、コントラストが安定 */

ページ一覧

その他