# color-mix()

> 2つの色を指定した比率で混ぜた色を生成するCSS関数です。ベース色から明るい色・暗い色・半透明色をCSSだけで派生でき、SassのdarkenやJavaScriptでの色計算を置き換えられます。CSS変数と組み合わせるとテーマ設計が大幅に簡潔になります。

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

## 構文

```css
color-mix(in <color-space>, <color> [<percentage>], <color> [<percentage>])
```

## ブラウザ対応

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

## コード例

### 例1: ベース色を15%暗くしたホバー色をCSSだけで生成

```css
:root {
  --primary: #2563eb;
}

.button:hover {
  background: color-mix(in oklch, var(--primary), black 15%);
}
```

### 例2: 同系色の淡い背景色を生成（Tailwindの50番系のような色）

```css
.badge {
  background: color-mix(in oklch, var(--primary), white 85%);
  color: var(--primary);
}
```

### 例3: 透明色と混ぜて好きな色の半透明版を作る

```css
.overlay {
  background: color-mix(in srgb, var(--primary), transparent 60%);
}
```

## TIPS

色空間はin oklchやin oklabを使うと人間の知覚に近い自然な混色になります（in srgbは濁りやすい）。CSS変数のベース色1つからhover/active/disabled/淡色背景まで派生させる設計が実務での定番です。

## よくある間違い

in srgbとin oklchでは結果の色がかなり違います。白・黒との混合はoklch推奨です。またパーセンテージ省略時は50%ずつになる、両方に%を指定して合計が100%未満だと正規化される、などの仕様も見落としがちです。

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

AIはSassのdarken()/lighten()やrgba()の手計算、JavaScriptでの色操作を提案しがちですが、2023年以降はcolor-mix()でCSSのみで完結します。またAIは色空間の指定（in srgb / in oklch）を省略したり深く考えずにsrgbを選びがちですが、混色の自然さが大きく変わる重要な選択です。相対色構文（rgb(from ...)）との混同にも注意。

## AIへの依頼文例

- CSS変数--primaryから、hover用に15%暗い色、背景用に90%淡い色をcolor-mix()で派生させるボタンのCSSを書いて。色空間はoklchで
- このSassのdarken()/lighten()をcolor-mix()に置き換えて、Sassなしで動くようにして
- ブランドカラー1色から成るカラーパレット（濃淡5段階）をcolor-mix()とCSS変数で設計して

## 関連プロパティ

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