colorkind.

Colorkind / FREE ONLINE TOOLS

Find the colors that work.

Pick a photo, explore a color, or check a pairing. Your tools are right here, with no uploads or sign-up.

On your device · No sign-up

One image. A whole palette.

01 / INPUT

or drop it here · JPG / PNG / WebP · max 20 MB

Updates automatically as you adjust it.

Image analysis stays in this browser. No image upload.

YOUR PALETTE

Pick a color. Make it yours.

6

Take these colors into your next design, website, or idea.

A LITTLE GUIDANCE

Less effort. Clearer results.

01 / Image palette

Extract a color palette from an image

  1. Choose an image or drag it into the workspace.
  2. Adjust the number of colors; the palette updates automatically.
  3. Click a color to copy its HEX value, or export CSS and PNG.

Colors are sampled from a smaller image. Transparent pixels are excluded; the results are representative colors, not every original pixel.

Open dedicated tool ↗
02 / Color converter

Convert HEX, RGB and HSL colors

  1. Enter a HEX value, rgb(r, g, b), or hsl(h, s%, l%).
  2. Choose another color with the color picker if you prefer.
  3. Copy the converted value in the format you need.

This tool converts opaque sRGB colors. Alpha values, named colors, RGB percentages and wide-gamut color spaces are not accepted.

Open dedicated tool ↗
03 / Contrast checker

Check text and background contrast

  1. Set the text color and the background color.
  2. Read the contrast ratio and AA/AAA results immediately.
  3. Swap the colors or adjust them until your pairing meets the required threshold.

A contrast result checks this color pair only. It does not establish accessibility conformance for an entire page.

Open dedicated tool ↗

FAQ

A few useful things to know.

Does my image leave my device?

No. Decoding and color sampling happen in your browser. This tool does not upload the image.

Why are there fewer colors than requested?

A flat or simple image may contain fewer distinct color groups. Fully transparent images have no visible palette.

Can I enter short HEX colors?

Yes. For example, #58E becomes #5588EE. The # prefix is optional.

Will the converted value be identical?

RGB output uses 8-bit integer channels. Displayed HSL values are rounded, so converting rounded HSL back can introduce a small difference.

What counts as large text?

WCAG large text is at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. The large preview here is 24px regular text.

Which contrast ratios are required?

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Pass/fail uses the unrounded ratio.