Build a shade scale from one hex in ten minutes
A worked tutorial: turn a single brand hex into a 50–950 scale with even perceptual steps, and name the stops your UI actually needs.
Generate in OKLCH, not in hex math
Enter your brand hex and generate the scale in OKLCH mode. Equal numeric steps in OKLCH look like equal visual steps; equal steps in RGB clump in the middle and jump at the ends. This single choice is the difference between a scale that looks hand-tuned and one that looks auto-generated.
Take the full 50–950 range even if you think you need three stops. You need three stops today; the hover state, the disabled tint, and the dark-mode surface arrive next quarter, and regenerating mid-project shifts every existing color.
Name the stops by job
A scale without roles is a rainbow with numbers. Assign the jobs now: 50–100 for page and card grounds, 200–300 for borders and dividers, 500–600 for the primary action fill, 700–800 for hover and text-on-light, 900+ for ink and dark-mode grounds. Write these into tokens immediately — roles are what stop the next designer from eyeballing a new gray.
Check the action stop against white (and the ink stop against the 100 ground) as you assign. A scale whose 600 fails white text is a scale that will betray you in QA; pick the passing neighbor now.
Export it into the stack
Copy the scale as CSS variables for plain stylesheets or as a Tailwind v4 theme block if that is the stack — same stops, both formats, no re-typing. Keep the OKLCH values where the toolchain supports them; they survive future adjustments (a global saturation shift, a dark-mode derivation) far better than hex.
One maintenance rule: the scale is append-only. Never edit a middle stop in place — every surface using it shifts silently. Add stops or rename roles, but 500 stays 500.
Tip
Print the scale (yes, on paper) and squint: steps should march evenly with no sudden jumps. Your eyes catch bad spacing faster than any number.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.