CreaTools LogoCreaTools
Tech Notes
Color Palette

CSS変数でカラーパレットを管理する｜2層構造にする理由

2025-10-18

:::note ※CSS変数で色を管理したい人向けの「実装ガイド」記事です :::

結論（私の判断基準）

  • 命名：意味ベース（primary, secondary）。色名ベース（blue, red）は使わない
  • 構造：プリミティブ + セマンティックの2層構造
  • ダークモード：同じ変数名で値だけ切り替える

私がこの構造にしているのは、「ブランドカラーを変えたい」と言われたときに1箇所直せば済むから。

🚀 CSS Variables形式で出力 → Color Palette Generator

なぜCSS変数か

/* ❌ 色が散らばっている */
.header { background: #4A90D9; }
.btn { background: #4A90D9; }
.link { color: #4A90D9; }

/* ✅ 一箇所で管理 */
:root { --color-primary: #4A90D9; }
.header { background: var(--color-primary); }
.btn { background: var(--color-primary); }
.link { color: var(--color-primary); }

ブランドカラーを変更するとき、1箇所直せば全部変わる。

検索置換でも同じことはできる。でもCSS変数の方が確実。

なぜ意味ベースの命名か

:root {
  /* ✅ 意味ベース（推奨） */
  --color-primary: #4A90D9;
  --color-secondary: #6B5CD9;

  /* ❌ 色名ベース（非推奨） */
  --color-blue: #4A90D9;
}

「青をオレンジに変えたい」と言われたとき、--color-blue という名前のままオレンジを入れることになる。

名前と実態が合わなくなる。だから意味ベースで命名する。

なぜ2層構造か

:root {
  /* プリミティブ（生の色） */
  --blue-500: #4A90D9;
  --blue-600: #3B7AC4;
  --gray-100: #F3F4F6;

  /* セマンティック（意味のある名前） */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-bg-page: var(--gray-100);
}

「プライマリカラーを別の青に変えたい」と言われたとき、--color-primary の参照先を変えるだけ。

コンポーネント側のCSSは一切触らない。これが2層構造の利点。

ダークモード対応

:root {
  --color-bg: #FFFFFF;
  --color-text: #1F2937;
  --color-primary: #4A90D9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #E0E0E0;
    --color-primary: #6BA8E5;
  }
}

同じ変数名で値だけ切り替える。コンポーネント側のCSSは変更不要。

私は prefers-color-scheme を使っている。ユーザーの設定に従う。

クラスベースの切り替え

:root {
  --color-bg: #FFFFFF;
  --color-text: #1F2937;
}

.dark {
  --color-bg: #121212;
  --color-text: #E0E0E0;
}

<html class="dark">

JavaScript でクラスを付け替える。ユーザーが手動で切り替えたい場合はこちら。

私の設定（コピペ用）

:root {
  /* ベース */
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  
  /* テキスト */
  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  
  /* アクセント */
  --color-primary: #4A90D9;
  --color-primary-hover: #3B7AC4;
}

私はこれをベースにしている。色数は最小限。

迷ったときの判断

迷い私の判断
命名をどうするか意味ベース（primary, secondary）
2層構造にするかする。後で変更が楽
ダークモードの切り替えprefers-color-scheme を基本にする

この記事で解決しない場合

CSS変数で管理する理由は「後で変えやすいから」。それだけ。