Color Palette Generator

How to use the Color Palette Generator

1. Choose a mode such as Analogous, Pastel or Monochromatic, then press Space or Generate.
2. Lock the colors you want to keep, add colors with the + buttons, drag to reorder, and click any color to fine-tune it.
3. Preview the palette on a sample website, check contrast, then save it, share the link or export it as CSS, Tailwind, JSON or PNG.

Color Palette Generator features

• 2 to 10 colors: insert blended colors, drag to reorder, remove
• 15 generation modes, from analogous and triadic to pastel, earthy and gradient
• Lock colors; the harmony is built around your first locked color
• Adjust hue, saturation, brightness and temperature of the whole palette
• Preview on a sample website and check WCAG contrast for every pair
• Color blindness simulation for protanopia, deuteranopia, tritanopia and achromatopsia
• Import from HEX lists, palette links or an image
• Save named palettes in your browser, share a link, export as CSS, SCSS, Tailwind, JSON, SVG or PNG

Create beautiful color palettes in seconds

This color palette generator helps you find color schemes that work, whether you are designing a website, an app, a brand, a presentation or an illustration. Press Space to generate a new palette, lock the colors you love, and keep generating until the rest fall into place. Every color can be fine-tuned, every change can be undone, and your palettes are saved in your browser so you can come back to them any time.

Palettes can have anywhere from 2 to 10 colors. Insert a new color between two others with the + button, drag colors to reorder them, and remove the ones you do not need.

15 ways to generate a palette

Choose a generation mode to steer the results, or leave it on Auto to get a different kind of palette each time.

Color harmony modes

Style modes

Pastel gives soft, light colors; Vibrant gives saturated, energetic ones; Muted gives dusty, sophisticated tones; Earthy gives warm browns, greens and ochres; Dark gives deep colors for dark themes; Gradient gives a smooth progression from one color to another; and Random ignores the rules completely.

Why the palettes look balanced

Many palette generators work in RGB or HSL, where a yellow and a blue with the same "lightness" look completely different in brightness. This generator works in OKLCH, a perceptual color space where equal numbers look equal to the human eye. That keeps colors in a palette visually balanced, so no single color jumps out unless you want it to. When you lock a color, the harmony is built around the first locked color, so your brand color always stays at the heart of the scheme.

Fine-tune every color

• Edit a color: click it to open the editor, change it by code, by slider or by picking one of its tints and shades.
• Adjust the whole palette: shift hue, saturation, brightness or temperature for every unlocked color at once.
• Arrange: sort by hue, from light to dark or dark to light, by saturation, reverse the order or shuffle.
• Undo: press Ctrl + Z to step back through your changes.

Preview your palette before you use it

Colors look different in a real layout than as stripes. Switch to Preview to see your palette applied to a sample website, with backgrounds, text, buttons and cards. The Contrast view checks every pair of colors in the palette against WCAG contrast requirements, so you know which combinations are safe for text. You can also simulate protanopia, deuteranopia, tritanopia and achromatopsia to make sure the palette works for people with color vision deficiency.

Import, save, share and export

• Import a palette by pasting HEX codes, CSS colors or a palette link (including coolors.co links), or pull colors from a photo.
• Save palettes with a name. They are stored in your browser on this device and never uploaded.
• Share a link that opens your exact palette in any browser.
• Export as CSS variables, SCSS, a Tailwind config, Tailwind v4 @theme, JSON, a JS array, SVG or a PNG image.

Tips for building a usable color palette

• Follow the 60-30-10 rule. Use one color for about 60% of the design (usually a neutral background), a second for 30% and an accent for the remaining 10%.
• Include neutrals. Most real interfaces need a very light and a very dark color for backgrounds and text. Add them to your palette or lock a near-white and a near-black.
• Start from what you have. Lock your brand color first, or extract colors from a photo with the Image Color Extractor, then generate around them.
• Build scales for UI. Once you have your main colors, turn each one into a 50–950 scale with the Tailwind Palette Generator.
• Check text contrast. Use the Contrast view or the Contrast Checker before you commit to text and background pairs.

Keyboard shortcuts

Color Palette Generator: frequently asked questions