What is a color palette generator?

A color palette generator creates related colors from a base color, using relationships such as complementary, analogous, triadic and monochromatic harmony.

Are uploaded images sent to a server?

No. Image color extraction runs locally in the browser.

Free browser tool · no upload · no account

Turn one color into a usable design system.

Pick a base color, generate harmonious UI palettes, check WCAG contrast, extract colors from images and export production-ready tokens.

Open the tool

Italiano Español Français Deutsch

Generated palette

Click any color to copy its HEX value. The shade scale is useful for buttons, states, cards and UI surfaces.

Shade scale

Color inspector

See the current base color in practical formats. Copy HEX, RGB, HSL and OKLCH values for implementation and documentation.

#E24B4A

Color vision preview

Approximate simulations for common color vision deficiencies. These simulations are approximate previews intended for design checks, not medical diagnosis.

WCAG contrast checker

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1. Use these thresholds as a practical baseline for accessible interface text.

Manual check

Text Background

Ratio

Readable interface text

Best combinations

Automatic checks against white, black and palette colors.

Export tokens

Copy CSS variables, Tailwind config, SCSS, JSON tokens and downloadable SVG/PNG palette cards.

Download palette card

Export a shareable 1200×630 palette card as PNG or SVG. Useful for docs, social previews, Pinterest pins and brand boards.

Generated locally in the browser. Humanity briefly avoided a server call.

Extract colors from image

Drop a PNG, JPG or WebP. The image is processed locally in your browser.

Gradient generator

Create CSS gradients from the current palette.

Angle 135°

UI preview

A tiny interface mockup so the palette is not just pretty squares, the usual trap where design goes to look productive.

Production checklist

A small checklist for using the palette in a real website instead of a Dribbble fantasy nobody can read.

Use the 500 shade as the main brand color and reserve 600/700 for hover and active states.
Use 50/100 shades for surfaces, not saturated colors behind paragraphs.
Check body text at 4.5:1 minimum before shipping.
Test important UI states: hover, disabled, success, warning and error.
Keep one strong accent. Five accents are not a brand system, they are confetti with taxes.

Color tools and guides

Focused pages for contrast, Tailwind palettes, CSS variables, image extraction and gradients. More entry points for users, and yes, also for the tiny indexing robots judging us all.

WCAG contrast checkerCheck accessible text/background combinations. Tailwind color generatorCreate a 50–950 shade scale for Tailwind. CSS color variablesExport design tokens as CSS variables. Image color extractorExtract colors from images locally. CSS gradient generatorBuild gradients from your current palette.

How to create an accessible color palette

Start from one brand color, pick a harmony, verify text contrast, then export tokens. For real products, use bright colors for accents and neutral shades for surfaces.

Complementary vs analogous?

Complementary palettes use opposite colors for strong contrast. Analogous palettes use nearby hues for softer, calmer interfaces.

Why does contrast matter?

Low contrast text looks elegant in mockups and terrible for actual humans. Aim for WCAG AA at minimum for body text.

Can I use this for Tailwind?

Yes. The Tailwind export gives a primary shade scale from 50 to 950 plus an accent color when available.

Are images uploaded?

No. Color extraction uses canvas in your browser. Nothing is sent anywhere.