赤と青を混ぜたら何色になる？ — 画面の上で絵の具を混ぜてみよう
小学校の図工の時間、パレットの上で赤と青の絵の具を混ぜてワクワクした経験は誰にでもあるはず。紫ができたり、茶色っぽい何かが生まれたり、予想と違う色に驚いた記憶もあるよね。
この「色混合シミュレーター」は、画面上で2〜4色の混色結果をリアルタイムに確認できるツール。塗料・絵の具の混色（減法混色）と、光・ディスプレイの混色（加法混色）を切り替えられるから、用途を問わず使える。結果はHEX/RGB/マンセル近似値で表示されるので、そのまま実務にも持ち込める。
そして本当に知りたいのは、たいてい逆のほうだ。「この色を作るには何をどれだけ混ぜればいいのか」。計算の向きを「調色（逆算）」に切り替えると、目標色のHEXと手持ちの色を渡すだけで、配合比・滴数・色差ΔEまで一気に出る。
なぜ色混合シミュレーターを作ったのか
開発のきっかけ
きっかけは自宅の壁を塗り替えるDIYだった。ホームセンターで塗料を2缶買って「この色を混ぜたらいい感じのベージュになるはず」と思って混ぜたら、想像と全然違うくすんだグレーが出来上がった。250mLの塗料が無駄に。
「混ぜる前にシミュレーションできたら…」と思ってネットを調べたけど、見つかるのはRGBの加法混色ばかり。光の三原色を混ぜるツールは塗料の混色とは結果が全く違う。赤＋緑＝黄色になるRGB加法混色は、絵の具の世界では成り立たない。
こだわった設計判断
Kubelka-Munk理論の採用: 単純にCMYK値を平均するのではなく、顔料の光散乱モデルであるKubelka-Munk理論の簡易近似を使っている。これにより「赤＋青→紫」が自然に再現される。CMYK単純平均だと、特に暗い色同士の混色で不自然に黒くなりがち。
マンセル表示との連携: HEX⇄マンセル変換ツールと同じロジックでマンセル近似値を表示。建築塗装や日塗工コードとの照合に便利。
比率スライダーのリアルタイム反映: 「ちょっとだけ白を足したい」という微調整が直感的にできるよう、スライダー操作で即座に結果が更新される。
混色の基本 — 加法混色と減法混色の根本的な違い
加法混色 とは
加法混色は光の混合。赤(R)・緑(G)・青(B)の光を重ねると色が明るくなり、3色全部を等量混ぜると白になる。テレビ、PCモニター、スマホ画面の発光原理がこれ。
身近な例で言えば、暗い部屋で赤いライトと緑のライトを同じ壁に当てると、重なった部分が黄色く見える。照明デザインや舞台照明では日常的に使われている原理だ。
加法混色の計算:
R_result = (R1 × ratio1 + R2 × ratio2) / (ratio1 + ratio2)
G_result = (G1 × ratio1 + G2 × ratio2) / (ratio1 + ratio2)
B_result = (B1 × ratio1 + B2 × ratio2) / (ratio1 + ratio2)
例: 赤(255,0,0) 50% + 緑(0,255,0) 50%
→ (127, 127, 0) ≒ 暗い黄色
減法混色 とは
減法混色は顔料・インクの混合。色がつくたびに光が吸収されて暗くなるから「減法」と呼ぶ。絵の具・塗料・印刷インクの世界はこっち。シアン(C)・マゼンタ(M)・イエロー(Y)が三原色で、全部混ぜると理論上は黒になる（実際は濁った暗褐色になるのでKインクを追加する）。
Kubelka-Munk理論 とは
塗料や紙の光学特性をモデル化した理論で、顔料が光を「吸収」する量(K)と「散乱」する量(S)の比率で反射率を予測する。1931年にPaul KubelkaとFranz Munkが発表し、現在でも塗料工業やテキスタイル産業で標準的に使われている。
K/S値 = (1 - R)² / (2R)
R: 反射率 (0〜1)
K: 吸収係数
S: 散乱係数
混合後の K/S:
(K/S)_mix = Σ(ratio_i × (K/S)_i) / Σ(ratio_i)
逆変換:
R_mix = 1 + (K/S) - √((K/S)² + 2(K/S))
この理論の利点は、RGB単純平均やCMYK平均と違い、実際の顔料の振る舞いに近い混色結果が得られること。
混色計算を間違えると何が起こるか
塗装の色合わせコスト
建築塗装の現場で「この色がいい」と調色指定を出すとき、最初の試し塗りで色が合わないと調色をやり直す。調色は1回あたり数千円〜1万円のコスト。3回やり直せば3万円。さらに工期の遅れが発生する。
事前にシミュレーションで「だいたいこの比率」と当たりをつけておけば、1回目の調色精度が格段に上がる。
DIYの材料ロス
ホームセンターで買った塗料は、一度混ぜると元に戻せない。混色に失敗すると丸ごと廃棄。環境面でも、経済面でもロスが大きい。
印刷のプルーフ代
グラフィックデザインで「この2色の中間色を使いたい」というとき、CMYKの勘だけで指定すると校正刷り（プルーフ）で想定外の色が出る。プルーフ1回数千円×修正回数で費用がかさむ。
3色を混ぜるシミュレーション — 予測が難しい理由
2色の混色は直感的に想像できても、3色を混ぜると一気に予測が難しくなる。減法混色では色を重ねるほど暗く濁る方向に進むため、3色目の追加量を間違えると一気に黒ずんでしまう。このシミュレーターなら3色の比率をスライダーで微調整しながらリアルタイムに結果を確認できるから、「ベース色 + アクセント + 白」のような3色混合でも失敗しにくい。
4色を混ぜるシミュレーション — 調色の実務で使うケース
プロの調色では4色混合も珍しくない。たとえば「ベースの茶 + 黄で温かみを出す + 白で明度を上げる + 青をほんの少し足して彩度を抑える」といった具合。このツールでは4色まで同時に比率を調整できるので、複雑な調色でも事前に方向性を掴める。
色混合シミュレーターが役立つ場面
塗装業者の調色見積もり
お客さんに「こんな色になります」とプレビューを見せながら打ち合わせできる。HEXコードをそのまま調色指示書に記載すれば伝達ミスも減る。
DIYの壁塗り・家具リメイク
余った塗料同士を混ぜて使いたいときに、混ぜる前に結果をチェック。白を何%足すと明るくなるかの目安がつかめる。
美術教育の教材
「赤と青を混ぜると紫」だけでなく、比率を変えるとどうなるかを視覚的に学べる。加法混色との違いを並べて見せれば、光と顔料の混色の違いが直感的に理解できる。
Webデザインの配色確認
2色のグラデーション中間色や、ブランドカラー同士を混ぜた派生色を確認したいとき。加法混色モードでRGB値ベースの正確な結果が出る。
プラモ・ミニチュアの調色レシピ探し
「作例のこの色、手持ちの基本色で作れる？」を先に確かめられる。調色（逆算）モードに目標色のHEXと持っている塗料を渡すと、配合比と滴数のレシピが出る。作れないなら作れないと色差で言ってくれるので、無駄に混ぜて塗料を捨てずに済む。
基本の使い方
3ステップで混色結果を確認できる。
Step 1: 混色モードを選ぶ
「減法混色（塗料・絵具）」か「加法混色（光）」を選択。塗料やインクの混色なら減法、ライトやディスプレイの混色なら加法を選べばOK。
Step 2: 色を選んで比率を調整
2〜4色をHEX入力またはカラーピッカーで指定し、各色の比率スライダーを動かす。クイック色選択から12色をワンタップでセットすることもできる。顔料セットは「実塗料に近い色」が既定で、こちらは白を混ぜれば淡くなり黄と青を混ぜれば緑になる。RGBの理想値そのもので理論値を確かめたいときだけ「純色（RGB原色）」に切り替える（違いはケース1〜3を参照）。
Step 3: 混色結果を確認
比率バー → 混色スウォッチ → HEX/RGB/マンセル近似値がリアルタイムで更新される。「結果をコピー」ボタンで調色指示書やデザインツールにそのまま貼り付け可能。
調色（逆算）モードの使い方 — 目標色から配合比を求める
「計算の向き」を**調色（逆算）**に切り替えると、入力欄が丸ごと入れ替わる。こちらも3ステップ。
- 目標色を指定する — HEXを直接打つか、カラーピッカーかRGBスライダーで決める。作例の写真からスポイトで拾ったHEXをそのまま貼ってもいい。
- 手持ちの色を2〜6色選ぶ — パレットは「プラモ基本色」「原色＋白黒」「水彩12色」の3種類。チップをタップすると使う色に入る。各色のHEXは手持ちの塗料の実測値に書き換えられるので、メーカーのカラーチップをスキャンした値を入れると精度が上がる。
- レシピと色差を読む — 配合比が%と滴数で出て、目標色と再現色が横並びでプレビューされる。判定は色差ΔE2000で、5.0以上なら「再現不可」＝その色の組合せでは届かないという意味。
順方向の混色モード（減法／加法）はそのまま効く。塗料の調色なら減法混色のままでいい。
具体的な使用例 — 2色・3色を混ぜるシミュレーション検証
ケース1: 白で薄めたパステルピンク（減法混色）
入力値:
- 色1: #C4262E（赤・実塗料セット）50%
- 色2: #FFFFFF（白）50%
結果: #D43D47。ローズ寄りのピンク。白80%まで増やすと #E3636E、白20%だと #C92D35 と、素直に淡くなっていく。
→ 解釈: 減法混色でも白の追加は「顔料を薄める」効果として素直に効く。ただし同じ操作を純色セットの #FF0000 でやると #FF0101 のまま、ほとんど変化しない。理想色はG・Bがちょうど0で、反射率を0.001にクランプするとK/Sが約499まで跳ね上がるため、白をいくら足しても吸収が抜けないからだ。現実の顔料に反射率0のものは無いので、入力を実塗料に近い値にしておくのが正しい使い方。クイック色選択の顔料セットが既定で「実塗料に近い色」なのはこのため。
ケース2: 赤と青で紫を作る（減法混色）
入力値:
- 色1: #C4262E（赤・実塗料セット）50%
- 色2: #1B4B9B（青・実塗料セット）50%
結果: #2D3245。青みの強い、暗く濁った紫。
→ 解釈: 単純なRGB平均なら #703965 の中間紫だが（加法混色モードに切り替えると確かめられる）、減法混色では赤がG・Bを、青がR・Gを吸収するので、彩度が落ちて暗く沈む。「赤と青を混ぜたら思ったより汚い紫になった」という実体験どおりの挙動だ。純色セット（#FF0000 + #0000FF）でやると #010001 でほぼ真っ黒になるが、これは理想色の吸収が極端すぎるためで、実物の絵の具の再現としては実塗料セットのほうが近い。
ケース3: 黄+青=緑の検証（減法混色）
入力値:
- 色1: #F5C500（黄・実塗料セット）50%
- 色2: #1B4B9B（青・実塗料セット）50%
結果: #2E6701。ちゃんと緑になる。黄を増やして70:30にすると #3F7B00 の黄緑、逆に30:70にすると #245901 の深緑。
→ 解釈: 図工で習う「黄+青=緑」がそのまま出る。理屈としては、実塗料の黄 #F5C500 はG成分を197も残していて、青 #1B4B9B もGを75残しているので、両者を混ぜてもGだけが生き残る。ここでも純色セットだと話が変わり、#FFFF00 + #0000FF は #010101 の無彩色になる — 理想色の黄はGが255、青もGが0で、混ぜるとGの吸収が最大になって全チャンネルが潰れるからだ。「黄と青を混ぜても緑にならない」ときは、まず入力が純色になっていないか疑ってほしい。
ケース4: 3色混合で落ち着いたアースカラー（減法混色）
入力値:
- 色1: #6B4423（茶・実塗料セット）40%
- 色2: #F5C500（黄・実塗料セット）35%
- 色3: #FFFFFF（白）25%
結果: #926A01。黄土色〜カーキ寄りの落ち着いたアースカラー。
→ 解釈: 3色混合になるとチャンネルごとに効く顔料が入れ替わるので、2色よりずっと直感が効かない。ここでBが1まで落ちているのは黄が青を強く吸収しているためで、白25%を足してもBは戻らない。先に画面で確かめる価値が一番高いのはこの領域だ。もっと明るいベージュにしたいなら白を足すより、黄を減らすほうが効く。
ケース5: 加法混色で赤+緑=黄（加法混色）
入力値:
- 色1: #FF0000（赤）50%
- 色2: #00FF00（緑）50%
結果: #808000付近の暗い黄色。
→ 解釈: 光の世界では赤+緑=黄は正しい。ただしRGB平均なので最大輝度の黄色にはならない点に注意。
ケース6: 加法混色でRGB三原色を全部混ぜる（加法混色）
入力値:
- 色1: #FF0000（赤）33%
- 色2: #00FF00（緑）33%
- 色3: #0000FF（青）34%
結果: #555555付近のグレー。
→ 解釈: 三原色を等量混ぜると無彩色になるのは加法混色の基本原理。比率を変えると様々な色相が出現する。
ケース7: マスタード色をプラモ基本色から逆算（調色モード）
入力値:
- 計算の向き: 調色（逆算）／減法混色
- 目標色: #C0A014
- 使う色: ホワイト #FFFFFF ／ レッド #C4262E ／ イエロー #F5C500 ／ ブラウン #6B4423
結果: ホワイト60% : イエロー30% : ブラウン10%。滴数に直すと白6滴 : イエロー3滴 : ブラウン1滴（合計10滴）。再現色 #C0A001、ΔE2000 = 0.69 で「ほぼ一致」。レッドは使わない色として除外された。
→ 解釈: 4色渡しても全部使うとは限らない。次点候補は白50/黄40/茶10（ΔE 0.70）、白73/黄16/茶11（ΔE 0.79）で、白と黄の比を大きく振ってもΔEがほとんど動かない。つまりこの色は白黄比に鈍感で、現場では「白は多少目分量でいい、効くのは茶10%のほう」と読める。
ケース8: オリーブドラブを水彩12色セットから逆算（調色モード）
入力値:
- 目標色: #6A6A3E
- 使う色: ホワイト #FAFAF5 ／ パーマネントイエロー #F9BC2E ／ ウルトラマリン #26428B ／ アイボリーブラック #201F1D
結果: ホワイト45% : パーマネントイエロー41% : ウルトラマリン3% : アイボリーブラック11%。再現色 #6A6B3F、ΔE2000 = 0.49。明度調整は不要。
→ 解釈: 効いているのはウルトラマリン3%。次点の白30/黄55/青3/黒12はΔE 1.59まで落ちるので、青を抜くのではなく黄と白の比を守るほうが大事だとわかる。3%は20滴なら0.6滴——爪楊枝の先の量で、これを外すと緑にも茶にも転ぶ。
ケース9: 肌色が「再現不可」になるとき（調色モード）
入力値:
- 目標色: #E8B48C
- 使う色: ホワイト ／ レッド ／ イエロー ／ ブラウン（ケース7と同じ4色）
結果: ホワイト94% : レッド1% : ブラウン5%、再現色 #D0AE93、ΔE2000 = 5.74 で「再現不可」。明度調整は白+29%と出るが、そこでのΔEは6.42に悪化する。
→ 解釈: 白黒で動かせるのは明度だけで、色相と彩度のずれは直らない。それを正直に出しているのがこの「悪化」表示だ。この4色だと目標の橙寄りの色相に届かないので、イエローをオレンジ #E8620C に差し替えると答えが変わる — 白95/レッド2/オレンジ1/ブラウン2 で ΔE2000 = 2.20、判定は「実用差」まで改善する。持っている色を1本入れ替えるだけで届く、という判断がΔEの数字で下せる。
仕組み・アルゴリズム — Kubelka-Munk理論と実装の詳細
候補手法の比較
| 手法 | 精度 | 速度 | 本ツールでの採用 |
|---|---|---|---|
| RGB単純平均 | △ 減法混色に不正確 | ◎ | 加法混色モード |
| CMYK加重平均 | ○ 中程度 | ○ | 不採用 |
| Kubelka-Munk簡易近似 | ◎ 顔料に近い | ○ | 減法混色モード |
CMYK加重平均は「変換 → 平均 → 逆変換」の2段階の丸め誤差が大きく、特に暗い色同士の混色で黒つぶれが起きやすい。Kubelka-Munk理論はRGB→K/S変換が1段階で済むため精度と速度のバランスが良い。
計算フロー
[減法混色の計算フロー]
1. 各色のHEXをRGB(0-255)に変換
2. 各チャンネル(R,G,B)を反射率(0-1)に変換（0.001にクランプ）
3. 各色のK/S値を算出: K/S = (1-R)² / (2R)
4. 比率加重平均で混合K/Sを算出
5. 逆変換: R_mix = 1 + K/S - √(K/S² + 2K/S)
6. 反射率(0-1) → RGB(0-255) → HEXに変換
具体的な計算例
赤(#FF0000)50% と 青(#0000FF)50% の減法混色:
赤のRチャンネル: R=1.0 → K/S = 0
赤のGチャンネル: R=0.001 → K/S = 499.0
赤のBチャンネル: R=0.001 → K/S = 499.0
青のRチャンネル: R=0.001 → K/S = 499.0
青のGチャンネル: R=0.001 → K/S = 499.0
青のBチャンネル: R=1.0 → K/S = 0
混合K/S (50:50):
R: (0 + 499.0) / 2 = 249.5 → R_mix ≈ 0.002 → 1
G: (499.0 + 499.0) / 2 = 499.0 → R_mix ≈ 0.001 → 0
B: (0 + 499.0) / 2 = 249.5 → R_mix ≈ 0.002 → 1
結果: 非常に暗い紫 (#010001)
この結果は「赤と青を混ぜると暗い紫」という実体験に合致する。RGB平均の #800080 より暗くなるのが Kubelka-Munk の特徴。
参考: Kubelka-Munk theory — Wikipedia
調色（逆算）はどう解いているか
逆算に解析解はない。混合K/Sから反射率に戻す式が非線形で、しかも0〜255にクランプされるからだ。そこで総当たり＋局所調整の2段構えにした。
| 手法 | 精度 | 速度 | 本ツールでの採用 |
|---|---|---|---|
| 全刻み総当たり（1%） | ◎ | × 4色で17万通り・130ms | 不採用 |
| 粗い総当たり（5%/10%）のみ | △ 淡色で破綻 | ◎ 数ms | 出発点として採用 |
| 粗い総当たり → 1%刻みの局所調整 | ◎ ほぼ全刻み総当たりと同値 | ◎ 数ms | 採用 |
粗い刻みだけで止めると、白が大半を占める淡い色で必ず外す。減法混色では顔料の着色力が強く、5%入れただけで色が大きく動くので、白95%と白100%のあいだが飛び飛びになるからだ。実測すると、パステルピンク #F7C7CE を白・レッド・ブルーで逆算した場合、5%刻みの最良は白95/レッド5 で ΔE 10.82（再現不可判定）。ここから1%刻みで詰めると白99/レッド1 に動いて ΔE 1.83。同じ混色モデル・同じ色なのに、刻みだけで「作れない」が「ほぼ作れる」に変わる。
[調色（逆算）の計算フロー]
1. 目標色のHEXをRGB → CIE Lab（D65）に変換
2. 使う色が2〜4色なら5%刻み、5〜6色なら10%刻みで
合計100%になる配合をすべて列挙（4色で1,771通り／6色で3,003通り）
3. 各配合を順方向と同じ mixSubtractive に通して再現色を得る
4. 再現色と目標色の色差 ΔE2000 を計算し、小さい順に並べる
5. 上位から「配合として実際に違う」候補を最大4件だけ拾う
6. 各候補について、2色間で比率を 4% → 2% → 1% と移し替え、
ΔE が改善しなくなるまで繰り返す（パターンサーチ）
7. 最良を採用。残りを次点候補として表示する
要点は3つ。
(a) 混色モデルは順方向と共有している。 逆算専用の式を書き起こすと、同じ配合なのに「混ぜる」と「調色」で違う色が出るという最悪の事故が起きる。評価関数は順方向とまったく同じ mixSubtractive を呼んでいるので、出てきたレシピを順方向モードに手で打ち直せば必ず同じ色が出る（順方向は4色までなので、確かめられるのは4色以内のレシピ）。
(b) 色差の定義はサイト内で統一している。 ΔE2000（CIE 142-2001 / JIS Z 8730）と判定の境目（1.0 / 2.0 / 5.0）は色差ΔE計算ツールと同じ実装・同じ閾値。片方で「合格」がもう片方で「不合格」になることはない。
(c) 次点候補は「グリッド上の隣」を出さない。 白60/黄30/茶10 の隣の白55/黄35/茶10 を並べても情報がない。使う色の顔ぶれが違うか、配合が20ポイント以上違うものだけを次点として拾っている。
(d) 「原理的に作れない」は探索する前に判定できる。 混合K/Sは各色のK/Sの凸結合なので、混ぜた色の各チャンネルは素材の最小〜最大を絶対に出ない。目標色のRが238で手持ちの色のRが27〜196しかなければ、配合をどう振っても届かないことが探索なしで確定する。この場合はΔEの数字ではなく「Rチャンネルが範囲外」と理由を名指しで出す。加法混色モードではさらに強い条件が使えて、比率の合計が100%＝加重平均である以上RGB平均も素材の範囲を出られない。RGB三原色だけで #FFFF00 を作ろうとすると（目標のRGB平均170に対し素材は85）ここで弾かれる。これは必要条件なので「弾かれなければ作れる」ではないが、弾かれたときは配合を探す意味がないことが証明できる。
具体的な計算例 — 逆算の1ステップ
ケース7（目標 #C0A014）で、局所調整が何をしているかを1手だけ追う。
出発点（5%刻みの総当たり最良）: 白60 / レッド0 / イエロー30 / ブラウン10
→ 再現色 #C0A001、ΔE2000 = 0.69
4%刻みの移し替えを全ペアで試す（改善なし）:
白 →ブラウン (56/0/30/14) … ΔE 3.64 ✗
ブラウン→白 (64/0/30/ 6) … ΔE 4.85 ✗
白 →イエロー (56/0/34/10) … ΔE 0.70 ✗（わずかに悪化）
…9ペアすべて改善せず → 刻みを2%に落とす
2%も改善せず → 1%に落とす:
白 →レッド (59/1/30/10) … ΔE 3.04 ✗
白 →ブラウン (59/0/30/11) … ΔE 1.02 ✗
イエロー→ブラウン (60/0/29/11) … ΔE 1.00 ✗
ブラウン→白 (61/0/30/ 9) … ΔE 1.26 ✗
→ どの刻みでも改善しない＝出発点がすでに局所最適。ΔE 0.69 のまま確定
ケース7は5%グリッドの上にたまたま答えがあった例。むしろ多いのは上のパステルピンクのほうで、出発点の白95/レッド5（ΔE 10.82）から白+4 / レッド−4 の移し替えが通り、白99/レッド1（ΔE 1.83）まで一気に落ちる。動くのは比率だけで、混色の式には一切触れていないのがこの段の肝だ。
他の混色ツールとの比較 — 何が違う？
減法混色に対応
colordic.orgやgradients.appなどの色混合ツールの多くはRGB加法混色のみ。本ツールはKubelka-Munk理論ベースの減法混色モードを搭載しているので、塗料・絵の具の混色に使える。
マンセル近似値の同時表示
混色結果をHEX/RGBだけでなく、マンセル表色系での近似値も表示。建築・塗装業界ではマンセル値が標準的な色指定方法なので、「混ぜた結果が5YR 6/8に近い」とわかるだけで実務的な価値がある。
スライダーでリアルタイムプレビュー
比率を1%単位で調整しながらリアルタイムに結果が変わるので、「もう少し白を足す」「赤を減らす」といった微調整が画面上で完結する。
目標色から配合を逆算できる
2026年8月時点で国内の混色ツールを一通り当たったが、逆算に対応しているのはプラモ特化のツールが1つあるだけで、あとは順方向の混色計算だけだった。公的機関や塗料メーカーの提供する調色計算ツールも見当たらない。本ツールは目標色のHEXと手持ちの色を渡すだけで、配合比・滴数・色差ΔE2000・次点候補までまとめて出す。前半で触れたDIYの塗料廃棄も、そもそも「作れるのか」を先に判定できていれば起きなかった失敗だ。
「作れない」をΔEで言い切る
逆算ツールで一番困るのは、どう混ぜても届かない色に対してもそれらしいレシピが出てくること。本ツールはΔE2000が5.0以上なら「再現不可」と赤で出し、どこまで寄れるかを数字で残す。さらにチャンネルの範囲から到達不能が証明できる場合は、ΔEではなく理由を名指しで出す（前章の(d)）。色差ΔE計算ツールとの役割分担は明快で、混ぜる前に配合を探すのがこのツール、混ぜた後の2色がロット許容差に収まるかを判定するのが色差ΔE計算ツール。判定基準を揃えてある理由は前の章のとおり。
色の混合にまつわる豆知識
三原色の歴史 — RGBとCMYは誰が決めた？
光の三原色(RGB)を最初に体系的に示したのはトーマス・ヤング（1801年）。人間の目に3種類の錐体細胞があるという「三色説」がベースだ。一方、顔料の三原色としてシアン・マゼンタ・イエローが標準になったのは20世紀の印刷技術の発展による。それ以前は「赤・青・黄」が三原色とされていたが、これは不正確で、実際にはマゼンタ・シアン・イエローの方がより広い色域を再現できる。
参考: 原色 — Wikipedia
顔料と染料で混色結果が違う理由
顔料（ペイント、絵の具）は粒子が光を散乱・吸収する。染料（インク、布染め）は分子レベルで光を吸収する。同じ「赤と青を混ぜる」でも、顔料は粒子同士の干渉で濁りやすく、染料はクリアな紫になりやすい。これがKubelka-Munk理論（顔料向け）とBeer-Lambertの法則（染料向け）の使い分けの理由。
混色で失敗しないためのコツ
理想色の三原色ではなく実在の塗料のHEXを入れる
#FF0000 や #FFFF00 のようにチャンネルがちょうど0の色を入れると、白を混ぜてもほとんど淡くならない（ケース1参照）。同じ赤でも #C4262E のような実在の塗料に近い値なら、白80%でちゃんとピンクになる。混色シミュレーションで結果がおかしいと感じたら、まず入力が理想色になっていないか疑う。順方向でも調色でも同じ落とし穴だ。
暗くなりすぎたら混ぜ直す
減法混色は色を混ぜるほど暗くなる。ケース2・ケース3のように補色に近い組合せをぶつけると、#010001 のようにほぼ黒まで落ちてそこから白で戻すのは相当な量が要る。濁ってしまったら足すより混ぜ直す方が早い、というのは実物の絵の具でも同じ。
加法混色モードはWebデザインに最適
CSS の color-mix() や Figma のブレンドモードに近い結果が出るので、Web配色の検討には加法混色モードを使おう。
逆算は使う色を絞るほど当たる
調色モードで色数を増やせば近づく、というものではない。5色以上を選ぶと配合比の刻みが10%に粗くなるため、4色以下のほうが結果が良くなることが多い。まずベース＋白＋補正1色の3色で当てて、届かなければ色を足すのではなく1色入れ替える。入れ替え1本でΔEがどれだけ動くかは使用例のケース9を見てほしい。
パレットのHEXは自分の塗料の実測値を入れる
用意しているパレットのHEXは「一般的な絵具・塗料の見え方」の近似値で、メーカーの測色値ではない。実測値の取り方はこれが手軽 — 手持ちの塗料を白いプラ板に厚めに塗って乾かし、曇天の窓際か白色LEDの下でスマホで撮り、画像編集アプリのスポイトで拾う。影と映り込みが入ると値が沈むので、真上から撮るのがコツ。パレットに無い色は「＋ 手持ちの色を追加」から足せる。
よくある質問
Q: 減法混色の結果は実際の塗料と同じになる？
Kubelka-Munk理論に基づく近似値なので、傾向は一致するが完全に同じにはならない。実際の塗料は顔料の粒子径、バインダーの屈折率、隠蔽力などの影響を受ける。このツールは「だいたいこんな色になる」という事前確認に使い、最終的な色合わせは試し塗りで行うのが確実。
Q: マンセル近似値はどの程度正確？
Munsell Renotation Dataの代表格子点からの逆距離加重補間で算出している。主要色相の標準的な明度・彩度では実用十分な精度だが、高彩度の中間色相（7.5YR等）では誤差が大きくなることがある。より正確な変換が必要な場合はHEX⇄マンセル変換ツールを併用してほしい。
Q: 入力したデータはサーバーに送信される？
一切送信されない。すべての計算はブラウザ内（クライアントサイド）で完結する。色情報は外部に送られず、ブラウザを閉じれば消える。
Q: 4色以上の混色はできる？
順方向の「混ぜる」モードは最大4色まで。5色以上を等分に混ぜると色がどんどん暗く濁るため、順方向では4色あれば「ベース色 + 調整色2色 + 白」で大半のニーズをカバーできる。調色（逆算）モードは手持ちの色から選ぶ性質上、最大6色まで指定できる。ただし5色以上にすると配合比の刻みが5%から10%に粗くなるので、精度が欲しいなら4色以下で回すほうがいい。
Q: 黄と青を混ぜたのに緑にならない・白を混ぜても淡くならない
クイック色選択の顔料セットが「純色（RGB原色）」になっている可能性が高い。#FFFF00 や #0000FF のような理想色はG・Bがちょうど0で、反射率を0.001にクランプするとK/Sが約499まで跳ね上がるため、混ぜると全チャンネルが潰れて #010101 の無彩色になる。既定の「実塗料に近い色」（黄 #F5C500 / 青 #1B4B9B）なら #2E6701 とちゃんと緑になる。白を混ぜても淡くならない場合も原因は同じ。現実の顔料に反射率0のものは無いので、実測値か実塗料セットを使ってほしい。
Q: 調色モードの滴数どおりに混ぜれば同じ色になる？
ツールの中では必ず一致する。逆算の評価に使っているのは順方向とまったく同じ混色式なので、出てきたレシピを「混ぜる」モードに打ち直せば同じHEXが出る。ただし実物の塗料は顔料の隠蔽力や粒子径が銘柄ごとに違うので、そのままでは必ずずれる。滴数は体積比の目安であって、1滴の量そのものはスポイトの口径で変わる点にも注意。精度を上げたいなら、パレットのHEXを手持ちの塗料の実測値に書き換えてから逆算してほしい。
Q: 「再現不可」と出たときは何を変えればいい？
ΔE2000が5.0以上のときは、いま選んでいる色をどう混ぜてもその色には届かないという意味。減法混色は混ぜるほど彩度が落ちるので、目標色より鮮やかな原色を持っていないと原理的に作れない。手順としては、まず目標色に近い色相の原色を1色足すか入れ替える、次にパレットを「原色＋白黒」に切り替えて試す、の順が早い。次点候補のΔEが横並びで動かないなら色相が足りていない、次点だけ大きく悪化するなら配合がシビアという読み方ができる。
まとめ
この混色ツールは、2色・3色・4色を混ぜるシミュレーションと、目標色から配合比を求める調色（逆算）の両方をブラウザ上でリアルタイムに実行できる。Kubelka-Munk理論ベースの減法混色で、RGB平均では再現できない「絵の具を混ぜたときのリアルな色」がわかる。
逆算モードは、手持ちの2〜6色から最良の配合比を総当たりで探し、%と滴数のレシピ・色差ΔE2000・次点候補まで出す。作れない色は「再現不可」と言い切るので、混ぜる前に方針が決まる。
色の変換が気になった人はHEX⇄マンセル⇄日塗工 変換ツール、出来上がった色が許容差に収まるかの判定には色差ΔE計算ツール、塗装面積の計算には塗料計算ツールも試してみて。
不具合や要望があれば、お問い合わせページから気軽に教えて。