Shade scale
About the Color Palette Generator
This tool builds a color scheme and a full shade scale from one base color. The schemes follow classic color-wheel rules in HSL: complementary (the opposite hue), analogous (neighbors 30° apart), triadic (three hues 120° apart), split complementary, tetradic (four hues 90° apart) and monochromatic (one hue at different lightness).
The shade scale runs from 50 to 950, the same naming Tailwind and most design systems use, with lightness spread evenly and saturation eased at the extremes so the palest and darkest steps don't look neon. Every swatch is labeled in black or white text, whichever reads better on it. You can export the result as CSS custom properties, a Tailwind colors block or JSON.
Everything runs in your browser; the base color accepts hex, rgb(), hsl() or a named color.
How to use it
- Enter a base color, pick one, or press Random.
- Choose a scheme.
- Click any swatch to copy its hex code.
- Pick an export format and copy the code.
Examples
- Complementary palette for amber: amber with its blue-violet complement and a full amber scale.
- Triadic palette for a brand blue: three balanced hues for charts or illustrations.
- Monochromatic teal: one hue at five lightness levels for UI states.
Common questions
Which shade should I use for text?
Usually 700 or darker on a white background and 200 or lighter on a dark one. Check the exact pair with the contrast checker, since some hues, like yellow, stay light even at 600.
Why do the scheme colors look uneven in brightness?
HSL keeps lightness constant, but the eye sees yellow and green as brighter than blue at the same value. Adjust individual colors to taste.
Can I use the scale with Tailwind?
Yes. Paste the Tailwind export under theme.extend.colors and rename brand.
Related tools
- Color Contrast Checker: check text and background pairs from the palette.
- CSS Gradient Generator: blend two palette colors into a gradient.
- HEX to RGB Color Converter: convert any swatch to rgb() or hsl().