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.
Temperature Trace Heat Reactive Sticker – Color-Changing Touch Wall Decal for Sensory Play & DIY Crafts – Thermochromic Panel Reacts at 27-33°C for Classrooms, Playrooms & Creative Spaces
- Interactive Heat-Sensitive Design: Reacts to 27–33°C touch temperature
- Color-Changing Heat Patterns: Reveals black patterns when touched
- Customizable DIY Size: 10×12 inches, easy to cut and shape
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Mini Artist Color Wheel Packaged
- Color Harmony Illustrations: Shows various color harmonies
- Color Schemes: Includes complementary and split complementary
- Color Definitions: Defines primary and secondary colors
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
DGK Color Tools DKK 5" x 7" Set of 2 White Balance and Color Calibration Charts with 12% and 18% Gray – Includes Frame Stand and User Guide
- Accurate Color Calibration: Provides reliable reference for consistent image quality
- Professional Image Quality: Optimizes color balance and exposure for videos
- Compact and Portable: Easy to transport for on-the-go calibration
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
