はじめに

Webサイトのデザインにおいて、色は視覚的な印象を決定づける最も重要な要素の一つです。CSSでは、色を指定するための多様な方法が用意されており、用途や目的に応じて使い分けることで、効率的で保守性の高いスタイルシートを作成できます。

本記事では、CSSにおける色の指定方法を体系的に解説します。基本的なキーワード指定から、RGB・HSL形式、透明度の制御、そして最新のcolor-mix()関数まで、実践的なコード例とともに学んでいきましょう。

この記事で扱う内容は以下のとおりです。

  • 色の基本的な指定方法（キーワード、HEX、RGB、HSL）
  • 透明度の制御（opacity、rgba、hsla）
  • color-mix()関数による色の合成
  • currentColorキーワードの活用
  • カスタムプロパティを使ったカラーシステムの構築

CSSにおける色の指定方法

CSSでは、色を指定するために複数の形式が用意されています。それぞれの特徴を理解し、適切な場面で使い分けることが重要です。

色指定形式の比較

形式 構文例 特徴
キーワード red, blue 直感的で読みやすい
HEX #ff0000, #f00 最も一般的、デザインツールとの親和性が高い
RGB rgb(255 0 0) 光の三原色で直感的
HSL hsl(0 100% 50%) 色相・彩度・明度で調整しやすい

キーワードによる色指定

CSSでは、147種類の名前付きカラーキーワードが定義されています。これらは人間が読みやすく、コードの意図が明確になるという利点があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 基本的なキーワード指定 */
.element {
  color: red;
  background-color: white;
  border-color: black;
}

/* よく使われるキーワード */
.header {
  background-color: navy;      /* 濃い青 */
  color: ivory;                /* 象牙色 */
}

.warning {
  background-color: gold;      /* 金色 */
  color: darkred;              /* 暗い赤 */
}

特に覚えておくべきキーワードとして、transparent（完全な透明）とcurrentColor（現在の文字色）があります。これらは特別な用途で頻繁に使用されます。

HEX（16進数）形式

HEX形式は、16進数を使って色を表現する方法です。デザインツールからの値をそのまま使えるため、実務で最も広く使用されています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 6桁形式（#RRGGBB） */
.element {
  color: #ff0000;              /* 赤 */
  background-color: #00ff00;   /* 緑 */
  border-color: #0000ff;       /* 青 */
}

/* 3桁省略形式（#RGB） */
.element {
  color: #f00;                 /* #ff0000 と同じ */
  background-color: #0f0;      /* #00ff00 と同じ */
  border-color: #00f;          /* #0000ff と同じ */
}

/* 8桁形式（#RRGGBBAA）- 透明度付き */
.overlay {
  background-color: #00000080; /* 50%透明の黒 */
}

/* 4桁省略形式（#RGBA） */
.overlay {
  background-color: #0008;     /* #00000088 と同じ */
}

HEX形式の各桁は以下の値を表します。

  • RR: 赤成分（00〜FF）
  • GG: 緑成分（00〜FF）
  • BB: 青成分（00〜FF）
  • AA: アルファ値（00〜FF）※オプション

RGB形式

RGB形式は、光の三原色（赤・緑・青）の組み合わせで色を表現します。各成分は0〜255の範囲、またはパーセンテージで指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 数値指定（0-255） */
.element {
  color: rgb(255 0 0);              /* 赤 */
  background-color: rgb(0 128 255); /* 空色 */
}

/* パーセンテージ指定 */
.element {
  color: rgb(100% 0% 0%);           /* 赤 */
  background-color: rgb(0% 50% 100%); /* 空色 */
}

/* 透明度付き（スラッシュ区切り） */
.overlay {
  background-color: rgb(0 0 0 / 50%);    /* 50%透明の黒 */
  color: rgb(255 255 255 / 0.8);         /* 80%不透明の白 */
}

現代のCSSでは、カンマ区切りの古い構文（rgb(255, 0, 0)）よりも、スペース区切りの新しい構文（rgb(255 0 0)）が推奨されています。透明度を指定する場合は、スラッシュで区切ります。

HSL形式

HSL形式は、色相（Hue）、彩度（Saturation）、明度（Lightness）の3つの値で色を表現します。人間の色の認識に近い形式であり、色の調整が直感的に行えるという大きな利点があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 基本構文 */
.element {
  /* hsl(色相 彩度 明度) */
  color: hsl(0 100% 50%);        /* 純粋な赤 */
  background-color: hsl(120 100% 50%); /* 純粋な緑 */
  border-color: hsl(240 100% 50%);     /* 純粋な青 */
}

/* 透明度付き */
.overlay {
  background-color: hsl(0 0% 0% / 50%); /* 50%透明の黒 */
}

HSL形式の各値の意味は以下のとおりです。

  • 色相（H）: 0〜360度の角度で色を指定（0/360=赤、120=緑、240=青）
  • 彩度（S）: 0%〜100%で鮮やかさを指定（0%=グレー、100%=最も鮮やか）
  • 明度（L）: 0%〜100%で明るさを指定（0%=黒、50%=純色、100%=白）

HSL形式の色相環を図で表すと以下のようになります。

graph LR
    subgraph "HSL色相環"
        A["0° 赤"] --> B["60° 黄"]
        B --> C["120° 緑"]
        C --> D["180° シアン"]
        D --> E["240° 青"]
        E --> F["300° マゼンタ"]
        F --> A
    end

HSL形式を使った色のバリエーション作成

HSL形式の最大の利点は、ベースカラーから派生色を簡単に作成できることです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

:root {
  /* ベースカラー */
  --primary-hue: 220;
  
  /* 同じ色相で明度を変えたバリエーション */
  --primary-100: hsl(var(--primary-hue) 70% 95%); /* 最も明るい */
  --primary-200: hsl(var(--primary-hue) 70% 85%);
  --primary-300: hsl(var(--primary-hue) 70% 75%);
  --primary-400: hsl(var(--primary-hue) 70% 65%);
  --primary-500: hsl(var(--primary-hue) 70% 50%); /* ベース */
  --primary-600: hsl(var(--primary-hue) 70% 40%);
  --primary-700: hsl(var(--primary-hue) 70% 30%);
  --primary-800: hsl(var(--primary-hue) 70% 20%);
  --primary-900: hsl(var(--primary-hue) 70% 10%); /* 最も暗い */
}

/* 使用例 */
.button-primary {
  background-color: var(--primary-500);
  color: white;
}

.button-primary:hover {
  background-color: var(--primary-600);
}

.button-primary:active {
  background-color: var(--primary-700);
}

透明度の制御

CSSでは、要素や色の透明度を制御するための複数の方法が用意されています。用途に応じて適切な方法を選択することが重要です。

opacityプロパティ

opacityプロパティは、要素全体の不透明度を0〜1の値で制御します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.element {
  opacity: 1;     /* 完全に不透明（デフォルト） */
}

.semi-transparent {
  opacity: 0.5;   /* 50%の不透明度 */
}

.nearly-invisible {
  opacity: 0.1;   /* ほぼ透明 */
}

opacityプロパティの重要な特徴として、要素とそのすべての子要素に影響するという点があります。

1
2
3
4
5
6
7
8
9

/* 親要素にopacityを適用すると、子要素も透明になる */
.card {
  opacity: 0.5;
}

.card .text {
  /* このテキストも50%透明になる */
  /* opacityは継承されないが、親の透明度の影響を受ける */
}

アルファチャンネルを使った透明度指定

特定の色プロパティのみに透明度を適用したい場合は、アルファチャンネルを使用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.card {
  /* 背景色のみ透明にし、テキストは不透明のまま */
  background-color: rgb(0 0 0 / 50%);
  color: rgb(255 255 255 / 100%);
}

/* HSL形式でも同様 */
.overlay {
  background-color: hsl(220 70% 50% / 30%);
}

/* HEX形式での透明度指定 */
.banner {
  background-color: #3366ff80; /* 50%透明の青 */
}

opacityとアルファチャンネルの使い分け

