CSS color-mix() ツール
2色と混合比率を選ぶだけで、CSS
color-mix() 関数の出力色をリアルタイムでプレビューできるツールです。カラーミキサー・中間色の確認から、そのままコードに貼れる color-mix() 記述の生成まで対応しています。
色 A
混色結果
色 B
色空間
color-mix() コード
HEX
—
RGB
—
HSL
—
CSS color-mix() ツールとは？
CSSの
color-mix() 関数は、2色を任意の比率で混ぜた中間色を計算するモダンCSSの機能です。このツールはカラーピッカーで2色を選び、スライダーで混合比率を調整するだけで、混色結果をリアルタイムにプレビューできます。sRGB・OKLCH・HSL・OKLabなど複数の色空間に対応し、実装にそのまま使える color-mix() 記述と、HEX・RGB・HSL形式のカラーコードをワンクリックでコピーできます。カラーミキサーとして中間色を確認したいデザイナーから、color-mix() をCSSに組み込みたい開発者まで幅広く使えます。
各機能の説明
-
カラーピッカー × 2色Aと色BをそれぞれカラーピッカーまたはHEX直接入力で指定できます。クリックまたはタップで色選択ダイアログが開きます。
-
混合比率スライダースライダーを動かすと色Aと色Bの比率がリアルタイムで変化し、中間色が即座にプレビューに反映されます。
-
色空間の切り替えsRGB・OKLCH・HSL・OKLabの4種類から混色に使う色空間を選べます。色空間によって中間色の見え方が変わります。
-
color-mix() コード出力設定した内容をもとに、CSSにそのまま貼れる
color-mix()記述を自動生成します。ワンクリックでコピー可能です。 -
HEX / RGB / HSL 出力混色結果の色をHEX・RGB・HSL形式でそれぞれ表示し、個別にコピーできます。
色空間について
-
sRGB最も一般的な色空間。Webで長く使われてきた標準であり、ブラウザサポートも安定しています。単純なRGB混合を行います。
-
OKLCH人間の知覚に合わせて設計された色空間で、明度が均一に変化するため、混色した際に「濁り」が起きにくいのが特徴です。
-
OKLabOKLCHと同じく知覚均等色空間で、特に彩度の変化を自然に保ちながら混色できます。グラデーションの補間にも向いています。
-
HSL色相・彩度・明度で色を定義する色空間。色相環に沿って混色するため、補色同士を混ぜると彩度が下がりやすい傾向があります。
こんなときに使う
-
ブランドカラー同士を混ぜたいメインカラーとサブカラーの中間色をボーダーやホバー色として使いたいときに、比率を変えながら確認できます。
-
CSS変数でテーマカラーを管理したい
color-mix()を使えば静的なHEX値を減らし、ベースカラーの変数だけでバリエーションを派生させられます。 -
OKLCHで濁らないグラデーションを作りたいsRGBで混ぜると彩度が落ちる色の組み合わせも、OKLCHやOKLabに切り替えると自然な中間色になるかどうかここで確認できます。
-
白・黒を混ぜてティント・シェードを作りたい色Bに白（#ffffff）または黒（#000000）を指定し、比率を調整すると、手軽にティント・シェードの確認ができます。
-
color-mix() のブラウザ挙動を確認したい色空間を切り替えながら出力色の違いを視覚的に比較でき、仕様の理解や実装前の検証に役立ちます。
よくある質問
-
色空間によって混色結果が変わるのはなぜですか？
色空間ごとに色を数値で表す方法が異なるため、同じ2色でも中間点の計算結果が変わります。sRGBはRGB値の単純平均、HSLは色相環上の中点、OKLCHやOKLabは人間の知覚に合わせた補間を行うため、特に補色の組み合わせで差が大きく出ます。
-
color-mix() はどのブラウザに対応していますか？
Chrome 111・Firefox 113・Safari 16.2以降で対応しており、主要モダンブラウザでほぼ利用できます。ただしOKLCHやOKLabなど一部の色空間はより新しいバージョンが必要な場合があるため、対象ブラウザに合わせて色空間を選択してください。
-
このツールで表示される混色結果は実際のCSS出力と同じですか？
ツール内でブラウザのレンダリングエンジンを使って計算しているため、実際の
color-mix()の出力と一致します。ただし、OKLCH・OKLabの色空間はブラウザの実装差により結果がわずかに異なる場合があります。 -
OKLCHとsRGBはどちらを使うのがよいですか？
彩度を保った自然な中間色を得たいならOKLCHやOKLabが適しています。特に補色の組み合わせではsRGBが灰色寄りになる一方、OKLCHは彩度を保った混色になります。ただし明度の補間は知覚均等空間で行われるため、白と黒の混色など明暗差が大きい組み合わせではsRGBより暗めの結果になります。既存のsRGBベースの設計と統一性を持たせたい場合はsRGBが無難です。
-
比率を0%または100%に設定するとどうなりますか？
色Aの比率を0%にすると色Bがそのまま出力され、100%にすると色Aがそのまま出力されます。
color-mix()の仕様どおりの動作で、ティントやシェードを段階的に確認する際に活用できます。