#B95ED911 colors
Rich Lilac
Create monochromatic palettes from any color. Export ready for Tailwind, Radix UI, and Ant Design.
Base color
Naming pattern
Shade count
Click any swatch to copy HEX5 to 15 shades
Export code
11 colors, named rich-lilac.
Format
Color values
variables.css
/* CSS Variables */
:root {
--rich-lilac-50: #FFD4FF;
--rich-lilac-100: #FFB9FF;
--rich-lilac-200: #FF9FFF;
--rich-lilac-300: #E486FF;
--rich-lilac-400: #C96CE8;
--rich-lilac-500: #AE54CE;
--rich-lilac-600: #943AB4;
--rich-lilac-700: #7A209B;
--rich-lilac-800: #600082;
--rich-lilac-900: #47006A;
--rich-lilac-950: #2F0053;
}
In use
A sample screen painted only with this scale.
New inFree shipping
Spring drop
Twelve pieces, one colour story. Out now while stock lasts.
Revenue · 7d+12%
$48.2k
- Action · 500
- Canvas · 50
- Tint · 100
- Lines · 200
- Muted · 700
- Text · 950
How it works
Build a full tint and shade scale from one base color, then copy it straight into Tailwind, Radix, or plain CSS variables.
How the scale is built
Pick a base hex and the generator walks its lightness axis, holding hue and saturation steady. That keeps every step recognisably the same color instead of drifting toward grey or shifting hue the way naive HSL interpolation does.
Choose 5 to 12 steps depending on how much room your design system needs. Nine is the usual answer: it maps cleanly onto Tailwind's 50 through 900 and leaves you two dark steps for text on tinted backgrounds.
Picking a naming pattern
The 50 to 900 pattern matches Tailwind and most component libraries, so a generated scale drops into an existing config without renaming anything. The 1 to 10 pattern suits Radix style scales where step number maps to a semantic role. The 10 to 100 pattern is for teams who already number tokens that way.
Frequently asked
4 questions people ask about the color palette generator.
1How many shades should a color scale have?
Nine is the practical default. It gives you two light steps for backgrounds, a mid step for the brand color itself, and enough dark steps for accessible text. Fewer than five and you run out of contrast; more than twelve and adjacent steps stop being visually distinguishable.
2Can I export the palette to Tailwind?
Yes. Pick the 50 to 900 naming pattern and copy the generated block into the theme section of your Tailwind config. The keys already match Tailwind's scale, so nothing needs renaming.
3Why do my light shades look washed out?
Very light steps lose saturation fast because there is little room left between the color and pure white. Raise the saturation of your base color before generating, or drop the step count so the lightest shade does not sit as close to white.
4Is this palette generator free?
Yes, completely. There is no signup, no export limit, and no watermark. Everything runs in your browser.