# oklch()

> 人間の知覚に基づくOKLCH色空間で色を指定する関数です。明度（L）・彩度（C）・色相（H）で直感的に色を操作でき、明度を変えても見た目の明るさが揃うためカラーパレット設計に最適です。Display P3などの広色域も表現できます。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/oklch/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklch

## 構文

```css
oklch(<lightness> <chroma> <hue> [/ <alpha>])
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 111+ / Firefox 113+ / Safari 15.4+ / Edge 111+

## コード例

### 例1: 明度0.65・彩度0.2・色相250度（青系）の色を指定

```css
.button {
  background: oklch(0.65 0.2 250);
}
```

### 例2: 相対色構文でベース色から明度違いを派生

```css
:root {
  --primary: oklch(0.65 0.2 250);
}

.button:hover {
  /* 相対色構文: 明度だけ10%下げる */
  background: oklch(from var(--primary) calc(l - 0.1) c h);
}
```

### 例3: 同じ明度・彩度で色相だけ変えた統一感のあるパレット

```css
/* 色相だけ変えれば知覚的な明るさの揃ったパレットに */
.info    { background: oklch(0.7 0.15 250); }
.success { background: oklch(0.7 0.15 150); }
.warning { background: oklch(0.7 0.15 80); }
```

## TIPS

hslは色相によって見た目の明るさがバラつきますが（黄色は明るく青は暗く見える）、oklchは同じL値なら知覚的な明るさが揃います。color-mix(in oklch, ...)との組み合わせも自然な混色になり好相性です。

## よくある間違い

明度Lは0〜1（または0%〜100%）で、hslの明度とはスケールも意味も違います。彩度Cは0〜0.4程度が実用域で、大きすぎるとディスプレイで表現できない色になります（その場合ブラウザが近似色に丸めます）。

## AIがよく間違えるポイント

AIは色指定にhexやhsl()を使いがちで、OKLCHの知覚均一性を活かしたパレット設計は知識が浅い領域です。また相対色構文（oklch(from ...)）の文法をAIはよく間違えます（from句の位置、l c hチャンネル名の書き方）。Tailwind CSS v4がOKLCHを採用するなど、実務でも標準になりつつあります。

## AIへの依頼文例

- ブランドカラーを基準に、知覚的な明るさが揃った5色のカテゴリカラーをoklch()で設計して
- このhsl()ベースのカラーパレットをoklch()に移行して、ダークモード用の明度違いも相対色構文で派生させて

## 関連プロパティ

- [color-mix](https://www.css-dictionary.com/property/color-mix.md)
- [color](https://www.css-dictionary.com/property/color.md)
- [css-custom-properties](https://www.css-dictionary.com/property/css-custom-properties.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)