About this tool
Color palette generator, explained
A color palette generator turns one color into a set of colors that work together, plus a full scale of tints and shades for an interface. Pick a harmony, lock the colors you like and generate the rest, check every text pair for contrast, then export the palette as code or a PNG.
How to use it
- 1Pick a harmony at the top (Analogous, Mono, Complementary, Split, Triadic or Square) and click Generate, or press Space, until you like what you see.
- 2Click a color to change it with the picker, and lock it to keep it when you generate again. Add colors with + or remove them, from two to eight.
- 3Click the shades icon on a color to see its scale from 50 to 950, and read the Contrast table to see which text and background pairs reach AA or AAA.
- 4Choose an export (CSS, Tailwind v4, Tailwind v3, SCSS or JSON) and HEX, RGB or HSL values, then Copy code, download the file or Download PNG. Copy link saves the palette in the address.
How it works
How the palette is built
Harmonies are placed on the color wheel around a base color. Analogous adds hues 24° and 48° on either side, Complementary the hue 180° away, Split the hues 150° and 210° away, Triadic 120° and 240°, and Square 90°, 180° and 270°. Mono keeps the hue and steps the lightness up and down by 16 points. Lightness and saturation also vary from color to color, so a palette has light and dark members.
Generate keeps every locked color, and the first locked color becomes the base for the others. With nothing locked, a new base is drawn with your browser's cryptographic random generator, with a saturation between 55% and 85% and a lightness between 42% and 58%.
The shade scale has eleven steps, 50 to 950, as in Tailwind CSS, and it is anchored on your color: the step whose target lightness is closest to your color's keeps your exact hex. The targets run from 97% lightness at 50 to 14% at 950. Steps lighter than yours are spread evenly up to 97%, darker ones down to 12%, and very light tints use 90% of your saturation so they stay soft. The starting color, #3451f5, sits at 500.
The contrast table puts each palette color as text on every other color, on white and on near-black (#111111), using the WCAG 2 formula. Ratios are judged before rounding: AAA from 7:1, AA from 4.5:1, AA Large from 3:1, otherwise Fail. The labels on each swatch use white or near-black, whichever contrasts more.
The exported code names the palette colors color-1, color-2 and so on, and the selected color's scale brand-50 to brand-950. The PNG is a 1600 × 1000 sheet of both.
When to use it
Ways people use it
Starting a design system
Turn the one color a logo gives you into accents and shades for backgrounds, borders, buttons and hover states.
Tailwind and CSS themes
Export an @theme block for Tailwind v4, a config for Tailwind v3 or plain CSS variables, with the 50 to 950 scale already named the way Tailwind expects.
Readable text pairs
The contrast table shows at a glance which colors can carry text on which backgrounds, before anything reaches a mockup.
Keeping the brand color fixed
Lock your brand color and generate until the other colors suit it. The locked color stays the base, so every new set is built around it.
FAQ
Questions people ask
How do I create a color palette from one color?
Keep the hue of your color and vary its lightness to get tints and shades for backgrounds, borders and text. Then pick accents from the color wheel, such as the complementary color. Here, lock your color and generate in the harmony you want.
What do the numbers 50 to 950 mean in a color palette?
They name the steps of a scale from lightest to darkest. 500 is near the middle, lower numbers are tints used for backgrounds, and higher numbers are shades used for text and pressed states. The convention was popularized by design systems such as Material Design and Tailwind CSS.
What is a complementary color?
The color directly opposite yours on the color wheel, 180° away in hue. Blue and orange are complementary. Side by side they create strong contrast, which is why a complementary color works for elements that need attention.
What contrast ratio do I need for text?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises those to 7:1 and 4.5:1. Check the exact pair you use, since the same color can pass on white and fail on a light tint.
Should I use hex, RGB or HSL for colors?
All three describe the same colors. Hex is compact and the most common in design files. HSL is the easiest to build palettes with, because lightness is its own number you can raise or lower while the hue stays the same. The exports here come in any of the three.