Active users
Last 30 days
48.2K
↑ 12.4% · HealthyResearch-informed color system
Generate color profiles that remain useful after the mood board.
Build separate light and dark palettes in OKLCH. Map color to semantic roles. Audit contrast. Test components and data graphics. Save only the profiles you choose.
01 · Generator
Define intent before selecting color.
The profile controls brand expression. The harmony controls relationships. The contrast target constrains the resulting semantic tokens.
Seed scale
Perceptually ordered lightness with controlled chroma.
Harmony candidates
Starting relationships, not automatic semantic assignments.
02 · Playground
Inspect the system in context.
A palette is not a row of swatches. This playground applies the active profile to navigation, cards, forms, states, charts, and hierarchy.
Portfolio overview
Signal first. Decoration remains subordinate.
Automation coverage
Core workflows
78%
↑ 4.8% · On trackEngagement trend
Hue separates series. Lightness communicates magnitude.
Form controls
Surface, border, text, and focus must remain distinct.
Semantic states
Text labels prevent color-only meaning.
✓ Healthy · All systems operational
! Warning · Capacity above 80%
× Error · Deployment failed
i Info · Maintenance Saturday
03 · Data palettes
Match palette family to data semantics.
Sequential scales encode magnitude. Diverging scales encode movement around a meaningful midpoint. Qualitative scales separate unordered categories.
Sequential
A single hue family with ordered lightness.
Diverging
Two directions around a neutral midpoint.
Qualitative
Distinct categories with redundant labels.
Semantic states
Familiar associations, independently contrast-adjusted.
04 · Profiles
Store only what you choose.
Named profiles and the optional remembered workspace stay in this browser. No network service is used.
Preference storage
Explicit local persistence with portable exports.
05 · Tokens
Move from color values to system contracts.
Export semantic CSS custom properties or a structured JSON profile. Components should consume roles, not raw palette steps.
06 · Principles
The theory behind the controls.
These rules convert color research into implementation constraints.
Separate the channels
Hue distinguishes categories. Lightness carries hierarchy and order. Chroma controls emphasis.
Generate modes independently
Light and dark appearances need separate surfaces, borders, text, chroma, and elevation decisions.
Semantics before harmony
A harmonious palette can still fail contrast, focus, states, forced colors, and category discrimination.
Avoid false boundaries
Ordered data needs perceptually ordered scales. Rainbow scales can distort magnitude and create artificial transitions.
Never encode with color alone
Pair color with text, iconography, shape, position, pattern, or numeric labels.
Audit in context
Contrast ratios are a floor. Review grayscale, common color-vision deficiencies, real devices, and task performance.
07 · Evidence
Primary and implementation sources.
The application is derived from the Visual Design Research System v1.3 and current standards guidance.
OKLab and OKLCH color spaces and modern CSS color definitions.
Contrast, use of color, focus, target size, reflow, and user preference requirements.
Perceptual ordering, lightness progression, and problems with rainbow scales.
A continuous color map optimized with color-vision deficiency in mind.
Sequential, diverging, and qualitative palette families for mapped and quantitative data.
Implementation precedent for perceptually ordered, grayscale-readable continuous scales.
System appearance detection and adaptive presentation.