› Additive & Subtractive Color Mixing Back
光・色彩

Additive & Subtractive Color Mixing

Use RGB sliders to explore additive light mixing and CMY sliders for subtractive pigment mixing in real time. Visualize Venn diagrams, HSL conversion, and spectral distributions simultaneously.

Color Mixing Mode

Three Primary Colors of Light (RGB)

赤 R
緑 G
青 B
#FF6400
橙系
色相 H
— °
彩度 S
— %
明度 L
— %
輝度（相対）
— %
Venn
Theory & Key Formulas
RGB → 輝度：$Y = 0.2126R + 0.7152G + 0.0722B$
CMY ↔ RGB：$C = 1 - R/255$
HSL変換：$H = \arctan(...)$, $S, L$ は最大/最小値from 計算
補色：$R_{comp} = 255 - R$ 等

🎓 Learn Color Mixing Through Conversation

🙋
光 三原色はRGB（赤・緑・青）で、混ぜると白になるって習いました。でも絵 具 三原色は赤・青・黄で混ぜると黒になるって と、なんで違うんか？
🎓
光（加法混色）は「出てくる光を足す」from 混ぜるほど明るくなる。絵具（減法混色）は「光を吸収して残りを反射」するfrom 混ぜるほど吸収が増えて暗くなる。印刷 三原色はCyan（赤を吸収）・Magenta（緑を吸収）・イエロー（青を吸収）という が正確で、小学校で習う「赤・青・黄」は近似的な表現なんだ。
🙋
テレビ 画面とか、すごく近くで見ると赤・緑・青 点が並んでるって聞きました。それがRGBなんね。でも、なんで緑 輝度 重みが一番大きいんか（Y = 0.21R + 0.72G + 0.07B）？
🎓
人間 目 錐体細胞 感度が緑に最も敏感だfrom 。3種類 錐体（L・M・S型） うち、M型（緑感度）が最も数が多く感度 ピークが緑付近にある。こ 感度分布を「視感度関数 V(λ)」と言って、これに基づいて輝度計算 RGB重みが決まっている。だfrom 緑LEDが暗くても画面 明るさに最も貢献するんだ。
🙋
補色ってデザInでよく使いよね。赤 補色はCyanって言ってましたが、色相環で「正反対」 色ってことか？
🎓
そう。RGB値なら「255-R, 255-G, 255-B」が補色。RGBで混ぜると必ず(255,255,255)、つまり白になる。デザInで補色を使う はコンTrussトが最大になるfrom 視認性が高い。ただし補色を同じ面積で並べると「ぶつかって見える（ハレーション）」効果がある で、実務では彩度を少し下げて使うことが多い。
🙋
CAEや工学的な文脈で色彩が使われることはWithか？
🎓
大いにある！FEMやCFD 結果可視化で「コンターColor」を使う——Stressが高い所を赤、低い所を青で示すやつだ。こ 色 マッPinグには「ColorMap（Jet、Viridis等）」が使われる。ただしJetは人間 知覚が非線形で誤解を招きやすく、近年はViridis ような知覚均一ColorMapが推奨されている。色差ΔE 計算はMesh結果 比較品質評価にも関係するんだ。

Frequently Asked Questions

What is the difference between additive and subtractive color mixing?
Additive color mixing is mixing by overlapping light, with RGB (Red, Green, Blue) as the three primary colors. Mixing all at maximum yields white. It is used in displays, LED lighting, and stage lighting. Subtractive color mixing is mixing by light absorption of objects, with CMY (Cyan, Magenta, Yellow) as the three primary colors. Mixing all yields black. It is used in printing, paints, and filters. Printers adopt the CMYK method, adding black (K) to CMY.
What is the difference between HSL and HSV?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are similar color spaces but differ in definition. In HSL, L=100% is always white, and L=50% gives the most vivid color. In HSV, even at V=100%, colors range from pure to white depending on saturation. Photoshop's 'Hue/Saturation' dialog is HSL-like, while the 'HSB' display is HSV-like. CSS's hsl() function uses HSL.
Why do computer displays use the sRGB color space?
sRGB is a color space standardized by Microsoft and HP in 1996, corresponding to the ITU-R BT.709 standard. By having each device (monitor, printer, camera) support the same color space, colors appear consistent (color management). Today, wider gamut spaces like Display P3 and Adobe RGB are also common. In CAE visualization tools, color space settings during output are important, as appearance varies on monitors and projectors.
What is color difference ΔE?
It quantifies the perceptual distance between two colors, defined as the distance in the CIE L*a*b* color space (perceptually uniform color space). ΔE < 1 is indistinguishable to the human eye, ΔE = 1–3 is a subtle difference, and ΔE > 5 is a clear difference. It is widely used in quality control for paints, textiles, and printing. It can also be applied to CAE result comparison, with research quantifying differences between multiple mesh solutions as ΔE.
What is a good colormap for CAE visualization?
The traditionally used Jet (blue → green → red) has nonlinear perception, causing false contours not present in the data and difficulty for colorblind users. Currently recommended are 'perceptually uniform colormaps' like Viridis (blue → green → yellow) and Plasma (purple → orange → yellow), which retain information even when converted to grayscale. These are available by default in Matplotlib.

What is Additive Color Mixing?

Additive Color Mixing is a fundamental topic in engineering and applied physics. This interactive simulator lets you explore the key behaviors and relationships by directly manipulating parameters and observing real-time results.

By combining numerical computation with visual feedback, the simulator bridges the gap between abstract theory and physical intuition — making it an effective learning tool for students and a rapid-verification tool for practicing engineers.

Physical Model & Key Equations

The simulator is based on the governing equations behind Additive & Subtractive Color Mixing. Understanding these equations is key to interpreting the results correctly.

$$$','$$$

Each parameter in the equations corresponds to a slider in the control panel. Moving a slider changes the equation's solution in real time, helping you build a direct connection between mathematical expressions and physical behavior.

Real-World Applications

Engineering Design: The concepts behind Additive & Subtractive Color Mixing are applied across mechanical, structural, electrical, and fluid engineering disciplines. This tool provides a quick way to estimate design parameters and sensitivity before committing to full CAE analysis.

Education & Research: Widely used in engineering curricula to connect theory with numerical computation. Also serves as a first-pass validation tool in research settings.

CAE Workflow Integration: Before running finite element (FEM) or computational fluid dynamics (CFD) simulations, engineers use simplified models like this to establish physical scale, identify dominant parameters, and define realistic boundary conditions.

Common Misconceptions and Points of Caution

Model assumptions: The mathematical model used here relies on simplifying assumptions such as linearity, homogeneity, and isotropy. Always verify that your real system satisfies these assumptions before applying results directly to design decisions.

Units and scale: Many calculation errors arise from unit conversion mistakes or order-of-magnitude errors. Pay close attention to the units shown next to each parameter input.

Validating results: Always sanity-check simulator output against physical intuition or hand calculations. If a result seems unexpected, review your input parameters or verify with an independent method.