Color Palette Generator

About the Color Palette Generator

The Color Palette Generator turns one base color into a set of colors that work together. Pick a harmony, such as analogous, complementary or triadic, choose how many colors you want, and copy the result as CSS variables, SCSS, a Tailwind theme, JSON or a plain list of hex codes.

It is useful when you start a website, an app screen, a slide deck or a brand board and have one color to build on. The "Shades (50 to 900)" option creates a full ten-step scale in the style of Tailwind and Material, ready to drop into a design system.

You can also drop in a photo and get its main colors, sorted by how much of the picture they cover. Colors are calculated in OKLCH, a color space that matches how people see lightness, so the steps look even. Everything runs in your browser and images never leave your device.

How to use it

1. Pick a base colorUse the color box or type any CSS color, such as #2b59ff or rgb(22, 160, 133). Random base picks one for you.
2. Choose a harmonyAnalogous, monochromatic, complementary, split complementary, triadic, tetradic, square, or shades from 50 to 900.
3. Set the number of colorsMove the Colors slider from 3 to 10. Shades always give ten steps.
4. Copy what you needClick a swatch to copy its hex code, or pick an export format and use Copy or Download.
5. Or start from a photoDrop an image into "Palette from an image" to pull out its main colors. The Colors slider then sets how many to find.

Key features

Examples

One base color, different harmonies

With the default base #2B59FF and 5 colors:

Analogous colors sit 24 degrees apart on the color wheel, with the base in the middle. Complementary and triadic palettes start with the base and the colors opposite it. Once every hue is used, the tool repeats them lighter and then darker, which is where #6A95FF (a lighter base) and #1020CD (a darker base) come from.

Exporting a palette

The triadic palette above as CSS custom properties:

:root {
  --color-1: #2b59ff;
  --color-2: #d4001e;
  --color-3: #008928;
  --color-4: #6a95ff;
  --color-5: #ff5a54;
}

SCSS gives $color-1: #2b59ff; and so on, JSON gives {"1": "#2b59ff", …}, and the hex list has one code per line.

A shade scale for a design system

Choose "Shades (50 to 900)" and the Tailwind export gives:

@theme {
  --color-brand-50: #f1f5ff;
  --color-brand-100: #dde8ff;
  --color-brand-200: #bcd1ff;
  --color-brand-300: #91b2ff;
  --color-brand-400: #6792ff;
  --color-brand-500: #4272ff;
  --color-brand-600: #2954eb;
  --color-brand-700: #1a3cc7;
  --color-brand-800: #0d24a4;
  --color-brand-900: #060482;
}

In Tailwind v4 this gives you classes like bg-brand-50 and text-brand-700. The scale keeps the hue of your base color, but the 500 step is not your exact base. Each step has a fixed lightness so different brand colors produce scales that line up.

Colors from a picture

An image that is half #2B59FF, 30% #C6F24E and 20% #FF6A4D gives exactly those three colors, in that order. Ask for 10 colors and you still get three, because the picture has no more. With a real photo, each swatch is the average of a group of similar pixels.

Tips

• Start with analogous colors for calm, low-risk designs, and save complementary or triadic palettes for accents such as buttons, badges and charts.
• Use the colors of a palette in different amounts. A common split is 60% for a neutral background, 30% for the main color and 10% for an accent.
• Check text on every palette color with the Color Picker's contrast check. Harmonies keep the base lightness, so some colors may be too light for text on white.
• For a design system, generate the 50 to 900 shades once for each brand color and keep the export in your repository, so everyone uses the same values.
• When pulling colors from a photo, crop it to the part you like first. Large areas of sky or background otherwise take over the palette.

Common mistakes and limits

• Expecting the exact base color in every paletteAnalogous and the wheel-based harmonies include your base. Monochromatic and shades rebuild the color at fixed lightness steps, so your exact code may not appear.
• Using every color at full strengthFive saturated colors side by side compete for attention. Pick one main color and use the rest as accents or light tints.
• Judging a palette on one screenColors look different on other displays and in dark mode. Check on a phone and a second monitor before you commit.
• Expecting the same photo palette every timeThe clustering starts from random points, so a busy photo can give slightly different colors on each run. Flat graphics with clear areas give the same result.
• Trusting color alone to carry meaningRed and green look alike to many people with color vision deficiency. Pair colors with icons, labels or patterns.

Frequently asked questions