Color Palette Generator

Free Color Palette Generator with Built-In Contrast Checker

This color palette generator creates palettes of 2 to 8 colors, lets you lock the ones you like, and checks every pair of colors for readable contrast before you use them. Start from random colors, from a HEX color you already have, or from a photo. Then copy each color as HEX, RGB, HSL or OKLCH, or export the whole palette as CSS variables, a Tailwind config snippet, JSON or a PNG image.

It is built for web designers and developers choosing interface colors, small business owners and creators starting a brand look, students working on projects, and anyone who needs text and background colors that people can actually read. A palette can look good as a row of swatches and still produce hard-to-read text. The contrast results sit right next to the palette so you can catch that early.

How to Use the Color Palette Generator

1. Generate a palette. Choose how many colors you want (2 to 8) and a harmony mode, then press Generate. On a desktop keyboard you can also click or tab to the palette area and press Space.
2. Lock what you like. Press Lock under any color to keep it. When you generate again, only the unlocked colors change.
3. Optional: start from your own color. Type a HEX code such as #0E5A68 in the “Build around a color” field and press Build. That color becomes color 1, is locked, and the rest of the palette is built around it.
4. Fine-tune and copy. Use Edit to open a color picker for any swatch. Tap or click a swatch to copy its value in the format you selected (HEX, RGB, HSL or OKLCH). Undo and Redo step through your last 50 changes.
5. Check contrast. Open Contrast check to see the ratio and pass/fail result for every pair of colors. If a pair fails, press Suggest fix and then Apply to accept the suggested change.
6. Preview color-blindness. Open Color-blindness preview to see how the palette may look with protanopia, deuteranopia and tritanopia.
7. Export, save or share. Use Export to copy or download the palette, Save to keep it in your browser, or Share link to copy a link that reopens the same palette.

Main Features

Practical Uses and Examples

Pick colors for a website or app

Build around your brand color, generate until the supporting colors feel right, then open the contrast check. Look for a pair that reaches at least 4.5:1 for body text and 3:1 for buttons and borders. Export as CSS variables and paste the result into your stylesheet:

:root {
  --palette-1: #0E5A68;
  --palette-2: #F2F6F4;
  --palette-3: #A9D94B;
}

Add a custom palette to Tailwind CSS

The Tailwind export adds your colors under theme.extend.colors as a group named palette with numbered keys, so you can use classes such as bg-palette-1 and text-palette-2. This is a simple numbered set of your palette colors, not a full 50–950 shade scale.

Create a palette from a photo

Upload a product shot, a landscape or a mood image to get colors that already belong together. This is useful for matching a website, slide deck or social graphic to a photo. Photos with only a few distinct colors will return fewer colors than you asked for.

Check whether two specific colors work together

Set the number of colors to 2, enter your first color in “Build around a color,” then use Edit on the second swatch to set your text or background color. The contrast check shows the ratio and which levels the pair passes.

Test colors for color-blind readers

If your design uses color alone to separate states such as success and error, the color-blindness preview shows whether those colors become hard to tell apart. Pair color with text labels or icons where the preview looks risky.

Understanding Color Contrast Ratios

Contrast ratio compares the brightness of two colors, from 1:1 (identical) to 21:1 (black on white). The thresholds below come from the Web Content Accessibility Guidelines (WCAG), which the checker in this tool follows.

Large text means at least 18pt (about 24px), or 14pt (about 18.66px) if bold. Logos and brand names are exempt from these requirements. In the tool, the “Large” chip shows the 3:1 large-text threshold and “UI” shows the 3:1 component threshold. Sources: WebAIM: Understanding WCAG 2 contrast and W3C: Understanding contrast (minimum).

Which Color Format Should You Use?

• HEX (for example #0E5A68) is the most widely supported format and the safest default for websites, design tools and documents.
• RGB expresses the red, green and blue values. It is handy when a tool or code library asks for separate channels.
• HSL describes hue, saturation and lightness, which makes manual adjustments easier to reason about.
• OKLCH is a perceptual format, so equal lightness changes look more even to the eye. It works in modern CSS, but check browser support if you need to support older browsers.

Limitations to Know About

• Palettes are generated algorithmically with a random element. The tool does not use AI, does not learn your taste, and cannot guarantee a result fits your brand.
• Contrast is checked between the colors in your palette. To test against pure white or black, change one swatch to #FFFFFF or #000000 with Edit.
• Transparency (alpha) is not supported. Use 6-digit colors, or 3-digit shorthand such as #0AF.
• Suggest fix only changes lightness and targets 4.5:1. For some pairs no lightness change is enough, and the tool will say so.
• Color-blindness previews are approximations. Treat them as a quick check, not a replacement for testing with real users.
• Colors look different across screens, and printed colors differ from on-screen colors. Always proof important print work.
• Image extraction accepts images up to 15 MB. Some formats, such as HEIC, may not open in every browser. JPG, PNG and WebP are the safest choices.
• Saved palettes live only in the browser you saved them in. Use Export saved to keep a backup.

Color Palette Generator FAQ