// Color system studio
Pick an accent.
Get a clean web blueprint.
Choose an accent on the wheel, pick a harmony, and review it in light and dark. Export a w-blueprint.md with tokens, CSS variables, and WCAG checks for AI, designers, or developers.
01Base color
Drag the wheel to set the accent hue, or pick a preset.
02Style
Pick a harmony. The accent family updates instantly.
03Customize
Fine-tune with sliders, or switch to a related accent.
#E5533D
#3DCFE5
HEX #E5533DOKLCH 0.64 / 0.185 / 31
04Review
The panel on the right renders your palette as a mini site. Check the WCAG badges for both light and dark.
05Ship
Export the blueprint, or save it to your account.
w-blueprint.md includes tokens, CSS variables, WCAG checks, and a JSON block for AI and developers.