TITLE: CHROMA LAB
PROMPT: Create 'CHROMA LAB', a color-theory laboratory on an off-white bench (#F5F4F0) with precise mono labels. Two source wells hold draggable color swatches (styled native color inputs plus hex fields); mixing animates droplets from both wells into a central beaker that swirls into the blended result. A canvas color wheel plots both sources and computes harmony sets — complementary, split-complementary, triadic — as nodes connected by arcs. Interactions: drag on the wheel or type hex values; harmony tabs re-plot; clicking any swatch copies its hex with a toast; a live contrast checker awards AA/AAA badges for the pair. Educational and delightful.
DESCRIPTION: A precise color-theory workbench on an off-white lab bench with hairline mono labels. Two source wells (A and B) each hold a swatch backed by a native color input and a validated hex field with live RGB readouts and a hue-strip scale. Between them, a glass beaker receives falling droplets from whichever well changed and swirls (conic overlay) into the 50/50 sRGB blend. The centerpiece is a canvas HSL wheel: hue ring drawn in 2° segments with saturation rings, A and B plotted as labeled draggable nodes linked by a dashed chord, and harmony sets computed from A — complementary (180°), split-complementary (±150/210°) and triadic (+120/240°) — rendered as nodes connected by arcs with a click-to-copy list showing hex and hue angle. A live WCAG contrast checker previews A-on-B text and awards AA (4.5:1) and AAA (7:1) badges with the exact ratio.
TECHNIQUES: Full color science in vanilla JS: hex/RGB/HSL conversions, WCAG relative luminance with sRGB gamma expansion and contrast ratio. The wheel is Canvas 2D — segmented hue annulus, polar node mapping (angle=hue, radius=saturation), dashed harmony arcs and chords recomputed on every change, hit-testing for node dragging via pointer capture. Beaker droplets are DOM elements with randomized fall durations; the fluid cross-fades through a CSS transition and a rotating conic-gradient swirl in overlay blend. Copy uses the async Clipboard API with an execCommand fallback and toast confirmation. Native color inputs are overlaid invisibly on the swatches for accessible OS pickers; hex inputs validate and self-heal. prefers-reduced-motion disables droplets and swirl; system-ui + Courier New only; responsive grid from 360px to 4K; entirely offline.
INTERACTION: Drag node A or B around the wheel (or click empty wheel space to set A); open a swatch for the native picker or type hex values; watch droplets fall and the beaker swirl to the blend; switch harmony tabs to re-plot complementary / split-complementary / triadic sets; click any swatch or harmony chip to copy its hex with a toast; read the live AA/AAA verdict for the A-on-B pair.