oklch-skill

OKLCHカラー

OKLCHは、数値が直感どおりの意味を持つ、知覚的に均一な色空間です。CSSで起きる色に関する問題の多く（パレットの崩れ、コントラスト不足、色相のずれ）は、私たちの見え方に合わない色空間を使うことに起因します。OKLCHはモデルを修正し、ツールが正しく機能するようにします。インタラクティブに試すには、oklch.fyiをご覧ください。

クイックリファレンス

カテゴリー	用途	リファレンス
変換	Hex/rgb/hslからoklchへの変換	color-conversion.md
パレット	スケール、複数色相、ダークモードの生成	palette-generation.md
コントラスト	APCA/WCAGのチェック、コントラスト不足の修正	accessibility-contrast.md
色域とTailwind	P3フォールバック、@themeスケール、色域のクランプ	gamut-and-tailwind.md

OKLCHを使う理由

• 知覚的な均一性。 Lの変化量が同じなら、明るさの変化量も同じです。oklch(0.5 ...)は視覚的に中間の明るさです。HSLのlightness: 50%は色相によって大きく異なります。
• 安定した色相。 HSLの青は明るさが変わると紫寄りになります。OKLCHの色相は、明るさの全範囲で一定です。
• 独立した彩度。 彩度は明るさに依存しない、色鮮やかさの絶対的な尺度です。HSLの彩度は明るさに依存します。
• 有限の色域。 すべてのoklch値が、表示可能なsRGB色に対応するわけではありません。特定の色相における彩度の高い値はクリップされるため、色域への配慮が必要です。

OKLCHの構文

oklch(L C H)
oklch(L C H / alpha)

チャンネル	範囲	説明
L（明るさ）	0–1	0 = 黒、1 = 白。知覚的に均一です。
C（彩度）	0–~0.4	色鮮やかさです。0 = グレー。最大値はLとHによって異なります。
H（色相）	0–360	度数で表す色相角です。
alpha	0–1	省略可能な透明度です。スラッシュ構文を使います。

oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)

書式： LとCは小数点以下3桁、Hは最大3桁を使います。末尾のゼロは省略します。-0は0として書式設定します。ブラウザーの対応状況：Baseline 2023、世界全体で96%超のカバー率です。

主な閾値

ルール	値
明暗の境界	L > 0.6 = 明るい背景 → 暗いテキストを使用
明るい背景での明るさの差	背景のL > 0.85の場合、前景のL < 0.45
暗い背景での明るさの差	背景のL < 0.25の場合、前景のL > 0.75
色相のずれの閾値	パレットの各段階での差が> 10°なら、目に見えるずれ
APCAの通常テキスト	合格には|Lc| >= 60、合格+には>= 75
WCAG 2の通常テキスト	4.5:1 AA、7:1 AAA
コントラストの修正	Lだけを調整 — 彩度の影響はわずかです

レビュー結果の書式

色の変更は必ず、BeforeとAfterの列を含むMarkdownテーブルで示してください。変更した色をすべて記載してください。一部だけを記載してはいけません。「Before:」／「After:」の行をテーブルの外に分けて、調査結果を記載しないでください。

Before	After
color: #3b82f6	color: oklch(0.623 0.188 259.815)
色相をまたいで同じ絶対値のC	各色相の最大彩度に対する同じC%
P3色にsRGBフォールバックがない	@media (color-gamut: p3)ラッパー

これにより、フィードバックを確認しやすく、差分も把握しやすくなります。各行は変更ごとに独立しているため、開発者は個別に対応できます。

よくある間違い

問題	修正
新しいコードでHex/rgb/hslの色を使う	oklch()に変換する
色相がずれるHSLパレットランプ	OKLCHの色相を一定にして作り直す
コントラスト不足（APCAで前景と背景のコントラストを確認）	OKLCHのLチャンネルを調整し、CとHは維持する
色域を確認せずに彩度を高くする	sRGBにおけるL/Hの最大彩度にクランプする
異なる色相で同じ絶対値のCを使う	一貫した鮮やかさを保つため、同じC%（最大値に対する割合）を使う
sRGBフォールバックのないP3色	@media (color-gamut: p3)パターンを追加する
手作業で色を選ぶダークモード	Lの対応関係を反転させ、ライトパレットから導出する
Tailwind v4の@themeでHexを使う	OKLCH値に変換する
カンマ構文でalphaを指定する	スラッシュを使う：oklch(L C H / alpha)

参照ファイル

• color-conversion.md — 対応形式、変換例、一括変換のルール、そのままにするもの
• palette-generation.md — スケールの規則、生成アルゴリズム、複数の色相を使ったパレット、ダークモード、HSLを使わない理由
• accessibility-contrast.md — APCAとWCAG 2のしきい値、Lによるコントラストの修正、明度差のガイド、色相のずれの検出
• gamut-and-tailwind.md — sRGBとP3、色域のクランプ、CSSのフォールバックパターン、Tailwind v4の@themeと移行