CSS color-mix() ジェネレーター

color-mix() は CSS Color Module Level 5 で定義された、指定の色空間で2色を補間する関数です。構文は color-mix(in <colorspace>, <color1> <percent>, <color2> <percent>) です。ティント（明色化）、シェード（暗色化）、ホバー、テーマ派生色などをベース色から導出する際に、Sass のミックスインやカスタムプロパティの計算、ランタイム JavaScript を不要にします。

sRGB での混合は数学的には単純ですが知覚的には正しくありません。彩度の高い2色の中点では彩度が落ち、濁った灰色がかった色になります。OKLCH（および OKLab）は人間の視覚研究から導かれた知覚的に均一な色空間です。赤と青を oklch で混ぜると、明度と彩度を保ったまま中間色を通り、鮮やかな紫が得られます。Tailwind v4、Radix Themes、Material You など主要なデザインシステムが OKLCH ベースのパレットに移行している理由はここにあります。

color-mix() は Chrome 111+、Edge 111+、Safari 16.2+、Firefox 113+ と、それぞれの同世代モバイルブラウザでサポートされています。2025 年時点でグローバルトラフィックの約 95% 以上をカバーします。古いブラウザ向けには静的な fallback 色を先に書き、モダンブラウザに上書きさせる方式が安全です：'background: #7f007f; background: color-mix(in oklch, red, blue);'

極座標系の色空間（hsl, hwb, lch, oklch）で補間する場合、色相環を回る方向に2通り（短弧と長弧）があります。デフォルトは「shorter hue」です。「longer hue」を指定すると長い方を回るため、虹色のような遷移が得られます。例：color-mix(in hsl longer hue, red 50%, blue 50%) は、マゼンタを通る代わりに黄色・緑・シアンを経由します。

両方とも知覚的色空間ですが、OKLCH/OKLab は 2020 年に Björn Ottosson が、古い CIE Lab/LCH が青や紫付近で示していた問題を修正するために設計したものです。2025 年の UI 開発・デザイントークンには OKLCH を推奨します。CIE Lab を使う既存の印刷・画像処理パイプラインと相互運用する必要がある場合のみ Lab を選んでください。差が最も顕著なのは青色周辺で、lab での混合は予想外に紫を経由することがある一方、oklch は期待される色相系列に留まります。

はい。各入力色は独自のアルファを持ち、結果のアルファも色チャネルと一緒に補間されます。currentColor を入力に渡すこともでき、たとえば color-mix(in oklch, currentColor 80%, transparent) は要素の継承色のフェード版を生成します。これは子要素にも影響してしまう opacity ハックの、モダンかつアクセシブルな代替手段です。

はい。本ツールはクライアントサイドのみで動作する単一の React コンポーネントです。入力した色値はコンポーネントの state に保持され、CSS 式は単純な JavaScript の文字列テンプレートで構築されます。プレビューはブラウザ自身のスタイルエンジンに getComputedStyle 経由で解決させています。ネットワーク通信、入力色のアナリティクス、外部カラーライブラリは一切ありません。DevTools の Network タブを開きながら触ることで確認できます。