Tailwind CSS や TypeScript を日常的に使っていると、色指定もrgba()やhsl()から次のステップに進みたくなる瞬間があります。最近、CSS Color Module Level 4で追加されたoklch()は、まさにその“次の色空間”です。

この記事では、

1. OKLCHの特徴

2. RGBA/OKLCH/OKLABのグラデーション比較

3. ブラウザ対応状況（表付き）

4. Tailwind CSSでOKLCHを使う

5. tailwind用OKLCHカラーパレット生成ツール

をまとめていきます。

OKLCHとは？

OKLCHはOklab色空間の円筒（LCH）表現で、Lightness（明度）・Chroma（彩度）・Hue（色相）の3つで色を表現します。

OKLCHグラデーションの特徴

例えばgreen → redのグラデーションを作るとき、従来のrgba()やhsl()では濁ったり、明度が不自然に変化することがありました。

しかしOKLCHは知覚的に均一なので、

✅ 不自然な濁りが発生しない

✅ 明度が均一に変化する

✅ 色相の変化が滑らか

というメリットがあります。

RGBAとOKLCHのグラデーション比較

See the Pen gradient by MOYORiNO (@MOYORiNO) on CodePen.

「従来と同じ見た目のグラデーション」を作りたい場合 → OKLAB

OKLCH は知覚的に均一で便利ですが、「今までの RGB グラデーションと同じ見た目にしたい」というケースもあります。

その場合は OKLAB を使うと、 RGB に近い色変化を保ちながら、より滑らかに補間できます。

See the Pen Untitled by MOYORiNO (@MOYORiNO) on CodePen.

OKLCHのブラウザ対応状況

主要ブラウザはすべて対応済み（IE を除く）。

ブラウザ	OKLCH サポート
Chrome	対応
Edge	対応
Safari	対応
Firefox	対応
Opera	対応
iOS Safari	対応
Android Chrome	対応
Samsung Internet	対応
IE	非対応

Tailwind CSSでOKLCHを使う

Tailwind CSS 3.3以降では、任意のCSS関数をそのままcolorとして指定可能です。

<div class="bg-[oklch(59.69%_0.156_149.82)]">
  OKLCH Color
</div>

グラデーションも同様：
<div class="bg-[linear-gradient(to_right,oklch(59.69%_0.156_149.82),oklch(59.69%_0.156_29.23))]">
  OKLCH Gradient
</div>

Tailwind CSS用OKLCHカラーパレット生成ツール

以下はブラウザで動く簡易ツールのコードです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OKLCH Tailwind Palette Generator</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 24px;
      max-width: 720px;
      margin: auto;
    }
    .color-box {
      width: 100%;
      height: 40px;
      border-radius: 6px;
      margin-bottom: 8px;
    }
    textarea {
      width: 100%;
      height: 200px;
      margin-top: 16px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>OKLCH Tailwind Palette Generator</h1>

  <label>Hue（色相）</label>
  <input id="hue" type="number" value="120" min="0" max="360" />

  <label>Chroma（彩度）</label>
  <input id="chroma" type="number" value="0.15" step="0.01" />

  <button id="generate">Generate Palette</button>

  <div id="preview"></div>

  <h2>Tailwind Config</h2>
  <textarea id="output"></textarea>

  <script type="module" src="/main.ts"></script>
</body>
</html>

TypeScript

function oklch(l: number, c: number, h: number) {
  return `oklch(${l}% ${c} ${h})`;
}

function generatePalette(hue: number, chroma: number) {
  const steps = [95, 90, 80, 70, 60, 50, 40, 30, 20, 15];

  return steps.reduce((acc, lightness, i) => {
    acc[(i + 1) * 100] = oklch(lightness, chroma, hue);
    return acc;
  }, {} as Record<string, string>);
}

document.getElementById("generate")!.addEventListener("click", () => {
  const hue = Number((document.getElementById("hue") as HTMLInputElement).value);
  const chroma = Number(
    (document.getElementById("chroma") as HTMLInputElement).value
  );

  const palette = generatePalette(hue, chroma);

  // プレビュー描画
  const preview = document.getElementById("preview")!;
  preview.innerHTML = "";
  Object.entries(palette).forEach(([key, value]) => {
    const div = document.createElement("div");
    div.className = "color-box";
    div.style.background = value;
    div.textContent = `${key}: ${value}`;
    preview.appendChild(div);
  });

  // Tailwind config 出力
  const output = document.getElementById("output") as HTMLTextAreaElement;
  output.value = JSON.stringify(palette, null, 2);
});