How to generate a UI color palette from anchor colors

1. Pick the first anchor

   "Color 1" is required — pass a hex value like `#6366f1` or `#fc3` (the # is optional). This is the main hue the palette will be built around.

2. Optionally add anchors 2 and 3

   "Color 2" and "Color 3" let you guide secondary and tertiary hues. Leave them blank to let the tool derive complementary tones; provide hex values to lock specific anchors.

3. Press Run

   Result returns seedHexes (the validated anchors) and palettes — multiple ready-to-use palettes (e.g. UI surfaces, accents, tinted text) generated by varying lightness and saturation around your anchors.

4. Use in design tools

   Copy any hex from the result into Figma, Tailwind config, or your design tokens. Pair this tool with wcag-contrast-checker-online to confirm the foreground/background pairs you've picked are accessible.