混色シミュレーター

2色を混ぜた色は、混ぜ方によって変わります

青 #0000FF と黄 #FFFF00 を半分ずつ混ぜてみると、違いがはっきり分かります。画面上で RGB の値を平均するとグレーの #808080 になり、2つの光を半分の強さで重ねて当てると明るいグレーの #BCBCBC になります。絵の具のように混ぜると青緑がかった #217D90 になり、黄の割合を 75% に増やすと緑の #81B265 に近づきます。CSS の color-mix() の既定値である OKLab で混ぜると、空色の #6CABC7 になります。

上の計算ツールは、この5つの方式を1つの画面に並べて表示します。2色と割合を入力すると、方式ごとに A から B へ続く帯と現在の割合の色が表示され、選んだ方式で HEX・RGB・HSL・OKLCH の値、CSS コード、ステップパレットを作れます。下の混色ルートマップでは、方式ごとに色が通る経路が違うため、結果がくすんだり鮮やかなままだったりする理由を確認できます。

混ぜた色を事前に計算する理由と使う場面

同じ2色でも、使う場面によって適した混ぜ方は異なります。画面で使う色なのに絵の具の結果を期待したり、絵の具を混ぜるときに画面上の平均だけを見て判断したりすると、思っていた色になりません。

• Web・アプリのデザイン: ボタンにマウスを重ねたときの少し暗い色や、ブランドカラーに白を混ぜた淡い背景色を CSS の color-mix() で作るとき、結果の HEX を事前に確認できます。
• グラフ・グラデーション: 2色の間を 5・7・9 段階に分けて、順序のある配色を作ります。中間がくすまない方式を選ぶことが大切です。
• 絵・工作・塗料: 絵の具や塗料を実際に混ぜる前に、どちらの色に寄るか、白や黒をどのくらい入れるかを大まかに見積もります。
• 授業・解説: 光の混合(加法)と絵の具の混合(減法)がなぜ違う結果になるのかを、同じ2色で比べて見せられます。

計算ツールの使い方

1. 色A・色Bの欄に、#3498db、3498db、#f80 などの HEX コードや、rgb(52 152 219)、hsl(204 70% 53%)、tomato といった CSS の記法を入力します。欄の左にある色見本をタップするとカラーピッカーで選べ、中央のボタンで A と B を入れ替えられます。
2. Bの割合は、混ぜた色に占める B の分量です。30 を入力すると A 70%、B 30% になります。5本の帯の上にある縦のマーカーをドラッグするか、帯をタップしてから ← → キーで 1% ずつ動かすこともできます。
3. 左の方式名をタップすると、その方式が結果カードとステップパレットに使われます。右の HEX ボタンを押すと、その方式の結果だけをすぐにコピーできます。
4. 結果カードで、HEX・RGB・HSL・OKLCH の値と CSS の color-mix() コードをコピーします。絵の具方式には対応する CSS 関数がないため、HEX で記述します。
5. ステップパレットでマス数を選び、HEX の一覧、CSS 変数、PNG 画像として持ち出せます。マスを1つタップすると、その色の HEX がコピーされます。

5つの混色方式

5つの方式はどれも同じ2色と同じ割合を受け取りますが、平均する対象が異なります。最後の列は、青 #0000FF と黄 #FFFF00 を 50 : 50 で混ぜた結果です。

画面平均は昔の HEX ブレンダーが使っていた方式で結果が見慣れていますが、補色に近い2色を混ぜると大きくグレーへ寄ります。光方式は、同じ2色で画面平均より常に同じか明るくなります。HEX の数値は光の強さをガンマ曲線で圧縮した値なので、強さそのものを平均してから HEX に戻すと、中間の値が明るくなるためです。

絵の具はなぜ画面と違う混ざり方をするのか

