Color Palette Generator

A color palette generator saves you from guessing which colors belong together. Our free Color Palette Generator builds palettes three ways: from a base color using classic color harmonies, from the main colors in a photo or logo you choose, or at random, with any color you like locked in place while you press the space bar for fresh ideas. Harmonies are calculated in OKLCH, a perceptual color space, so colors in the same palette look evenly bright, and you can switch to the familiar HSL color wheel at any time. Every color shows its HEX, RGB, HSL and OKLCH values plus a WCAG contrast badge for black or white text. Preview the palette on a sample page, check it with an approximate color-blindness simulation, then export CSS variables, Tailwind, SCSS, JSON or a PNG swatch. Everything runs in your browser, so images never leave your device.

How to use the Color palette

1. 1 Choose where the palette comes fromPick From a color to start with a brand or favorite color, From an image to pull colors out of a photo, logo or screenshot, or Random to explore ideas you would not have thought of.
2. 2 Pick a harmony or an imageWith a base color, choose complementary, analogous, triadic, split-complementary, tetradic, monochromatic or shades and tints. With an image, choose how many colors to extract, from five to eight.
3. 3 Lock what you like and regenerateHover a swatch and click the lock icon to keep it. Press the space bar or Generate and only the unlocked colors change. You can also edit, reorder, add or remove colors.
4. 4 Check contrast and the page previewEach color shows whether black or white text reads better on it and the WCAG ratio. The preview places the palette on a simple page with a heading, buttons and a card, in light or dark mode.
5. 5 Export or shareName the palette, then copy or download CSS custom properties, a Tailwind v4 or v3 snippet, SCSS variables or JSON. Download a PNG swatch for a mood board, or copy the share link to send the exact palette to someone else.

What a color palette generator does

A palette is a small, deliberate set of colors used together across a website, an app, a brand or a product range. Choosing one by eye is slow, because colors interact: a blue that looks calm on its own can feel cold next to one orange and lively next to another. A generator speeds this up by applying rules that designers have relied on for a long time, and by showing you the result straight away.

This tool covers the three most common starting points. If you already have a brand color, color harmonies build the rest of the palette around it. If you have a photo, a product shot or an existing logo, image extraction finds the colors that dominate it. If you are starting from nothing, random palettes give you material to react to, and locks let you keep the parts that work while the rest keeps changing. Whichever route you take, the palette ends up in the same place, ready to check, preview and export.

Color harmonies explained

Color harmonies are positions on the color wheel that tend to look balanced together. Each one starts from your base color and turns the hue by a set angle. The generator adds a lighter or darker version of the base where a harmony has fewer than five colors, so you always get enough to cover backgrounds, text and accents.

• Complementary: the base and the hue directly opposite it, 180 degrees away. High contrast and energetic, best used with one color dominant and the other as an accent.
• Analogous: neighbors on the wheel, 30 and 60 degrees either side of the base. Calm and cohesive, common in nature photography and wellness brands.
• Triadic: three hues spaced 120 degrees apart. Vivid and balanced, though it usually works best when one color leads.
• Split-complementary: the base plus the two hues either side of its complement, at 150 and 210 degrees. Most of the punch of a complementary scheme with less tension.
• Tetradic (square): four hues 90 degrees apart. Rich and varied, and the hardest to balance, so keep most of them for small details.
• Monochromatic: one hue at five lightness levels. Safe, elegant and easy to keep accessible.
• Shades and tints: an eleven-step scale from very light to very dark, numbered 50 to 950 like Tailwind CSS, with your base color placed on the nearest step.

Why OKLCH gives more even palettes than HSL

Most color wheels in design apps use HSL: hue, saturation and lightness. HSL is simple, but its lightness value does not match what people actually see. At the same HSL lightness, pure yellow looks far brighter than pure blue. Rotate a color around the HSL wheel and the brightness jumps around, which is why HSL harmonies often give one color that glows and another that looks muddy.

OKLCH is a newer, perceptual color space published by Björn Ottosson in 2020 and now part of the CSS Color Level 4 specification. L is perceived lightness, C is chroma, or colorfulness, and H is hue. Because L tracks how bright a color looks, turning the hue while holding L and C gives colors that feel equally bright. The generator works in OKLCH by default and converts the result back to standard sRGB HEX values that work everywhere.

