Metamerism Interactive Demo

Explore how different light spectra can produce the same colour perception

🔬 What is Metamerism?

Metamerism is the phenomenon where two different spectral power distributions (light sources with different wavelength compositions) can produce identical colour perception in the human eye. This happens because our eyes have only three types of colour receptors (L, M, S cones), but light can contain infinite spectral variations.

Think of it like this: Just as different musical instruments can play the same note, different light spectra can produce the same colour. This demo lets you see it happening in real-time!

📱 Interface Overview

Left Panel - Image & Controls

The left side shows a house with windows and provides all the colour controls.

🌡️ CCT Slider (1800K - 6500K)

Controls colour temperature from warm (1800K, candlelight) to cool (6500K, daylight). Moving this slider generates a blackbody radiation spectrum and automatically updates RGB values.

🎨 RGB Sliders (0-255 each)

Red, Green, and Blue channel controls. Moving these generates a spectrum from gaussian wavelength peaks and automatically updates the CCT slider. All controls are bidirectional!

💡 User Light Colour Picker

Quick colour selection tool. Click to choose any colour directly. Updates both RGB sliders and CCT slider automatically.

🏠 House Paint Colour Picker

Sets the colour of the house walls (non-window areas). Only visible when not in User mode. Default is a nice brown wood tone.

Action Buttons

Right Panel - Visualizations & Lamp Selection

💡 Lamp Buttons (Left Column)

8 preset light sources with scientifically accurate spectra:

  • User - Custom solid colour mode
  • Inc - Incandescent (2856K)
  • Hal - Halogen (3200K)
  • Flu - Fluorescent (4100K)
  • LED - LED (5000K)
  • Day - Daylight (6500K)
  • Grow - Enhanced blue + red for plants
  • Plant - Chlorophyll absorption optimized

Active lamp shows a pulsing green indicator light!

📊 Cone Response Diagram (Top)

Shows the activation of your three cone types:

  • L (Long) - Red cone, peaks ~560nm
  • M (Medium) - Green cone, peaks ~530nm
  • S (Short) - Blue cone, peaks ~420nm

Values shown as percentages. This is what your brain "sees"!

📈 SPD Chart (Bottom)

Spectral Power Distribution showing light intensity at each wavelength (380-780nm in 5nm steps). Y-axis shows normalized intensity (0.0-1.0). Each coloured bar represents a 5nm wavelength band.

Statistics Display (Bottom)

Stat Description
RGB Δ (Change) Shows how much RGB values changed during Apply Shift. Format: +12, -5, +8. Persists until you touch any control.
L / M / S Cone response percentages (same as diagram). Easy-to-read exact numbers.
Wavelength Peak wavelength of current spectrum in nanometers.
CCT Correlated Colour Temperature in Kelvin (K).

🎯 How to Use

Basic Colour Exploration

  1. 1Move the CCT slider left and right
    • Watch the RGB sliders update automatically
    • See the SPD chart change shape
    • Notice how cone responses shift
    • Windows change colour in real-time
  2. 2Try moving an RGB slider
    • CCT slider updates to match
    • SPD changes to a new spectrum
    • Everything stays synchronized!
  3. 3Click different lamp buttons
    • See scientifically accurate spectra
    • Compare smooth blackbody (Inc, Hal) vs peaked (Flu, Grow)
    • Notice green pulsing indicator on active lamp

🌟 The Main Event: Demonstrating Metamerism

