Localia
ES

PalettePilot

Color palette generator

PalettePilot builds color palettes from a base color using classic harmony rules, or extracts the dominant colors from an image on your computer. Each color is shown in HEX, RGB and HSL and copies with one click.

Images are analyzed in your browser and favorite palettes are stored on this device only.

Loading the tool…

To make the palette useful in a real interface, the tool computes the text/background contrast ratio using the WCAG 2.2 formula and tells you which levels (AA, AAA) each pair meets, for both normal and large text.

What it is for

Brand identity

Start from your brand’s main color and get harmonious combinations for your website, social media and documents.

Accessible websites

Check that every text and background combination meets WCAG AA or AAA contrast before using it.

Colors from a photo or logo

Extract the dominant colors of an image to build a palette that matches it.

Moving the palette into code

Export to CSS variables, SCSS, Tailwind, JSON or a GIMP and Inkscape palette.

How to use it

  1. Pick a base color or extract colors from an image.
  2. Choose the harmony type: complementary, analogous, triadic, monochromatic and more.
  3. Check the contrast matrix and preview to choose readable pairs.
  4. Save the palette to favorites or export it to CSS, JSON, SVG or GIMP.

Frequently asked questions

What do AA and AAA mean?
They are WCAG conformance levels. For normal text, AA requires a minimum contrast of 4.5:1 and AAA requires 7:1. For large text (24 px, or 18.66 px bold) 3:1 and 4.5:1 are enough.
Is a palette that meets AA accessible?
Contrast is an important requirement, but accessibility also depends on text size, not conveying information by color alone and other design factors.

Limitations

  • Contrast is computed for opaque colors; transparency is not taken into account.
  • Color extraction works on a downscaled copy of the image, so very small details may not show up.