CSS color-mix()ジェネレーターとは
CSSのcolor-mix()関数は、指定された色空間で2つの色を混合します。Sassのようなプリプロセッサなしで、CSS内で直接色のバリエーションを作成できます。oklabを使用すると、srgbよりも知覚的に均一な結果が得られます。一般的なユースケースには、ホバー状態、ボーダー、微妙な背景、ミュートテキストがあり、すべて単一のベースカラーから派生します。
クイックアンサー
color-mix()を使用して、oklabやsrgbなどの指定された色空間で2つの色をブレンドします。プリプロセッサなしで単一のベースカラーから色合い、シェード、ホバーバリアントを作成するのに便利です。
Last updated: 2026-05-25
制限事項
- color-mix()にはChrome 111以上、Edge 111以上、Safari 16.2以上、Firefox 113以上が必要です。古いブラウザはサポートしておらず、宣言を無視します。
- oklab色空間はsrgbよりも知覚的に均一な結果を生成します。srgbでの混合は濁った中間色を作成する可能性があります。
- 一部の古いブラウザバージョンでは、プロパティサイクル検出のため、color-mix()がcolor-mix()出力を含むCSSカスタムプロパティを参照できない場合があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ベースカラーを16進数値で入力します。
- 白、黒、または透明を使用した計算済みのcolor-mix()バリアントを確認します。
- 各color-mix()宣言をCSSにコピーします。
- 生成されたカスタムプロパティを使用して、一貫したカラーテーマを実現します。
主な用途
- 色を白や黒と混合してホバー状態を作成する。
- ブランドカラーから微妙な背景色を生成する。
- 背景よりわずかに暗いボーダーカラーを構築する。