NO.182

DATE2025. 11. 30

oklchとトークン設計

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）---- */
  --lightness-100: 1;
  --lightness-90: 0.9;
  --lightness-80: 0.8;
  --lightness-70: 0.7;
  --lightness-60: 0.6;
  --lightness-50: 0.5;
  --lightness-40: 0.4;
  --lightness-30: 0.3;
  --lightness-20: 0.2;
  --lightness-10: 0.1;
  --lightness-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(--lightness-100);
  --light-surface: var(--lightness-60);
  --light-popover: var(--lightness-100);
 
  /* ---- Primary（ブランド色） ---- */
  --light-primary: var(--lightness-60);
  --light-primary-fg: var(--lightness-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とトークン設計による“理論的アプローチ”も試してみると良いかもしれません。

フロントエンド

読者になる

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーションこぶりー運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

読み込み中...

oklchとトークン設計

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とトークン設計の方法をまとめます。

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

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

:root {
  /* ---- 色相（Hue）---- */
  --hue-base: 120;
 
  /* ---- 明度（Lightness）---- */
  --lightness-100: 1;
  --lightness-90: 0.9;
  --lightness-80: 0.8;
  --lightness-70: 0.7;
  --lightness-60: 0.6;
  --lightness-50: 0.5;
  --lightness-40: 0.4;
  --lightness-30: 0.3;
  --lightness-20: 0.2;
  --lightness-10: 0.1;
  --lightness-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(--lightness-100);
  --light-surface: var(--lightness-60);
  --light-popover: var(--lightness-100);
 
  /* ---- Primary（ブランド色） ---- */
  --light-primary: var(--lightness-60);
  --light-primary-fg: var(--lightness-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 値）

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

終わりに

フロントエンド

読者になる

silverbirder

Webソフトウェアエンジニア
個人ブログキュレーションこぶりー運営

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

読み込み中...

oklchとトークン設計

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

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

明度の意味付け

彩度の意味付け

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

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

終わりに

silverbirder

ブログを応援する

関連する記事

oklchとトークン設計

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

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

明度の意味付け

彩度の意味付け

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

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

終わりに

silverbirder

ブログを応援する

関連する記事