方法 影響範囲 主な用途
opacity 要素全体 フェードイン/アウトアニメーション
アルファチャンネル 特定の色のみ 背景の透過、オーバーレイ 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* フェードアニメーション - opacityを使用 */
.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 背景のみ透過 - アルファチャンネルを使用 */
.modal-backdrop {
  background-color: rgb(0 0 0 / 60%);
  /* テキストやボタンは完全に不透明 */
}

color-mix()関数

color-mix()関数は、CSS Color Level 5で導入された機能で、2つの色を指定した割合で混合できます。すべての主要ブラウザでサポートされており、動的なカラーパレットの作成に非常に便利です。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 基本形式 */
.element {
  /* color-mix(in カラースペース, 色1 割合, 色2 割合) */
  background-color: color-mix(in srgb, blue 50%, white 50%);
}

/* 割合を省略すると50%ずつになる */
.element {
  background-color: color-mix(in srgb, blue, white);
}

/* 片方のみ割合を指定すると、残りは自動計算 */
.element {
  background-color: color-mix(in srgb, blue 30%, white);
  /* blue 30% + white 70% になる */
}

カラースペースの選択

color-mix()では、混合するカラースペースを指定できます。カラースペースによって混合結果が異なります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.comparison {
  /* sRGB空間で混合 */
  --mix-srgb: color-mix(in srgb, red, blue);
  
  /* OKLab空間で混合（知覚的に均一） */
  --mix-oklab: color-mix(in oklab, red, blue);
  
  /* HSL空間で混合（色相を保持） */
  --mix-hsl: color-mix(in hsl, red, blue);
}

実用的には、以下の基準でカラースペースを選択します。

  • srgb: 一般的な用途、従来のブラウザ動作と互換
  • oklab: 知覚的に均一な混合が必要な場合（グラデーション等）
  • hsl/oklch: 色相を維持しながら明度や彩度を調整したい場合

実践的な使用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

:root {
  --primary: #3366ff;
  
  /* 明るいバリエーションを作成 */
  --primary-light: color-mix(in oklab, var(--primary), white 30%);
  --primary-lighter: color-mix(in oklab, var(--primary), white 60%);
  
  /* 暗いバリエーションを作成 */
  --primary-dark: color-mix(in oklab, var(--primary), black 30%);
  --primary-darker: color-mix(in oklab, var(--primary), black 60%);
  
  /* 透明度を追加 */
  --primary-transparent: color-mix(in srgb, var(--primary) 50%, transparent);
}

/* ホバー状態の色を動的に生成 */
.button {
  background-color: var(--primary);
}

.button:hover {
  background-color: color-mix(in oklab, var(--primary), black 15%);
}

.button:active {
  background-color: color-mix(in oklab, var(--primary), black 25%);
}

color-mix()を使ったカラーパレット生成

color-mix()を活用すると、一つのベースカラーから完全なカラーパレットを自動生成できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

:root {
  /* ベースカラーを1つ定義するだけ */
  --brand: #6366f1;
  
  /* 10段階のシェードを自動生成 */
  --brand-50:  color-mix(in oklab, var(--brand), white 95%);
  --brand-100: color-mix(in oklab, var(--brand), white 90%);
  --brand-200: color-mix(in oklab, var(--brand), white 70%);
  --brand-300: color-mix(in oklab, var(--brand), white 50%);
  --brand-400: color-mix(in oklab, var(--brand), white 25%);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand), black 15%);
  --brand-700: color-mix(in oklab, var(--brand), black 30%);
  --brand-800: color-mix(in oklab, var(--brand), black 50%);
  --brand-900: color-mix(in oklab, var(--brand), black 70%);
}

currentColorキーワード

currentColorは、要素のcolorプロパティの現在の値を参照する特別なキーワードです。これを使うことで、一貫性のあるスタイリングを効率的に実現できます。

基本的な使い方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.icon-button {
  color: #3366ff;
  
  /* アイコンの色はテキストと同じになる */
  fill: currentColor;
  
  /* ボーダーもテキストと同じ色になる */
  border: 2px solid currentColor;
}

