Color Palette Generator
Generate an 11-step color scale from one HEX color.
Click a swatch to copy its HEX value. The swatch marked Base is your color, unchanged.
| Step | HEX | RGB | HSL | Contrast with white text | Contrast with black text |
|---|
AA = at least 4.5:1, the WCAG minimum for normal-size text. The ratios describe text on that swatch; they don’t make the palette accessible on their own.
Build a scale of tints and shades from one brand color
Color Palette Generator takes a single HEX color and works out an 11-step scale from very light to very dark, named 50, 100, 200 and so on up to 950. Those names are just a common convention in design systems; the colors are calculated here, not copied from any framework’s palette.
Your own color is kept exactly as entered and marked Base. The scale is recalculated in your browser whenever the color changes, and the same input always gives the same result.
How to generate a color palette
- Enter a 3- or 6-digit HEX code in “Base color (HEX)”, such as #013580 or #f80, or choose one with the color swatch next to it.
- Type a name in “Name for CSS variables”, for example brand or accent.
- Click any swatch to copy its HEX value.
- Use “Copy all HEX values” for a plain list, or “Copy CSS variables” for a ready-made :root block.
- Check the table for RGB, HSL and contrast figures.
Reading the swatches and the table
- Base: your color sits at the step whose usual lightness is closest to its own, so a pale color may land on 200 and a deep one on 800 rather than 500.
- CSS variables run from --brand-50 to --brand-950 inside a :root block, using your name lower-cased with spaces turned into hyphens.
- Contrast with white text / black text: the WCAG 2 contrast ratio for that text on the swatch, with an AA badge at 4.5:1 or more.
- Swatch labels are drawn in white or black, whichever contrasts more with that step.
Where a generated scale saves time
- Starting a design system: get light backgrounds, borders, hover states and dark text tones from one brand color.
- Theming a site or app with CSS custom properties you can paste straight into a stylesheet.
- Adding an accent color that needs the same range of steps as the colors you already use.
How the steps are calculated
Lightness spacing in OKLCH
The scale is built in OKLCH, a form of the OKLab color space designed by Björn Ottosson in which equal changes in lightness look roughly equal to the eye — unlike HSL, where yellow and blue at equal “lightness” look very different. Lighter steps are spread between your color and a near-white, and darker ones between your color and a deep shade, following fixed reference lightness values.
What happens to hue and colorfulness
Hue stays the same as your base on every step. Chroma, or colorfulness, follows a fixed profile — low for the palest tints, highest around the middle, tapering for the darkest shades — scaled to match your color, with an upper limit so a pale base doesn’t produce harsh mid-tones. Chroma is reduced only where a color would fall outside what screens can show (sRGB). A grey base gives a neutral grey scale.
Color Palette Generator: common questions
Will this give me the same colors as Tailwind?
No. It shares the 50–950 step names, but every color is calculated from your base. Treat the scale as a starting point and adjust steps by eye.
Why isn’t my color at step 500?
The base goes to the step whose reference lightness is nearest its own, so light colors land nearer 50 and dark ones nearer 950. The other steps keep the proportions of the reference scale between your color and the two ends.
Does an AA badge mean the palette is accessible?
Not on its own. It only says that white or black text of normal size on that swatch reaches 4.5:1. Other pairings, such as two steps used together, need their own check, and accessibility involves much more than color.
Can I start from an RGB or HSL value?
The text field accepts HEX only. Convert your value first with the Color Picker, which also lets you sample a color from an image.
Is anything saved or sent?
No. The palette is calculated on your device and nothing is stored, so copy the values before leaving. More developer tools work the same way.