Color Palette Generator Free color scheme generator

How to use this color palette generator

A color palette generator saves you from guessing. Instead of picking five colors one by one and hoping they work together, you start from one color you already like and let a rule from color theory place the others. This tool does that, then goes two steps further: it tells you which combinations are readable, and it hands you the code.

1. Type or pick a base color. It accepts #3D8BFF, 3d8bff, the short form #38f or rgb(61, 139, 255).
2. Choose a harmony and the number of colors, from 3 to 8.
3. Lock the swatches you want to keep and press Space (or Generate) to shuffle the rest. Undo brings back the previous version.
4. Click any hex code to copy it, or use the pencil to fine-tune a single swatch.
5. Check the contrast table, then export as CSS variables, Tailwind, SCSS, JSON or a PNG image, or copy a link that reopens the same palette.

Color harmonies, explained simply

Every harmony is a pattern of positions on the color wheel. That is all a color scheme generator really does: it rotates the hue of your base color by fixed angles and keeps the saturation and lightness close to the original.

• Analogous - neighbors on the wheel, about 30 degrees apart. Calm and natural; works well for backgrounds and illustrations.
• Complementary - the color opposite your base, 180 degrees away. Maximum contrast in hue, so use the second color sparingly for calls to action.
• Split complementary - instead of the exact opposite, the two colors on either side of it (150 and 210 degrees). Almost as lively as complementary, easier to balance.
• Triadic - three colors 120 degrees apart. Bright and playful; let one color lead and keep the other two small.
• Tetradic - four colors in a square (90 degrees apart) or a rectangle (60 and 180 degrees). Rich, but needs a clear dominant color.
• Monochrome and tints + shades - one hue in several lightness steps. The safest choice for interfaces, and the basis for most design system scales.

The 60-30-10 rule

Interior designers have used the 60-30-10 rule for decades and it works on screens too. About 60 percent of a layout is a dominant, usually quiet color (backgrounds, large surfaces). About 30 percent is a secondary color (cards, sections, navigation). The last 10 percent is an accent reserved for what you want people to notice: buttons, links, highlights. A five-color palette maps neatly to this: one or two neutrals for the 60, one supporting color for the 30, one accent for the 10, and one dark color for text.

Building a UI palette that holds up

A good color combination generator gets you a starting point, not a finished design system. To turn a palette into something you can build with:

• Give every color a role. Background, surface, text, primary, accent. Switch the export names to roles to start from that structure.
• Add a neutral. Most harmonies are colorful. Real interfaces need a near-white and a near-black with a hint of your brand hue.
• Plan for states. Hover, focus, disabled and error each need a color. Tints + shades mode gives you lighter and darker steps of one hue for this.
• Do not rely on color alone. Pair color with text, icons or patterns so people with color vision deficiency get the same message.

Check contrast before you ship

The contrast checker uses the WCAG 2.x formula: it converts each color to relative luminance and divides the lighter one plus 0.05 by the darker one plus 0.05. The result runs from 1:1 (no contrast) to 21:1 (black on white). The thresholds to remember:

• 4.5:1 for normal text to pass level AA, and 7:1 for AAA.
• 3:1 for large text (24px regular or about 18.7px bold) at AA, and 4.5:1 at AAA.
• 3:1 for user interface components and meaningful graphics, such as input borders and icons.

The table under the checker scores every pair in your palette at once, so you can see which colors are safe for text and which should stay decorative. For each swatch it also shows whether black or white text has the higher ratio.

Getting a palette from a photo

Upload, drop or paste an image and the tool shrinks it, then groups similar pixels with k-means clustering in the CIELAB color space, which is closer to how people perceive color differences than plain RGB. Each cluster becomes one swatch, sorted by how much of the image it covers. The image is processed in your browser and never leaves your device. Locked swatches stay in place, so you can keep your brand color and fill the rest from a mood photo.

Using the palette in code

CSS custom properties work everywhere: paste the :root block into your stylesheet and use var(--color-1). The Tailwind v3 export goes into theme.extend.colors in your config; the Tailwind v4 export is an @theme block for your main CSS file. SCSS variables and JSON are there for older build setups and design token tools. The PNG export is handy for mood boards, client decks and briefs.

Working on a whole brand, not only its colors? Try the free business name generator, the tagline generator and the brand story generator, or browse every tool in the free AI generators hub.

FAQ