Active users
Last 30 days
48.2K
↑ 12.4% · HealthyResearch-informed color system
Generate color contracts that remain useful after the mood board.
Build independent light and dark systems in OKLCH. Resolve reference, semantic, and component tokens. Audit interaction states and data palettes. Keep 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.
Light profile
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 · Component states
Validate the state machine, not only the resting screenshot.
The same component token contract is exercised across default, hover, pressed, focus-visible, disabled, invalid, read-only, checked, and semantic-message states.
04 · 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.
Palette diagnostics
Perceptual-distance checks are diagnostic thresholds, not WCAG conformance criteria.
| Diagnostic | Observed | Threshold | Result |
|---|
Color-vision simulations use fixed matrix approximations at full severity. They expose likely collisions but do not certify usability or replace testing with representative users.
05 · 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.
0 of 30 local profile slots used.
Current versus saved profile
Compare resolved token values before loading or replacing a profile.
Choose Compare on a saved profile.
06 · 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.
Token dependency architecture
Values resolve inward. Components never consume palette values directly.
07 · Principles
The theory behind the controls.
These rules convert color research into implementation constraints.
Separate the channels
RecommendedHue distinguishes categories. Lightness carries hierarchy and order. Chroma controls emphasis.
Generate modes independently
NormativeLight and dark appearances need separate surfaces, borders, text, chroma, and elevation decisions.
Semantics before harmony
NormativeA harmonious palette can still fail contrast, focus, states, forced colors, and category discrimination.
Avoid false boundaries
RecommendedOrdered data needs perceptually ordered scales. Rainbow scales can distort magnitude and create artificial transitions.
Never encode with color alone
NormativePair color with text, iconography, shape, position, pattern, or numeric labels.
Audit in context
NormativeContrast ratios are a floor. Review grayscale, common color-vision deficiencies, real devices, and task performance.
08 · Handbook projection
Trace guidance to implementation and tests.
The SPA is an executable projection. The handbook remains canonical. Every exported profile carries the guidance IDs that constrained generation and validation.
Guidance coverage registry
Status separates normative requirements from recommendations and experimental diagnostics.
| Guidance ID | Status | Implementation | Verification |
|---|
09 · 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.
Stable token groups, aliases, type inheritance, and portable exchange syntax.
Multi-context resolution for light, dark, high-contrast, brand, and other orthogonal modifiers.