画面は赤・緑・青の光を足し合わせて色を作ります(加法混色)。絵の具はその逆で、当たった光のうち特定の波長を吸収し、残りを跳ね返します(減法混色)。青い絵の具は主に短い波長を、黄色い絵の具は中程度から長い波長を跳ね返すので、2つを混ぜると両方が共通して跳ね返す緑付近の波長だけが残ります。そのため、画面平均ではグレーになる青 + 黄が、絵の具では緑系になります。

このツールの絵の具方式は、Scott Allen Burns が公開している計算手順に従っています。まず各色を、可視光の 380~730 nm を 10 nm 間隔で分けた 36 個の反射率の値に変換します。同じ RGB を出す曲線は無数にあるので、その中で最もなめらかな曲線(隣り合う値の対数差の二乗和が最小で、反射率が 0~1 に収まる曲線)を選びます。次に、2つの曲線を波長ごとに重み付き幾何平均、つまり 反射率A^{1 − t} × 反射率B^t(t は B の割合)で混ぜ、CIE 1931 等色関数と昼光 D65 を使って再び sRGB を計算します。

幾何平均は掛け算なので、暗い色の影響が大きくなります。青 #0000FF は光の量(相対輝度)が黄の 10 分の 1 にも届かないため、半分ずつ混ぜると、まだ青寄りの青緑になります。黄を増やしていくと、緑へ移っていきます。

よく使う組み合わせの混色表

下の表はすべて 50 : 50 で混ぜた結果です。同じ行でも方式によって色が大きく違うので、結果を使う場面に合った列を見てください。上の計算ツールの「よく使う組み合わせ」をタップすると、同じ組み合わせをすぐに呼び出せます。

絵の具の列では、赤 + 緑は茶色、赤 + 青は暗い紫になります。実際に2色の絵の具を混ぜたときによく見る結果と同じ方向です。光の列は、どの組み合わせでも画面平均と同じか、それより明るくなります。

画面上で混ぜるとなぜくすむのか

色がくすむとは、彩度が低くなるということです。混色ルートマップは色空間を真上から見下ろした OKLab の a・b 平面で、中心に近いほどグレー、外側の帯に近いほど鮮やかです。画面平均は A と B を RGB の立方体の中でまっすぐ結ぶため、補色に近い2色では経路が中心のグレーを通ります。OKLCH は色相環の外周に沿って回り込むので、彩度が保たれます。

かっこ内は、2色の彩度の平均に対する割合です。グラフのように段階ごとに色をはっきりさせたいときは OKLCH が向いています。光方式は赤 + 青のような補色でない組み合わせでは彩度を保ちますが、青 + 黄のような補色の組み合わせでは画面平均と同じく灰色になります。ただし OKLCH は、鮮やかな2色の間で画面が表示できない色まで行ってしまいやすく、上の表の OKLCH の青 + 黄のように、切り詰めた値が出ることがあります。

白・黒を混ぜるとき(ティント・シェード)

色に白を混ぜて淡くした色をティント、黒を混ぜて暗くした色をシェードと呼びます。画面平均は白が増えた分だけ均等に淡くなりますが、絵の具方式では、ピンクに変わるまでにかなり多くの白が必要です。

黒は逆に、絵の具方式でとても強く効きます。白に黒を 10% 混ぜただけで #A9A9A9、25% なら #595959、半分ずつなら黒に近い #191919 になります。同じ割合を画面平均で混ぜると #E6E6E6、#BFBFBF、#808080 です。実際の絵の具でも、黒は少しずつ加えるのが普通です。

CSS の color-mix() で使う