Some OKLCH combinations do not exist on ordinary screens, such as a very colorful light blue. When that happens, the tool lowers the chroma just enough to fit the sRGB range while keeping lightness and hue, which is the same basic idea browsers use. If you prefer the classic wheel, switch the color model to HSL and the same harmonies are calculated the traditional way.

Pulling a palette from a photo or logo

Image extraction is useful when the colors already exist somewhere: a product photo for an online store, a hero image for a landing page, a client logo you have to build a website around, or a photo of an interior for a beauty salon or restaurant brand. The tool reads the image in your browser, shrinks it to about 120 pixels on the longest side and ignores transparent areas.

It then groups similar pixels with k-means clustering, measuring the distance between colors in OKLab so that groups match how people perceive difference. Each group becomes one color, and the palette is ordered from the most common color to the least. Choose between five and eight colors. Small but important details, like a thin red logo mark on a large white page, can merge into a bigger group, so try a higher count or add the missing color by hand if something you expected is not there. The result is the same each time you extract from the same image, because the clustering uses a fixed starting point.

Checking contrast and accessibility

A palette that looks good in a row of swatches can still fail once text sits on it. For each color, the generator works out whether black or white text has more contrast and shows the ratio using the WCAG formula. The badge reads AAA at 7:1 or more, AA at 4.5:1, AA large at 3:1, which is acceptable only for large text, and Fail below that. Ratios are rounded down, never up, so a borderline color is never shown as passing.

The page preview goes a step further by placing the palette in context. It uses your lightest color as the background in light mode, or your darkest in dark mode, the most colorful ones for buttons and badges, and another palette color for a card surface. If your darkest color does not reach 4.5:1 against the background, the preview switches the body text to plain black or white and tells you, so you know the palette needs a darker text color. To test any two specific colors against each other, with every WCAG level listed, use our free Color Converter and Contrast Checker.

Color-blindness simulation

Some people see colors differently, and red-green color vision deficiency is the most common form. The Vision menu shows the palette and preview as they might appear with protanopia, deuteranopia or tritanopia, using the widely used Machado, Oliveira and Fernandes model from 2009 at full severity, plus a grayscale view. Treat it as an approximation: real color vision varies a lot between people, and many have a milder form than the simulation shows.

Use the simulation to spot colors that become hard to tell apart, such as a red error state and a green success state. The fix is rarely to drop a color. Instead, make sure important differences also come from lightness, icons, labels or patterns. The values, contrast ratios and exports always use your real colors, whatever view you pick.

Exporting and sharing your palette

Give the palette a short name, such as brand or accent, and the exports use it. CSS custom properties work in any modern website. The Tailwind v4 snippet adds colors through the theme block in your CSS file, while the v3 snippet goes in tailwind.config.js. SCSS variables and a map suit Sass projects, and JSON includes every color in HEX, RGB, HSL and OKLCH for design tokens or scripts. The PNG swatch is handy for mood boards, client approvals and presentations. For a gradient built from these colors, paste them into our CSS Gradient Generator.

The share link stores the colors after the # sign in the address. Browsers do not send that part to the server, so the palette is not saved anywhere by us. Anyone who opens the link sees the same colors, which makes it an easy way to hand a palette to a developer or a client. Nothing is stored between visits otherwise, so copy the link or export before you close the tab.

Examples you can copy

:root {
  --brand-1: #d1d03b;
  --brand-2: #8ee177;
  --brand-3: #1de9b6;
  --brand-4: #00e3eb;
  --brand-5: #78d5ff;
}

.button-primary {
  background: var(--brand-3);
  color: #000;
}

@import "tailwindcss";

@theme {
  --color-brand-50: #f0f5ff;
  --color-brand-500: #4d7fff;
  --color-brand-600: #3366ff;
  --color-brand-900: #0a227b;
}

<!-- then use bg-brand-600, text-brand-50 and so on -->

Common mistakes to avoid

Frequently asked questions