カラーミキサーとは？
比率スライダーで2つの色をブレンドし、結果をリアルタイムで確認できます。HEX・RGB・HSL値が表示され、コードやデザインツールにそのままコピーできます。
2色を選び、混合モード(RGB、RYB、LAB、LCH、HSL、OKLCH のいずれか)を指定して、0%〜100% の比率スライダーを動かします。RGB は画面色空間で直接平均する最速モードですが、中間色がくすみがち。RYB は実際の絵の具のように混ざるので、青と黄で緑、赤と黄で橙になります。LAB と LCH は知覚色空間で混ぜるため、色相をまたぐグラデーションが滑らかになります。OKLCH は CSS color-mix 仕様に沿った最新の知覚モデルで、中間色がもっとも自然に見えることが多いです。出力は HEX、RGB、HSL、CMYK と最も近い色名に加え、白・黒背景に対する WCAG コントラスト値、コピーできる CSS 線形グラデーションも表示します。25・50・75% のクイックボタンで、よく使う混合ポイントへ一発で飛べます。
使い方
- ステップ1 — カラーピッカーを使用するか、HEX値を入力して最初の色を選択します。
- ステップ2 — 2つ目の色を選択し、ミックス比率スライダーでブレンドを調整します（0%=最初の色のみ、100%=2つ目の色のみ）。
- ステップ3 — 混合結果をカラーコードとともに確認し、必要な値をコピーします。
使用するタイミング
- ブランド色を白や灰と混ぜて、ボタンの hover や disabled 状態を作る。
- 中央がくすまないように、CSS グラデーションの中間ストップを作る。
- 2色のブランドカラーを低比率で混ぜ、柔らかい注意喚起色を作る。
結果
デザイナーがブランドブルー（#2196F3）とホワイト（#FFFFFF）を30%の比率で混合し、UIキットのホバーステート用に淡いティント（#A1C9F8）を作成します。
よくある質問
- 普段はどの混合モードを選べばいい?
- ビルド環境が対応しているなら OKLCH が最有力です。知覚的にもっとも均一で、現代の CSS color-mix 仕様にも合っています。次点は LAB で、デザインツールでも広く扱えます。2色の明度が近ければ RGB でも十分。LCH は彩度をもっとも保ち、HSL は滑らかな補間というより色相回転に向いています。
- RGB の中間色が灰色っぽく濁って見えるのはなぜ?
- RGB は数値の平均で、知覚の平均ではないからです。青とオレンジのような補色は R、G、B 各チャンネルが相殺して、結果が彩度の低いグレーになります。LAB か LCH に切り替えると中間色の彩度を保てます。実際に絵の具を混ぜたときと同じ結果がほしいときは RYB モードを使ってください。青と黄をグレーではなく緑に混ぜてくれます。
- CSS の `color-mix()` との違いは?
- color-mix() はモダンブラウザに搭載済みで、srgb、lab、oklab、lch、oklch で動作します。本ツールは古いスタイルシートにも貼れる HEX を返し、視覚的なスライダーで比率を直感的に決められます。
- 3色以上を混ぜられますか?
- 1ステップでは不可ですが、連鎖は可能です。A と B を混ぜて C を作り、続いて C と D を混ぜます。3色をなめらかにつなぎたい場合は、A→B を 50%、B→C を 50% で混ぜ、その2つの中間値を元の B の両側にあるグラデーションストップとして使うとうまくいきます。
- 比率 0% と 100% はそれぞれ何を意味しますか?
- 0% は Color 1 のまま、100% は Color 2 のまま、50% で中間色。スライダーは 1% ステップで動くので、ティントやシェードを細かく調整できます。UI のステート設計では、10% と 15% の混合でも見え方の違いを実感できます。