人間の知覚に基づくOKLCH色空間で色を指定する関数です。明度（L）・彩度（C）・色相（H）で直感的に色を操作でき、明度を変えても見た目の明るさが揃うためカラーパレット設計に最適です。Display P3などの広色域も表現できます。
oklch(<lightness> <chroma> <hue> [/ <alpha>]).button {
background: oklch(0.65 0.2 250);
}明度0.65・彩度0.2・色相250度（青系）の色を指定
:root {
--primary: oklch(0.65 0.2 250);
}
.button:hover {
/* 相対色構文: 明度だけ10%下げる */
background: oklch(from var(--primary) calc(l - 0.1) c h);
}相対色構文でベース色から明度違いを派生
/* 色相だけ変えれば知覚的な明るさの揃ったパレットに */
.info { background: oklch(0.7 0.15 250); }
.success { background: oklch(0.7 0.15 150); }
.warning { background: oklch(0.7 0.15 80); }同じ明度・彩度で色相だけ変えた統一感のあるパレット
hslは色相によって見た目の明るさがバラつきますが（黄色は明るく青は暗く見える）、oklchは同じL値なら知覚的な明るさが揃います。color-mix(in oklch, ...)との組み合わせも自然な混色になり好相性です。
明度Lは0〜1（または0%〜100%）で、hslの明度とはスケールも意味も違います。彩度Cは0〜0.4程度が実用域で、大きすぎるとディスプレイで表現できない色になります（その場合ブラウザが近似色に丸めます）。
AIは色指定にhexやhsl()を使いがちで、OKLCHの知覚均一性を活かしたパレット設計は知識が浅い領域です。また相対色構文（oklch(from ...)）の文法をAIはよく間違えます（from句の位置、l c hチャンネル名の書き方）。Tailwind CSS v4がOKLCHを採用するなど、実務でも標準になりつつあります。
ブランドカラーを基準に、知覚的な明るさが揃った5色のカテゴリカラーをoklch()で設計して
このhsl()ベースのカラーパレットをoklch()に移行して、ダークモード用の明度違いも相対色構文で派生させて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。