Recipe: Brand color palette builder

Generate a cohesive 12-shade palette from a single brand color using perceptually uniform lightness steps.

Step 1 — Pick your anchor

Start with one hex value that represents your brand. For Meridian we use #8B5CF6 as the anchor. This sits at shade 500 in the final scale.

Step 2 — Convert to OKLCH

Convert your hex to OKLCH. Keep chroma and hue constant. Vary only lightness from 0.05 to 0.95 across 12 stops. This guarantees perceptual uniformity — every step feels like the same distance.

Step 3 — Map to Tailwind

Assign each stop to a Tailwind shade (50–950). Export as CSS custom properties so every component can reference --brand-500 directly.

Step 4 — Validate contrast

Check every shade against white and black text for WCAG AA compliance. Shades 50–400 should pass with black text; 600–950 should pass with white text. Adjust lightness boundaries if needed.

Step 5 — Ship the CSS

Drop the custom properties into your global stylesheet. Extend Tailwind's config so bg-brand-500 works everywhere. Done — one source of truth, zero drift.

Pro tip: Keep chroma below 0.15 for neutrals and above 0.12 for vibrant brand colors. This prevents muddy darks and washed-out lights.