Advanced editing below keeps direct Background, Text, HEX, OKLCH, lock, scale, Role check, and Custom pair controls.
Every contrast result below is measured against this target.
Context contrast
This canvas uses only the confirmed Background and Text. Validate the reading foundation before adding color roles.
Color roles
8 roles with at most 7 independent palettes. Regular reuses Neutral; keep Secondary off without a clear use case.
Brand color
Generated scale
Derive 50 → 950 from the active Brand role. Click a token to copy and apply it to Colors.
Usage labels are recommendations. Validate against the current target. W / K show contrast against White / Black.
Role checks
Check whether each enabled role works on the fixed Background and whether its recommended foreground meets the current target. Regular shares Neutral results.
Keeps each semantic Hue, adjusts Lightness first, and reduces Chroma only when needed. Locked roles are preserved.
Website tokens
Purpose-named colors for surfaces, content, actions, fields, feedback, and accents. Light and Dark resolve the same names.
Light and Dark use the same token names; values differ per theme.
Custom pairs
Optional foreground / background snapshots. They never overwrite the generated website tokens.
The generated website system already covers these combinations; the pairs below stay editable snapshots for export.
Legacy starter-pair projection kept for the compatibility window.