色ミキサー（2色の混色・中間色を生成）
2つの色を好きな割合で混ぜた色と、2色の間をなめらかにつなぐ中間色を作れます。混ぜ方はRGB（数値をそのまま平均）とOKLab（見た目の明るさが自然につながる）から選べます。結果はクリックでHEXをコピーでき、CSS変数としてもまとめて書き出せます。ブラウザ内で処理され、サーバーには送信されません。配色の提案は 配色パレットジェネレーター、OKLabなど色空間の変換は 色空間変換 が使えます。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
混色結果
中間色
使い方
- 「色A」と「色B」をカラーピッカーかHEX欄で決めます。
- 「色Bの割合」のスライダーで混ぜる割合を決め、「混色方法」を選びます。
- 「中間色の数」を指定すると、2色の間の色が等間隔に並びます。
- 色をクリックしてHEXをコピー、またはCSS変数・HEX一覧をまとめてコピーします。
注意事項
- RGBの混色はsRGBの数値をそのまま線形に補間します。補色同士を混ぜると、くすんだ灰色寄りの色になりやすい点に注意してください。
- OKLabの混色は知覚的な明るさに基づく色空間で補間するため、明るさの変化がなめらかになります。結果はsRGBの範囲に丸められます。
- 中間色の数には両端の色A・色Bも含まれます（2〜21段）。色Bの割合は混色結果にだけ使われます。
- 実際の絵の具や印刷インクの混色とは結果が異なります。画面上の色の計算です。
用語解説
OKLab
人間の見た目の明るさ・色の差に近くなるよう設計された色空間です。2色の間を補間したときに、明るさや色味がなめらかに変化します。
中間色
2つの色の間を等間隔でつなぐ色のことです。グラデーションの途中の色として使えます。
加法混色
光の三原色（赤・緑・青）の値を足し合わせる混色です。ディスプレイの色はこちらの考え方で、絵の具のような減法混色とは結果が違います。
よくある質問
RGBとOKLabの混色はどう違いますか？
RGBはsRGBの数値をそのまま平均するため、補色同士だとくすんだ色になりがちです。OKLabは見た目の明るさに近い色空間で補間するので、明るさがなめらかに変わり、自然なグラデーションになりやすいです。
中間色の数に両端の色は含まれますか？
含まれます。たとえば5段なら、1番目が色A、5番目が色Bで、その間に3色が等間隔で入ります。指定できるのは2〜21段です。
混色結果が絵の具を混ぜたときと違うのはなぜですか？
このツールはディスプレイ上の色（光）の計算で、絵の具やインクのような減法混色とは仕組みが違います。たとえば青と黄を混ぜても、緑ではなく灰色寄りの色になることがあります。
OKLabで混ぜた色が少し違う色に丸められることはありますか？
あります。OKLabの補間結果がsRGBで表示できる範囲を超えた場合は、範囲内に丸めてHEXにします。鮮やかな色同士を混ぜたときに起こることがあります。
このページをシェア