colorize

Choose 2-4 colors beyond neutrals and assign each a semantic purpose, such as green for success or blue for info. Apply a 60/30/10 distribution with one dominant color, a secondary, and a high-contrast accent rather than coloring everything.

Use OKLCH color values because equal lightness steps look perceptually equal, making harmonious scales easy to generate. Verify all text meets 4.5:1 contrast and UI components meet 3:1, and never rely on color alone to convey meaning.

OKLCH is perceptually uniform, so equal numeric steps in lightness appear equal to the human eye. This makes it far easier to generate consistent tints and shades for backgrounds, badges, and states than with HSL or raw hex values.

Yes, the workflow explicitly gathers existing brand colors, target audience, and tone before planning. If that context cannot be inferred from the codebase, it stops and asks clarifying questions rather than guessing a generic palette.

Avoid rainbow palettes, random color without semantic meaning, gray text on colored backgrounds, pure black or white surfaces, and default purple-blue gradients. Also never violate WCAG contrast or use color as the only state indicator.