How this works in your browser
The base colour is converted into HSL, where lightness, saturation and hue can each be manipulated independently, and the scale is generated by stepping one of those dimensions across ten positions. Shades and Tints ramp lightness, Tones pull saturation toward grey, and the hue-based modes rotate around the colour wheel by fixed angles: 180 degrees for complementary, small offsets for analogous, and 120-degree intervals for triadic. Each resulting shade then has its contrast against white computed using the WCAG luminance formula, which is what drives the pass and fail badges. The 50 to 900 numbering follows the Tailwind convention so the export drops straight into existing config.
Color Palette Generator vs. typical online calculators
| Feature | Color Palette Generator (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses Color Palette Generator
Building a design system
Generate a full colour scale from a single brand colour.
Tailwind configuration
Produce shades matching the 50 to 900 convention for a custom colour.
Choosing accessible button colours
Identify which shades can safely carry white text.
Exploring accent colours
Find complementary or analogous partners for an existing brand colour.
How to use Color Palette Generator
- 1
Open the Colour Palette Generator
Go to tools.slaytic.com and open the Color Palette Generator. No sign-up or account required.
- 2
Pick your base colour
Use your brand colour as the anchor for the scale.
- 3
Choose a harmony mode
Shades or Tints for a single-colour UI scale, or a hue-shifting mode for accents.
- 4
Check the contrast badges
See at a glance which shades can carry white text.
- 5
Export as CSS variables
Download the scale as custom properties ready to paste into a stylesheet.
Frequently asked questions
What do the shade numbers (50-900) mean?
They follow the same scale popularized by Tailwind CSS: 50 is the lightest step and 900 is the darkest/most saturated, so you can drop the palette straight into a Tailwind config or any design system using that convention.
Is shade 900 always my exact base color?
Yes, in every harmony mode except Tints (where it's reversed) and Analogous/Triadic (which distribute hues instead of a single lightness ramp), 900 is your base color exactly - the rest of the scale is generated relative to it.
What does the Pass/Fail badge check?
Whether white text placed on that shade's background would meet the WCAG AA contrast minimum (4.5:1) for normal text - useful for knowing which shades are safe to use as a button or banner background with light text on top.
What's the difference between the harmony modes?
Shades and Tints both ramp lightness toward or away from your base color; Tones pulls saturation toward gray; Complementary, Analogous and Triadic instead shift the hue - to the opposite color, to neighboring hues, or to two evenly-spaced partner hues.
Can I export the palette?
Yes, Export downloads a small CSS file defining each shade as a --color-50 through --color-900 custom property, ready to paste into a stylesheet.
Why does a design system need ten shades of one colour?
Because a single brand colour cannot do every job. You need something light enough for a subtle background, mid tones for borders and secondary text, and dark enough for a button that carries white text. Generating them from one base keeps the whole range coherent rather than accumulating unrelated approximations.
How do I use the Pass and Fail badges?
They tell you which shades can carry white text at the WCAG AA minimum, which in practice tells you where your buttons and banners can sit. Typically the darker end passes and the lighter end does not, so light shades take dark text and dark shades take light text.
Which harmony mode should I pick?
Shades or Tints when you want a single-colour scale for a UI palette, which is the usual case. Complementary for an accent that contrasts strongly with your brand colour. Analogous for a harmonious secondary. Triadic when you need three distinct colours that still relate to one another.
Are generated shades as good as hand-picked ones?
They are a strong starting point and internally consistent, which is more than most hand-assembled palettes manage. What an algorithm cannot judge is that perceived lightness differs between hues, so a yellow and a blue at the same nominal step will not feel equally light. Expect to nudge a shade or two by eye.