赤と青を混ぜたら何色になる？ — 画面の上で絵の具を混ぜてみよう
小学校の図工の時間、パレットの上で赤と青の絵の具を混ぜてワクワクした経験は誰にでもあるはず。紫ができたり、茶色っぽい何かが生まれたり、予想と違う色に驚いた記憶もあるよね。
この「色混合シミュレーター」は、画面上で2〜4色の混色結果をリアルタイムに確認できるツール。塗料・絵の具の混色（減法混色）と、光・ディスプレイの混色（加法混色）を切り替えられるから、用途を問わず使える。結果はHEX/RGB/マンセル近似値で表示されるので、そのまま実務にも持ち込める。
なぜ色混合シミュレーターを作ったのか
開発のきっかけ
きっかけは自宅の壁を塗り替える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回数千円×修正回数で費用がかさむ。
色混合シミュレーターが役立つ場面
塗装業者の調色見積もり
お客さんに「こんな色になります」とプレビューを見せながら打ち合わせできる。HEXコードをそのまま調色指示書に記載すれば伝達ミスも減る。
DIYの壁塗り・家具リメイク
余った塗料同士を混ぜて使いたいときに、混ぜる前に結果をチェック。白を何%足すと明るくなるかの目安がつかめる。
美術教育の教材
「赤と青を混ぜると紫」だけでなく、比率を変えるとどうなるかを視覚的に学べる。加法混色との違いを並べて見せれば、光と顔料の混色の違いが直感的に理解できる。
Webデザインの配色確認
2色のグラデーション中間色や、ブランドカラー同士を混ぜた派生色を確認したいとき。加法混色モードでRGB値ベースの正確な結果が出る。
基本の使い方
3ステップで混色結果を確認できる。
Step 1: 混色モードを選ぶ
「減法混色（塗料・絵具）」か「加法混色（光）」を選択。塗料やインクの混色なら減法、ライトやディスプレイの混色なら加法を選べばOK。
Step 2: 色を選んで比率を調整
2〜4色をHEX入力またはカラーピッカーで指定し、各色の比率スライダーを動かす。クイック色選択から12色をワンタップでセットすることもできる。
Step 3: 混色結果を確認
比率バー → 混色スウォッチ → HEX/RGB/マンセル近似値がリアルタイムで更新される。「結果をコピー」ボタンで調色指示書やデザインツールにそのまま貼り付け可能。
具体的な使用例 — 混色シミュレーション検証データ
ケース1: 白で薄めたパステルピンク（減法混色）
入力値:
- 色1: #FF0000（赤）80%
- 色2: #FFFFFF（白）20%
結果: 赤に白を混ぜると、鮮やかさを保ったパステルピンクに。
→ 解釈: 減法混色でも白の追加は「顔料を薄める」効果。比率20%でも十分に明るくなる。
ケース2: 赤と青で紫を作る（減法混色）
入力値:
- 色1: #FF0000（赤）50%
- 色2: #0000FF（青）50%
結果: Kubelka-Munk理論ベースで赤紫系の暗めの紫が生成される。
→ 解釈: 単純なRGB平均 #800080 より暗めになるのが減法混色の特徴。実際の絵の具を混ぜた結果に近い。
ケース3: 黄+青=緑の検証（減法混色）
入力値:
- 色1: #FFFF00（黄）50%
- 色2: #0000FF（青）50%
結果: 暗めの緑系が生成される。
→ 解釈: 絵の具の世界では「黄+青=緑」。加法混色では黄+青=白に近づくので、モードの違いが明確。
ケース4: 3色混合で落ち着いたアースカラー（減法混色）
入力値:
- 色1: #8B4513（茶）40%
- 色2: #FFFF00（黄）35%
- 色3: #FFFFFF（白）25%
結果: 温かみのあるベージュ〜カーキ系。
→ 解釈: 3色混合は2色より予測が難しい。白の比率で明るさを微調整できるのが便利。
ケース5: 加法混色で赤+緑=黄（加法混色）
入力値:
- 色1: #FF0000（赤）50%
- 色2: #00FF00（緑）50%
結果: #808000付近の暗い黄色。
→ 解釈: 光の世界では赤+緑=黄は正しい。ただしRGB平均なので最大輝度の黄色にはならない点に注意。
ケース6: 加法混色でRGB三原色を全部混ぜる（加法混色）
入力値:
- 色1: #FF0000（赤）33%
- 色2: #00FF00（緑）33%
- 色3: #0000FF（青）34%
結果: #555555付近のグレー。
→ 解釈: 三原色を等量混ぜると無彩色になるのは加法混色の基本原理。比率を変えると様々な色相が出現する。
仕組み・アルゴリズム — 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
既存ツールとの比較 — 何が違う？
減法混色に対応
colordic.orgやgradients.appなどの色混合ツールの多くはRGB加法混色のみ。本ツールはKubelka-Munk理論ベースの減法混色モードを搭載しているので、塗料・絵の具の混色に使える。
マンセル近似値の同時表示
混色結果をHEX/RGBだけでなく、マンセル表色系での近似値も表示。建築・塗装業界ではマンセル値が標準的な色指定方法なので、「混ぜた結果が5YR 6/8に近い」とわかるだけで実務的な価値がある。
スライダーでリアルタイムプレビュー
比率を1%単位で調整しながらリアルタイムに結果が変わるので、「もう少し白を足す」「赤を減らす」といった微調整が画面上で完結する。
色の混合にまつわる豆知識
三原色の歴史 — RGBとCMYは誰が決めた？
光の三原色(RGB)を最初に体系的に示したのはトーマス・ヤング（1801年）。人間の目に3種類の錐体細胞があるという「三色説」がベースだ。一方、顔料の三原色としてシアン・マゼンタ・イエローが標準になったのは20世紀の印刷技術の発展による。それ以前は「赤・青・黄」が三原色とされていたが、これは不正確で、実際にはマゼンタ・シアン・イエローの方がより広い色域を再現できる。
参考: 原色 — Wikipedia
顔料と染料で混色結果が違う理由
顔料（ペイント、絵の具）は粒子が光を散乱・吸収する。染料（インク、布染め）は分子レベルで光を吸収する。同じ「赤と青を混ぜる」でも、顔料は粒子同士の干渉で濁りやすく、染料はクリアな紫になりやすい。これがKubelka-Munk理論（顔料向け）とBeer-Lambertの法則（染料向け）の使い分けの理由。
混色で失敗しないためのコツ
白は少量ずつ足す
減法混色では白を一気に入れると急に淡くなる。5%ずつ増やしてシミュレーションで確認しながら調整するのがベスト。実際の塗料でも同じで、白は一度足すと戻せない。
暗くなりすぎたら白を足す
減法混色は色を混ぜるほど暗くなる性質がある。3色以上を混ぜると予想以上に暗くなりがち。「なんか暗い」と思ったら白を4色目に追加して比率を調整してみて。
加法混色モードはWebデザインに最適
CSS の color-mix() や Figma のブレンドモードに近い結果が出るので、Web配色の検討には加法混色モードを使おう。
よくある質問
Q: 減法混色の結果は実際の塗料と同じになる？
Kubelka-Munk理論に基づく近似値なので、傾向は一致するが完全に同じにはならない。実際の塗料は顔料の粒子径、バインダーの屈折率、隠蔽力などの影響を受ける。このツールは「だいたいこんな色になる」という事前確認に使い、最終的な色合わせは試し塗りで行うのが確実。
Q: マンセル近似値はどの程度正確？
Munsell Renotation Dataの代表格子点からの逆距離加重補間で算出している。主要色相の標準的な明度・彩度では実用十分な精度だが、高彩度の中間色相（7.5YR等）では誤差が大きくなることがある。より正確な変換が必要な場合はHEX⇄マンセル変換ツールを併用してほしい。
Q: 入力したデータはサーバーに送信される？
一切送信されない。すべての計算はブラウザ内（クライアントサイド）で完結する。色情報は外部に送られず、ブラウザを閉じれば消える。
Q: 4色以上の混色はできる？
現在は最大4色まで対応。5色以上の混色は実務でもあまり使われず、色がどんどん暗く濁るため非推奨。4色あれば「ベース色 + 調整色2色 + 白」で大半の調色ニーズをカバーできる。
まとめ
色混合シミュレーターは、塗料やインクの減法混色を事前に確認できる数少ないWebツール。Kubelka-Munk理論ベースの計算で、RGB平均では再現できない「絵の具を混ぜたときのリアルな色」がわかる。
HEX/RGB/マンセル近似値の同時表示で、デザインワークから塗装の調色まで幅広く使える。
色の変換が気になった人はHEX⇄マンセル⇄日塗工 変換ツールも試してみて。
不具合や要望があれば、X (@MahiroMemo)から気軽に教えて。