CSS color-mix() プレビュー (補間空間の比較)

使い方

1. ピッカーまたは hex で色 A と色 B を指定。
2. 比率スライダーをドラッグ — 値は混合中の A の割合 (30% なら A 30% + B 70%)。
3. 8 枚のカードを比較: スウォッチは現在比率の結果、ストリップはその空間での A→B フルグラデーション。
4. コピーアイコンで `background: color-mix(in <space>, ...);` 宣言を取得。
5. プリセットを試してみる — 赤↔青、黄↔青は 'srgb がくすんで見えるのはなぜ' の典型例。

よくある質問

なぜ空間ごとに結果が全く違うのですか？

color-mix() の線形補間は選んだ座標系での直線です。sRGB キューブは対角線が灰色なので、その直線が彩度の低い中間点を通ります。OKLCH では同じ直線が知覚輝度を保ちつつ色相だけ回転するので鮮やかさが保たれます。HSL は色相環の短い経路を取り、A と B の間にない色まで通り過ぎることがあります。どれも間違いではなく、幾何構造が異なるだけです。

どの空間を使うべきですか？

ほとんどの UI 作業では `oklch` か `oklab` が知覚的に最良です — 明度が均一で、混ぜても鮮やかで、濁った中間点がありません。`srgb-linear` は物理的な光合成 (写真合成) に正確です。`srgb` は古いツールや 2023 以前の CSS の結果と一致します。`hsl` は A と B が彩度・明度を共有する場合のみ色相ベースのパレットに適しています。鮮やかな色のペアにそのまま `srgb` を使うのは避けてください — 意図的にくすんだ見た目が欲しい場合を除いて。

表示される hex はどれくらい正確？

ブラウザが計算した値そのものです。色の式をキャンバスの `fillStyle` に設定し、1×1 ピクセルを描画してから `getImageData()` で実際の sRGB バイトを読み出しています。そのため表示される hex は、同じ mix に対する `getComputedStyle()` の値と一致します — 8 ビットキャンバス量子化によるチャンネル当たり ±1 の丸め誤差内で。

hue-shortest と hue-longest は？

CSS は色相ベースの空間 (hsl, hwb, lch, oklch) で `longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` 修飾子をサポートします。このツールはカードをすっきり保つためデフォルト (shorter hue) を使います。長い経路が必要なら自分で修飾子を付けてください: `color-mix(in oklch longer hue, A 50%, B)` — 同じ色、ホイールの反対方向。

ブラウザ対応は？

color-mix() は Chrome/Edge 111+ (2023年3月)、Safari 16.2+ (2022年12月)、Firefox 113+ (2023年5月) で利用可能。2023 年以降のすべての主要ブラウザがここに挙げたすべての空間をサポートします。未対応バナーが出る場合はそれより古いブラウザです — CSS 自体は解析されますが正しい色を生成しません。

関連ツール