An AI Built the CHROMA — Laboratory of Colour Perception Website — Here’s the Design Trick That Makes It Work

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

Discover a Digital Lab Where Color Is an Instrument

Imagine stepping into a virtual museum crafted entirely by artificial intelligence, dedicated to the nuances of color perception. This site, conceived as a white-walled gallery, transforms every element—from wall textures to interactive instruments—into a living experiment. Its pièce de résistance is a dynamic hue controller that continuously drifts through the color wheel, enabling visitors to see how hue shifts influence perception in real time. This signature motion embodies the core idea: the room itself is a perpetual instrument, revealing the fluidity of color through clever digital design.

Design Mechanics Behind the Color Laboratory

The site’s visual harmony hinges on a carefully curated palette rooted in perceptually uniform color spaces like OKLCH, ensuring that all elements—from background wash to interface text—respond seamlessly to hue variations. The typography employs condensed, museum-style fonts that evoke a sense of precision, while monochrome labels and numerals reinforce the scientific aesthetic. Interactive tools—such as a draggable color mesh, a ramp comparator, and a spectral ribbon—are built using custom JavaScript functions that translate complex color math into smooth, responsive visuals. These instruments are linked through a shared hue variable, which is manipulated via user interaction or automatic drift, creating an immersive experience that feels both educational and tactile. The entire interface is designed to feel like a real scientific instrument, with staggered reveals, keyboard accessibility, and a feedback system that allows copying color stops directly from the spectral ribbon.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 08 of 175, “chroma”):
CHROMA — a laboratory of color. Fiction: an institute that studies color perception. Aesthetic: white gallery walls; instruments as exhibits; the site’s accent hue slowly cycles through OKLCH hue space (CSS custom property animated by JS, ~90s loop) so the whole page drifts through moods. Fonts: big-shoulders-display (display condensed), chivo-mono (labels). SIGNATURE interactive instruments, each a framed exhibit: (1) gradient-mesh generator — canvas radial mesh from 5 draggable color points; (2) OKLCH ramp builder — pick a hue, see scientifically-even lightness ramps vs naive HSL (side-by-side proof); (3) simultaneous-contrast demo — identical swatch on two grounds, slider to verify; (4) spectrum ribbon — full-width interpolation band with copyable stops. Huge exhibit numerals (01 02 03), museum wall-label captions, copy buttons that flash the value. Unforgettable: the page itself is an instrument you play with color.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/chroma/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

The Creative Pipeline: Building, Critiquing, and Refining

The development followed a three-stage process: first, constructing the core interactive instruments grounded in scientific color models; second, applying rigorous critique to ensure visual coherence, accessibility, and educational clarity; and finally, certifying the design with an art director’s approval to balance experimental innovation with usability. Throughout, a detailed guide steered the integration of color math, interface dynamics, and accessibility features, culminating in a site that is as precise as it is engaging.

The full build notes live in the room’s design guide.

Experience the Color Lab Yourself

Visit the live AI-crafted CHROMA exhibition to explore the full suite of interactive instruments. Dive into all 175 sites in the hub for a journey through digital color experiments that blend science, art, and technology.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 4: FOLIUM — A Living Herbarium
• Room 1: HELIOS — Live Solar Observatory · Station HLX-1

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI