Color Palette Generator

Join Amazon and Flipkart Deals and products under 99 Telegram Channel: @atjust99

What this tool does

This tool generates color palettes in two ways: you can upload an image and it will extract the dominant colors, or you can start with a hex code and generate a full palette from that base. Either way, you get hex, RGB, and HSL values for each swatch, plus a built-in WCAG contrast checker so you can tell whether your text will be readable.

Everything runs locally in your browser. Images are not uploaded to a server.

Extracting colors from an image

Upload a photo and the tool samples the image at a reduced resolution (100x100 pixels), then groups similar colors together and picks the most frequently occurring ones. You typically get 5 dominant colors from a single image.

This approach works well for product photography and hero images where you want your UI colors to match the visual tone. It works less well for photos with very uniform coloring, since you'll get five similar swatches. In that case, manually adjusting a few via the hex input gives you better range.

Building a palette from scratch

Click the generate button and you get a random set of five colors. Lock any color you want to keep, then regenerate the rest. You can also edit any swatch directly by clicking to adjust hue, saturation, and lightness.

Each swatch shows all three formats (hex, RGB, HSL) and clicking any value copies it to your clipboard.

Contrast and accessibility

The tool calculates contrast ratios using the relative luminance formula from WCAG 2.1. Two numbers matter:

• 4.5:1 is the minimum ratio for normal-sized text (AA compliance)
• 7:1 is the minimum for enhanced contrast (AAA compliance)

The contrast checker compares the first two colors in your palette automatically. If you need to check other combinations, rearrange your palette by clicking on different swatches.

Export formats

The tool can export your palette as:

• CSS custom properties: Ready to paste into a :root block
• Tailwind config: A JavaScript object for the theme.colors section of tailwind.config.js
• JSON tokens: Structured data for design systems or cross-platform projects
• Raw hex values: A simple list for quick reference

The 60-30-10 rule

If you're not sure how to apply a palette to a layout, this rule is a good starting point. Use your primary color for roughly 60% of the visible area (backgrounds, large surfaces). A secondary color takes about 30% (cards, navigation, secondary surfaces). An accent gets the remaining 10% (buttons, links, highlights).

This isn't a strict formula, but it gives you a balanced starting point that you can adjust from.

Frequently asked questions

How many colors does image extraction produce? The default is 5 swatches. The algorithm picks the most dominant colors by frequency. Very monochromatic images may produce similar-looking results.

Can I save palettes? Not directly in the tool yet. The fastest workaround is to export as JSON or CSS and save that file alongside your project.

Does it handle transparent images? The extraction algorithm ignores fully transparent pixels, but semi-transparent pixels may affect the results since they're blended with the canvas background during sampling.

What contrast ratio should I target? For body text, aim for 4.5:1 (WCAG AA). For large text (18px+ or 14px+ bold), 3:1 is acceptable. For the best accessibility, target 7:1 (AAA). The tool shows the ratio and whether it passes AA and AAA for the first two colors.

Can I use generated palettes in commercial projects? Yes. Colors aren't copyrightable. Use the output however you want.

Why does the image extraction sometimes miss obvious colors? The algorithm quantizes pixel values to the nearest 10 in each RGB channel, then sorts by frequency. A color that looks prominent visually may occupy fewer pixels than the background. Try cropping the image to the area with the colors you care about.

Is there a file size limit for image uploads? The image is rendered to a 100x100 canvas regardless of original size, so large files work but take a moment longer to load. Keeping uploads under 5 MB gives the fastest results.

Related tools

• Gradient Generator - Blend palette colors into CSS gradients.
• SVG Editor & Optimizer - Apply colors to vector icons.
• Code Screenshot Generator - Use palette colors as screenshot backgrounds.
• JSON Prettifier - Format exported color tokens.