使い方
- 候補が絞れた 2 色を入力します。
- 混色空間と Color B の比率を選びます。
- 出力された CSS
color-mix()をコードや仕様書へ貼ります。
Wave 52 拡張
視覚確認の次に、実装へ渡す混色式を作る
このページはカラーミキサーや OKLCH 変換の次に置く想定です。2 色が決まったあとで、実装に渡す CSS の混色式を短く整理します。
Color A: 60%
Color B: 40%
近いページとの使い分け
カラーミキサー は視覚的に中間色を試すページ、OKLCH 変換 は 1 色を知覚色空間で確認するページです。このページは、2 色が決まったあとで CSS color-mix() をそのまま作りたいときに使います。そこから背景・文字・アクセント・境界線まで役割つきで組みたいなら アクセシブル配色、役割色が固まったあとで CSS 変数や JSON トークンへ渡したいなら カラートークン出力、まだ差の確認が必要なら 色差チェック、可読性確認が次なら コントラストチェッカー へ進みます。
FAQ
このページでは何を生成できますか？
2 色と比率から、そのまま貼れる CSS color-mix() を作り、ブラウザ内で混色結果を確認できます。
カラーミキサーとの違いは何ですか？
カラーミキサーは中間色を視覚的に試すページです。このページは、実装に渡す CSS color-mix() 文字列を作るページです。
OKLCH 変換との違いは何ですか？
OKLCH 変換は 1 色を知覚色空間へ変換するページです。このページは、2 色が決まったあとに CSS 上の混色式を作るページです。
共有URLには何が入りますか？
2 色、比率、選んだ混色空間が入ります。