.icon-button:hover {
  color: #5588ff;
  /* fill と border も自動的に #5588ff になる */
}

実践的な活用例

currentColorは、特にSVGアイコンやボタンのスタイリングで威力を発揮します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/* SVGアイコンとテキストの色を連動させる */
.nav-link {
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor; /* テキストと同じ色 */
}

.nav-link:hover {
  color: #3366ff;
  /* SVGも自動的に #3366ff になる */
}

/* アウトラインボタンの例 */
.button-outline {
  color: var(--primary);
  background-color: transparent;
  border: 2px solid currentColor;
  padding: 0.75rem 1.5rem;
}

.button-outline:hover {
  color: var(--primary-dark);
  background-color: color-mix(in srgb, currentColor, transparent 90%);
}

currentColorの継承

currentColorはcolorプロパティを継承するため、親要素の色設定が子要素に影響します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

.alert {
  color: #dc2626; /* 赤 */
  padding: 1rem;
  border-left: 4px solid currentColor;
  background-color: color-mix(in srgb, currentColor, white 95%);
}

.alert-icon {
  fill: currentColor; /* 親の color を継承 */
}

/* テーマごとに色を変更 */
.alert.success {
  color: #16a34a; /* 緑 */
  /* border と background も自動的に緑系になる */
}

.alert.warning {
  color: #ca8a04; /* 黄 */
}

カスタムプロパティを使ったカラーシステム

一貫性のあるカラーシステムを構築するには、CSSカスタムプロパティ（CSS変数）を活用します。

基本的なカラーシステム設計

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

:root {
  /* プライマリカラー */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  
  /* セマンティックカラー */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* ニュートラルカラー */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

ダークモード対応

カスタムプロパティとメディアクエリを組み合わせることで、ダークモード対応が容易になります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

:root {
  /* ライトモードの色 */
  --bg-primary: var(--color-gray-50);
  --bg-secondary: #ffffff;
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --border-color: var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモードの色 */
    --bg-primary: var(--color-gray-900);
    --bg-secondary: var(--color-gray-800);
    --text-primary: var(--color-gray-50);
    --text-secondary: var(--color-gray-400);
    --border-color: var(--color-gray-700);
  }
}

/* 使用例 */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.text-muted {
  color: var(--text-secondary);
}

手動切り替え対応

ユーザーが手動でテーマを切り替えられるようにする場合は、data属性やクラスを使用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* data属性によるテーマ切り替え */
:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
}

[data-theme="dark"] {
  --bg-primary: #111827;
  --text-primary: #f9fafb;
}

/* システム設定に従う場合 */
[data-theme="system"] {
  @media (prefers-color-scheme: dark) {
    --bg-primary: #111827;
    --text-primary: #f9fafb;
  }
}

ブラウザ対応状況

本記事で解説した機能のブラウザ対応状況を以下にまとめます。

機能 Chrome Firefox Safari Edge
RGB/HSL基本形式 1+ 1+ 3.1+ 12+
スペース区切り構文 65+ 52+ 12.1+ 79+
HEX 8桁形式 62+ 49+ 10+ 79+
color-mix() 111+ 113+ 16.2+ 111+
currentColor 1+ 1.5+ 4+ 12+
カスタムプロパティ 49+ 31+ 9.1+ 15+

color-mix()は比較的新しい機能ですが、2024年時点でモダンブラウザすべてでサポートされています。

まとめ

CSSにおける色の指定方法について、基本から応用まで解説しました。

  • キーワード指定は読みやすさを重視する場合に有効です
  • HEX形式はデザインツールとの連携に適しています
  • RGB形式は光の三原色に基づいた直感的な指定が可能です
  • HSL形式は色の調整やバリエーション作成に最適です
  • 透明度はopacityとアルファチャンネルを使い分けます
  • **color-mix()**はカラーパレットの動的生成に便利です
  • currentColorはスタイルの一貫性を保つために活用できます
  • カスタムプロパティを使うことで保守性の高いカラーシステムを構築できます

これらの技術を組み合わせることで、一貫性があり、保守しやすく、アクセシブルなカラーシステムを構築できます。

参考リンク