Home▸Chemistry & Materials▸Chromophores: Why Dyes and Pigments Have Color

🎨 Chromophores: Why Dyes and Pigments Have Color

Interactive 3D chromophore lab: stretch a conjugated polyene chain, watch the HOMO-LUMO gap shrink and the absorption peak shift toward red (bathochromic shift), and see the molecule's own visible color update live as the complement of what it absorbs. Compare a soluble dye bonded to fiber against an insoluble pigment dispersed as solid particles.

Chemistry & Materials3DAdvanced60 FPS

Details

CategoryChemistry & Materials

RenderingThree.js · WebGL

DifficultyAdvanced

Target FPS60

ControlsConjugated double bonds slider (2-18) rebuilds the polyene backbone and recomputes the HOMO-LUMO gap, absorption wavelength and live absorption-spectrum plot; Dye / Pigment buttons toggle the surrounding context between a fiber the chromophore bonds into and a resin block with dispersed solid particles; Reset restores the default chain length and dye mode.

Three.jsChemistryChromophoresDyes and PigmentsHOMO-LUMOMolecular OrbitalsAbsorption Spectrum

Related simulations

Adhesive & Coating Cure Chemistry: Epoxy Crosslinking vs. Cyanoacrylate PolymerizationWatch two real adhesive-curing mechanisms side by side: two-part epoxy resin crosslinking…

Advanced Chemistry: Reaction Kinetics & the Arrhenius EquationWatch reactant molecules move by thermal motion inside a 3D vessel and convert into product…

Analytical Chemistry ExplainedSwitch between a UV-Vis spectroscopy beam and a chromatography column to see how… ⊞ All 479 in Chemistry & Materials →

⚙ Under the hood

Interactive 3D chromophore lab built on the free-electron (particle-in-a-box) model: stretch a conjugated polyene chain from 2 to 18 double bonds and watch the HOMO-LUMO gap shrink, the absorption peak shift toward red (bathochromic shift) and the molecule's own visible color update live as the complement of the wavelength it absorbs. A dye/pigment toggle contrasts a chromophore chemically bonded into fiber against the same chromophore as an insoluble solid particle dispersed in a medium.

Three.jsChemistryChromophoresDyes and PigmentsHOMO-LUMOMolecular OrbitalsAbsorption Spectrum

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install