A step-by-step journey through Color Lab, from first pixel to fully applied site theme.
Color Lab Story Arc
This is not a random color picker. It is a deterministic pipeline: image input, palette extraction, semantic token mapping, text-group orchestration, overlay contrast tuning, then optional site-wide apply.
Read this page top to bottom like a guided studio session. You will see what the controls do, why they exist, and how they fit together.
Step 01
You choose a preset wallpaper or upload your own. The background updates immediately so the page feels alive before any heavy work begins.
Uploads render from object URLs right away, then the extraction pipeline catches up in the background.
Step 02
Color Lab extracts a 16-color palette and computes image stats (sharpness + variance) to understand what kind of visual environment your text must survive in.
Results are cached in local storage by wallpaper hash so returning to an image is instant.
Step 03
The palette is mapped to semantic theme tokens: background, surface, text, muted, border, accent, and accent contrast.
Foundation tokens stay dark for readability, but they tint dynamically by palette and harmony mode.
Step 04
Text color groups (Title, Heading 1/2, Body 1/2, UI) are generated and can be tuned by harmony swatches, matte, saturation, and brightness controls.
Use All mode for global moves or select only specific groups for surgical edits.
Step 05
Overlay color and opacity adapt to image character. Sharp scenes can carry bolder overlays, while soft or solid scenes stay lighter.
Auto opacity responds to image stats and wallpaper focus; manual mode locks your chosen value.
Step 06
When the system feels right, Apply to Site snapshots theme + text tokens and rehydrates them on non-Color-Lab pages.
Reset Theme removes both the applied override and saved playground state so you can restart cleanly.
Each panel has one job. Together they form a closed-loop color direction workflow.
Switch harmony families (dominant, analogous, complementary, triadic, tetradic, split-complementary, square, monochromatic, compound, double split-complementary) and toggle OKLCH vs HSL mapping.
Adjust saturation, matte, and focus. Focus also influences auto overlay opacity targets.
Pick overlay swatches directly, tune opacity, and optionally Match Overlay to the last chosen text/harmony swatch.
Control swatch saturation, swatch matte, and brightness for text groups without mutating overlay color.
These are designed to expose behavior quality, not just make pretty screenshots.
Goal: Verify harmony logic keeps text groups distinct when palette hues are clustered.
Do this: Pick a wallpaper with limited hue variety. Switch Theme harmony from dominant to square, then to double split-complementary.
Watch for: Text groups should still diverge visually and Theme Preview text tokens should all change.
What it proves: The system can synthesize useful hue spread instead of collapsing into same-color text groups.
Goal: Validate opacity automation responds to image conditions, not random movement.
Do this: Set overlay mode to auto. Move Wallpaper focus from low to high and observe overlay opacity. Test a solid/flat wallpaper versus a detailed one.
Watch for: Flat imagery trends toward ~0–5%, blurry/busy toward ~5–15%, sharp toward ~10–27%.
What it proves: Contrast scaffolding adapts to visual entropy and sharpness rather than fixed opacity.
Goal: Confirm Text controls and Overlay controls stay decoupled.
Do this: Set overlay color manually. Toggle All mode on. Move text brightness and swatch matte aggressively.
Watch for: Text colors change; overlay color does not. Manual overlay opacity remains fixed.
What it proves: Control boundaries are intentional, preventing accidental cross-domain regressions.
Goal: Ensure the generated theme behaves as a reusable system, not only as a local demo.
Do this: Apply to Site in Color Lab, visit Home and Projects, then hit Reset Theme on a non-Color-Lab page.
Watch for: Custom tokens appear site-wide, then both override and saved playground state are removed on reset.
What it proves: Color Lab output is production-oriented and reversible.
Goal: Check that special mode does not destabilize normal interaction models.
Do this: Set Text Brightness to 20, toggle psychedelic mode, then select text swatches and change harmony.
Watch for: Q*Bert appears only while enabled; swatches and harmony remain interactive.
What it proves: Edge-case mode stays bounded and does not hijack core editing loops.
Start with a wallpaper you care about, push harmony until the mood clicks, then finalize text and overlay behavior for legibility under pressure.