Key insights
- Treat the picker as a decision tool, not a gradient with a slider — every choice cascades into the rest of the UI.
- Offer OKLCH next to hex. Hex is for machines; OKLCH's lightness, chroma, and hue let you change one number and get a predictable shade.
- Give the picker memory: recent swatches and saved palettes put your last five picks one tap away instead of re-hunting each time.
- Show a live contrast ratio at pick time, not in review — a badge that flips red to green kills failing pairs before they ship.
- Preview alpha over a checkerboard on both light and dark backgrounds. Transparency lies on a white canvas, so check it before you commit.
- Turn one pick into a system: generate tints and shades from a single hue to produce ten tokens from one decision.
Do / Don't
- Do: Expose human-readable formats like OKLCH so one value maps to a predictable shade
- Do: Surface recent swatches and saved palettes so past picks stay one tap away
- Do: Validate contrast live while picking, with a badge that reads red or green
- Don't: Preview alpha only on white — a checkerboard reveals the true transparency
- Don't: Ship a bare gradient-and-slider picker with no memory, contrast check, or palette output