CSS では color-mix(in oklab, #3498DB, #E74C3C) のように、混ぜる色空間と2色を指定します。結果カードの CSS 行は、選んだ方式に合った空間(srgb-linear・srgb・oklab・oklch)でこのコードを作ります。パーセント指定は次のように整理されます。

CSS Color 5 のドラフトでは、色空間を省略すると oklab で混ぜると定められていますが、古いブラウザを考えると in oklab まで書いておくほうが安全です。極座標系の空間(oklch・hsl)は色相角を短い側に回り、in oklch longer hue のように書くと長い側を回ります。

よくある間違い

• HEX の平均を絵の具の結果だと思い込む: 青 + 黄がグレーになるのは計算ミスではなく、画面平均の性質です。絵の具の結果を知りたいときは、絵の具の行を見てください。
• 割合を逆に読む: このツールでも CSS でも、B の割合 30% は A が 70% という意味です。color-mix() のパーセントは、すぐ前の色の分量を表します。
• 光の混合を足し算だと考える: 赤い光と緑の光を両方点けると黄の #FFFF00 になりますが、このツールの光方式は2つの光を割合どおりに分けて点灯した平均なので #BCBC00 です。
• OKLCH の結果をそのまま信じる: 鮮やかな2色の間は sRGB の外へ出やすくなります。結果カードに切り詰めたという案内が出たら、実際に画面に表示される色はその HEX です。
• 黒を入れすぎる: 絵の具方式では、白に黒を 30% 混ぜるとすでに濃いグレーの #474747 になり、赤に黒を 10% 入れるだけで #AA0D0B まで暗くなります(画面平均は #E60000)。暗くするときは、10% 以内から少しずつ増やしてみてください。
• 白を数滴でパステルになると期待する: 絵の具方式で赤をピンクに変えるには、白が 75% 前後は必要です。

制限と注意

• 絵の具方式は、画面の色を「最もなめらかな反射率」を持つ仮想の絵の具とみなして混ぜる近似です。実際の絵の具は顔料ごとに反射曲線と着色力(混ぜたときに色を引き寄せる力)が異なり、同じ HEX でもメーカーや顔料によって結果が変わります。
• 値が 0 のチャンネルは 0.0001 に置き換えて計算するため、純粋な黒 #000000 も、反射率 0.0001 の非常に暗い絵の具として扱います。両端の割合 0% と 100% は、入力した色をそのまま返します。
• 結果が画面の色域(sRGB)を外れた場合は、チャンネルを 0~255 に切り詰めて表示します。これは Chrome 151 が color-mix() の結果を描画する方法と同じで、CSS Color 4 が推奨する彩度を下げる方法とは異なる場合があります。
• 透明度は無視して、不透明な2色として混ぜます。半透明の色を入力すると、透明度を無視するという案内が表示されます。
• 画面に表示される色は、モニターの色域や明るさの設定によって見え方が変わることがあります。印刷の色が必要なときは、CMYK 変換ツールで印刷条件に合わせて確認してください。

基準: 絵の具方式は Scott Allen Burns の反射率曲線(380~730 nm、10 nm)と重み付き幾何平均の手順、CIE 1931 2° 等色関数、昼光 D65 で、残りの4方式は CSS Color 4・5 の color-mix() の定義で計算しています。CSS の結果は 2026年10月21日に Chrome 151 で確認しました。

出典

• 01Scott Allen Burns — Subtractive Color Mixture ComputationRGB を反射率曲線に変換し、重み付き幾何平均で混ぜて RGB に戻す手順、青 + 黄の例
• 02Scott Allen Burns — Generating Reflectance Curves from sRGB Triplets380~730 nm を 10 nm 間隔で 36 点、最もなめらかな曲線(LLSS・ILLSS)、反射率 0~1
• 03W3C — CSS Color Module Level 5color-mix() の構文、方式を省略した場合の oklab、パーセントの正規化と合計が 100% 未満のときのアルファ
• 04W3C — CSS Color Module Level 4色補間の既定空間 Oklab、色相角補間の既定値 shorter、sRGB 伝達関数と OKLab 変換行列
• 05CIE — CIE 1931 colour-matching functions, 2 degree observer反射率曲線を XYZ に変換する等色関数のデータ
• 06CIE — Components of relative spectral distribution of daylight昼光 D65(6504 K)の分光分布を作る S0・S1・S2 成分
• 07Björn Ottosson — A perceptual color space for image processingOKLab 色空間の定義と設計意図
• 08MDN — color-mix()構文の例とブラウザー対応(Chrome 111、Firefox 113、Safari 16.2)

よくある質問

あわせて使いたいツール