2つの色を指定した比率で混ぜた色を生成するCSS関数です。ベース色から明るい色・暗い色・半透明色をCSSだけで派生でき、SassのdarkenやJavaScriptでの色計算を置き換えられます。CSS変数と組み合わせるとテーマ設計が大幅に簡潔になります。
color-mix(in <color-space>, <color> [<percentage>], <color> [<percentage>]):root {
--primary: #2563eb;
}
.button:hover {
background: color-mix(in oklch, var(--primary), black 15%);
}ベース色を15%暗くしたホバー色をCSSだけで生成
.badge {
background: color-mix(in oklch, var(--primary), white 85%);
color: var(--primary);
}同系色の淡い背景色を生成（Tailwindの50番系のような色）
.overlay {
background: color-mix(in srgb, var(--primary), transparent 60%);
}透明色と混ぜて好きな色の半透明版を作る
色空間はin oklchやin oklabを使うと人間の知覚に近い自然な混色になります（in srgbは濁りやすい）。CSS変数のベース色1つからhover/active/disabled/淡色背景まで派生させる設計が実務での定番です。
in srgbとin oklchでは結果の色がかなり違います。白・黒との混合はoklch推奨です。またパーセンテージ省略時は50%ずつになる、両方に%を指定して合計が100%未満だと正規化される、などの仕様も見落としがちです。
AIはSassのdarken()/lighten()やrgba()の手計算、JavaScriptでの色操作を提案しがちですが、2023年以降はcolor-mix()でCSSのみで完結します。またAIは色空間の指定（in srgb / in oklch）を省略したり深く考えずにsrgbを選びがちですが、混色の自然さが大きく変わる重要な選択です。相対色構文（rgb(from ...)）との混同にも注意。
CSS変数--primaryから、hover用に15%暗い色、背景用に90%淡い色をcolor-mix()で派生させるボタンのCSSを書いて。色空間はoklchで
このSassのdarken()/lighten()をcolor-mix()に置き換えて、Sassなしで動くようにして
ブランドカラー1色から成るカラーパレット（濃淡5段階）をcolor-mix()とCSS変数で設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。