oklchとトークン設計

2025年11月30日

Tailwind CSS v4.0 から、色指定に OKLCH が標準採用されました。

oklch() 関数記法は、指定された色を Oklch 色空間で表現するものです。これは oklab() と同じ L 軸を持っていますが、極座標系の C （彩度）と H （色相）を使用します。 — oklch() - CSS | MDN

明度（Lightness）: 色の明るさをコントロール。0から1の値、または0%から100%の範囲に設定します。

彩度（Chroma）: 色の強度をコントロール。彩度（Saturation）に似ています。

色相（Hue）: 色相をコントロール。0から360までの度数で設定します。 — コリス: OKLCHカラーについて理解を深めよう

OKLCH は明度・彩度・色相を独立して扱えるため、配色をより論理的に設計できるのが良いところです。
Web UI では「ベースカラー・メインカラー・アクセント」などの配色が有名です。
色相を固定し、明度と彩度のみで変化をつけることで、落ち着いた統一感のある配色が作れるのでは？と感じました。

この記事では、私が試している OKLCHとトークン設計の方法をまとめます。

1. 明度・彩度・色相をトークン化する

まずは OKLCH の構成要素をそのままトークンにします。
ここでは「素材」としての値だけを定義します。

:root {
  /* ---- 色相（Hue）---- */
  --hue-base: 120;

  /* ---- 明度（Lightness）---- */
  --tone-100: 1;
  --tone-90: 0.9;
  --tone-80: 0.8;
  --tone-70: 0.7;
  --tone-60: 0.6;
  --tone-50: 0.5;
  --tone-40: 0.4;
  --tone-30: 0.3;
  --tone-20: 0.2;
  --tone-10: 0.1;
  --tone-0: 0;

  /* ---- 彩度（Chroma）---- */
  --chroma-100: 1;
  --chroma-90: 0.6;
  --chroma-80: 0.36;
  --chroma-70: 0.216;
  --chroma-60: 0.13;
  --chroma-50: 0.078;
  --chroma-40: 0.047;
  --chroma-30: 0.028;
  --chroma-20: 0.017;
  --chroma-10: 0.01;
  --chroma-0: 0.006;
}

2. トークンに「役割」を与える

次に、UI の文脈に沿って「どこで使うか」という役割を与えます。

明度の意味付け

:root {
  /* ---- 背景・面（Surface） ---- */
  --light-bg: var(--tone-100);
  --light-surface: var(--tone-60);
  --light-popover: var(--tone-100);

  /* ---- Primary（ブランド色） ---- */
  --light-primary: var(--tone-60);
  --light-primary-fg: var(--tone-100);
}

彩度の意味付け

:root {
  /* ---- 無彩色〜弱彩度 ---- */
  --chroma-none: var(--chroma-0);
  --chroma-muted: var(--chroma-40);
  --chroma-low: var(--chroma-30);
  --chroma-medium: var(--chroma-70);
  --chroma-strong: var(--chroma-100);

  /* ---- Primary ---- */
  --chroma-primary: var(--chroma-100);
  --chroma-primary-fg: var(--chroma-20);
}

この段階で、はじめて UI の役割と数値トークンが結びつきます。

3. Tailwind のカラーとして OKLCH を組み立てる

最後に、トークンを OKLCH の形式にまとめて Tailwind に流し込みます。

:root {
  /* ---- Primary ---- */
  --primary: oklch(
    var(--light-primary)
    var(--chroma-primary)
    var(--hue-base)
  );

  --primary-foreground: oklch(
    var(--light-primary-fg)
    var(--chroma-primary-fg)
    var(--hue-base)
  );
}

@theme inline {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
}

まとめ：三段階で配色をコントロールする

この手法では、色が

数値トークン（明度・彩度・色相）
意味付けトークン（背景・Primary など）
最終カラー（OKLCH 値）

という三層に分かれます。

この設計により、UI 全体で色の一貫性を保てるうえ、後からの調整も容易になります。
たとえば「Primary をもう少し淡くしたい」場合でも、使用するトークンを変えるだけになります。

終わりに

配色は「カラー配色図鑑」などから直感で選ぶ方法も楽しいですが、
今回紹介したような OKLCHとトークン設計による“理論的アプローチ”も試してみると良いかもしれません。