Skip to content

Generate color palettes and check contrast

Generate color palettes from harmonies, random shuffles or a photo, build 50–950 shades and check WCAG 2.2 contrast with suggested fixes, all in your browser.

Harmony
Neighbouring hues, 30° apart on the color wheel
3366ffblue
33ccffsky
6633ffindigo
33ffccteal
cc33ffpurple

11 steps in OKLCH; the ringed step is your exact color.

blue
sky
indigo
teal
purple

Selected color

#3366ff
hex
#3366ff
rgb
rgb(51 102 255)
hsl
hsl(225 100% 60%)
oklch
oklch(57.3% 0.234 265.3)
Runs in your browser · no uploadHow it works

How to use Color palette & contrast checker

  1. 1

    Start from a color

    Type or pick a base color, then choose a harmony such as analogous, triadic or split complementary — or shuffle a random palette.

  2. 2

    Lock and refine

    Lock the swatches you like before shuffling again, edit any swatch directly, or pull the five dominant colors out of a photo.

  3. 3

    Check readability

    Open Contrast to test text on background against WCAG 2.2 AA and AAA, apply a suggested fix, and preview the palette for color blindness.

  4. 4

    Export

    Copy CSS variables, a Tailwind v4 theme or v3 config, SCSS or JSON with 50–950 shades, or download a PNG swatch.

Limits and Pro

Everything is free: palettes of 5 colors, 6 harmonies, unlimited shuffles and exports, images up to 50 MB for color extraction, PNG swatch 1600 pixels wide.

About Color palette & contrast checker

Color palette generator builds a five-color scheme and everything a design system needs around it. Harmonies rotate the base hue on the HSL color wheel: analogous steps 30° either side, complementary adds the hue opposite, split complementary takes the two hues beside the opposite, triadic spaces three hues 120° apart, tetradic uses a 90° square, and monochrome keeps one hue at five lightness levels. Random mode respects locked swatches, and the image option clusters the pixels of a photo in OKLab to find its five most common distinct colors.

For each color the Shades tab produces an 11-step 50–950 ladder in OKLCH, where the step nearest your color is the exact value, or the 13 tones of the Material 3 HCT system together with the five key palettes a Material theme would derive. The contrast checker uses the WCAG 2.2 luminance formula, never rounds a ratio up, and suggests the closest passing color by changing only lightness, keeping the hue. A grid shows the ratio of every pair in the palette against white and black.

Simulations cover protanopia, deuteranopia, tritanopia and achromatopsia with the Machado matrices, and flag swatches that collapse into one another. Exports name colors by hue and accept your own names. The tool does not judge whether colors suit a brand, and simulations approximate how people with color-vision deficiency see; they are not a substitute for testing with them.

Privacy

All color math, contrast checks and image analysis run in this tab: a photo you use for colors is read from your disk into a small canvas and never uploaded. The palette can be stored in the page address so a copied link reopens it; nothing is saved on a server.

Features

Six harmonies and image colors

Analogous to tetradic from one base color, random shuffles with locks, or the dominant colors of a photo.

WCAG 2.2 contrast with fixes

AA and AAA for normal and large text plus UI graphics, with the nearest passing color one click away.

Developer-ready exports

CSS variables, Tailwind v4 and v3, SCSS and JSON in HEX, RGB, HSL or OKLCH, plus a PNG swatch.

Color palette & contrast checker: frequently asked questions

What contrast ratio does WCAG 2.2 require?
Level AA needs 4.5:1 for normal text and 3:1 for large text, which means at least 24 px regular or 18.66 px bold. Level AAA raises those to 7:1 and 4.5:1. Icons, input borders and other meaningful graphics need 3:1 under success criterion 1.4.11. The checker truncates ratios, so 4.49:1 is shown as failing AA rather than rounded up to a pass.
How are the suggested contrast fixes chosen?
The tool keeps the hue and chroma of the failing color and moves only its OKLCH lightness, darker and lighter, until the pair reaches 4.5:1 or 7:1. It then offers the option that changes least, for the text and for the background separately. Because the hue stays the same, a brand blue remains recognisably blue, just a shade deeper or paler.
Can I get a palette from a photo or logo?
Yes. Choose From an image and pick a PNG, JPG, WebP, GIF or SVG up to 50 MB. The picture is shrunk to 160 pixels in your browser, transparent pixels are skipped, and the remaining pixels are grouped by k-means clustering in OKLab. The five largest groups that look clearly different become the palette, most common first.
How do I use the export in Tailwind CSS?
For Tailwind v4, choose Tailwind v4 and paste the @theme block into your main CSS file; classes such as bg-blue-500 then use your shades. For v3, choose Tailwind v3 and merge the colors object into theme.extend in tailwind.config.js, where each color also gets a DEFAULT value. Rename colors in the Export tab to get names like brand or accent.
Which color-blindness types are simulated?
Protanopia and deuteranopia, the red- and green-blind forms that together affect about 2% of men, tritanopia, the rare blue-blind form, and achromatopsia, where no color is seen. Each strip shows the palette as converted by the Machado 2009 model, and any two swatches whose simulated colors are almost identical are flagged so you can add a label or a lightness difference.

Other tasks with this tool

Related tools

All developer tools

CSS gradient & shadow generator

Design gradients and box shadows visually

Color picker from image

Pick exact colors and extract a palette from any image

App icon generator

Every iOS, Android and PWA icon size from one image

Favicon generator

ICO, PNG and manifest icons from an image, text or emoji