This is what makes the demo special! Follow these steps:

  1. 1Set any colour you like (using CCT, RGB, or lamp buttons)
  2. 2Make sure "Lock Perception" is checked ✓ (it's ON by default)
  3. 3Click "APPLY SHIFT"
  4. 4Watch carefully:
    • 🔒 Cone bars stay FROZEN - same L/M/S percentages
    • 📊 SPD morphs - completely different spectral shape
    • 🎨 RGB values change - sliders animate to new positions
    • 🏠 Window colour shifts - different RGB during animation
    • 📈 Delta box shows - how much RGB changed (e.g., +20, -15, +5)
  5. 5The magic: Even though the SPD and RGB changed, the cone response stayed the same! This proves different light sources can look identical to your eyes.

⚠️ What You're Seeing

When cones are locked but SPD/RGB change, you're witnessing metamerism. The colour looks the same (cones unchanged) but the physical light is completely different (SPD changed). This is why:

  • Clothes can look different colours under different lighting
  • Paint samples from the store don't match at home
  • Photos on your phone look different on your computer
  • Professional photographers care so much about "colour temperature"

Window Selection

Click on any of the 11 windows to zoom in and see it individually. The active window gets an orange border. Click the same window again (or press "↺ WIN") to return to the full house view.

This lets you see fine colour details and experiment with different window/house paint colour combinations.

Advanced: Lock Perception OFF

Uncheck "Lock Perception" and click "APPLY SHIFT" to see normal colour change:

🔬 Technical Details

Spectral Power Distribution (SPD)

The SPD shows how much light energy is present at each wavelength from 380nm (violet) to 780nm (red). The demo uses 81 values at 5nm intervals. The Y-axis shows normalized intensity (0.0 to 1.0), where 1.0 is the peak of that particular spectrum.

Why Normalized?

Normalizing lets us compare spectral shapes regardless of absolute brightness. A dim LED and bright LED have the same normalized SPD if they're the same colour temperature - only the physical power differs.

Cone Response Calculation

Your eyes have three cone types (L, M, S) that respond to different wavelength ranges. The demo:

  1. Takes the current SPD (81 wavelength values)
  2. Multiplies by standard L/M/S sensitivity curves
  3. Sums up the total response for each cone type
  4. Normalizes to percentages (should sum to ~100%)
  5. Displays as cone-shaped bars

Metamerism Search Algorithm

When you click "APPLY SHIFT" with Lock ON, the demo runs findMetamericMatch():

  1. Target: Current L/M/S cone response percentages
  2. Search: Generate 100 random spectral variations
    • Random temperature blackbody curves (2000-3000K range)
    • Add random peaks at different wavelengths
    • Normalize each candidate
  3. Score: Calculate error = |L_new - L_target| + |M_new - M_target| + |S_new - S_target|
  4. Result: Return spectrum with lowest error (best match)
  5. Animate: Smoothly transition from old SPD to new metameric SPD

Why Random Search Works

Metamerism is common! Many different spectral combinations produce similar cone responses. Random search explores diverse possibilities and typically finds good matches (error <1%) within 100 iterations. Each time you click APPLY SHIFT, you see a different "flavor" of the same colour.

Bidirectional Control

All controls update each other through the SPD as the "source of truth":

Circular update prevention uses st.updatingFromCCT and st.updatingFromRGB flags.

RGB ↔ CCT Conversion

The demo estimates CCT from RGB using a "blueness ratio" algorithm:

💡 Tips & Tricks

🎨 For Artists

  • Compare how colours look under different lamps
  • See why "white balance" matters in photography
  • Understand why paint looks different in-store vs at home

🔬 For Scientists

  • Explore CIE colour matching functions
  • See Planck's blackbody radiation in action
  • Understand trichromacy and colour perception

🌱 For Horticulturists

  • Compare Grow vs Plant lamp spectra
  • See chlorophyll absorption peaks (430, 662nm)
  • Understand why grow lights look purple

🎓 For Educators

  • Visual proof of metamerism phenomenon
  • Real-time spectral analysis
  • Interactive colour science demonstration

Experiment Ideas

  1. Extreme CCTs: Try 1800K vs 6500K - massive spectral differences!
  2. Repeated Shifts: Click APPLY SHIFT multiple times - see different metameric matches
  3. Compare Deltas: Note RGB Δ values - same perception, wildly different numbers
  4. Lamp Comparison: Switch between Inc (smooth) and Flu (peaked) - very different SPDs
  5. Window Tour: Click through all 11 windows to see colour detail
  6. Random Colours: Hit the dice 🎲 button repeatedly for surprising combinations

❓ Frequently Asked Questions

Why do cones move slightly when locked?

Small numerical errors (<1%) in the metamerism search. The algorithm finds the best match among 100 candidates, but perfect matches are rare. The variation is imperceptible to human vision.

Why does each APPLY SHIFT give different results?

The algorithm uses random search to explore different spectral possibilities. Each run finds a different metameric match - demonstrating that many spectra can produce the same colour!

What's the difference between Cone Diagram and L/M/S Stats?

They show identical data. The diagram is visual/intuitive, the stats provide exact numbers for reference.

Why doesn't CCT change when locked?

CCT estimates colour temperature based on appearance. Metameric colours maintain the same temperature appearance even with different spectra.

Can I see all possible metameric matches?

No - there are infinite possibilities! The demo shows one random example each time. This variety itself demonstrates how common metamerism is.

Why do Plant and Grow lamps look purple?

They have strong blue (430-480nm) and red (630-680nm) peaks with minimal green. Plants absorb blue and red light for photosynthesis but reflect green - so efficient grow lights skip green wavelengths.

What does "normalized intensity" mean?

Each spectrum is scaled so its peak equals 1.0. This lets you compare spectral shapes regardless of absolute brightness. It's dimensionless - just a ratio.

🎓 Educational Background

Why Metamerism Matters

Metamerism explains many everyday phenomena:

The Science

Humans have trichromatic vision - three cone types. But visible light spans ~400nm of wavelengths. This creates a massive "dimensionality reduction" problem: infinite spectral combinations map to just three cone signals.

Mathematically, this guarantees that metamerism exists. Any three-dimensional colour space (like RGB or LMS) must have multiple spectral inputs producing identical outputs. This demo lets you explore this fascinating property of human vision!

🧠 The Big Picture

Colour isn't a property of light - it's a property of perception. Two physically different light sources can produce identical neural signals in your brain. The colour you "see" is your brain's interpretation of cone signals, not the actual spectral composition of light.

This demo proves it: when cones are locked but spectra change, you're literally seeing different physics produce the same perception. Welcome to the weird and wonderful world of colour science!

🔗 Additional Resources

Ready to Explore?

Open the metamerism demo and start experimenting with light, colour, and perception!