Color tools

Check contrast, generate palettes and shades, pick colours from a photo and convert HEX, RGB, HSL and CMYK. Fast, free and done in your browser.

  • Free
  • No sign-up
  • Runs in your browser

All tools in this category

Color contrast checkerCheck text and background colors against WCAG, and get a fix that passes. Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color. Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue. Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes. Color blindness simulatorSee how an image looks to someone with color blindness, side by side. Color palette generatorBuild a matching color palette from one base color, in six classic schemes. Text readability previewPreview text over two colors at several sizes and see what passes WCAG contrast. Color name finderFind the closest standard color name for any hex, RGB or HSL value. Color shades generatorGenerate a full 50–950 tint and shade scale from one color. Grayscale palette checkerCheck if your color palette still works when converted to grayscale. Palette to codeTurn a list of colors into CSS, SCSS, Tailwind, JavaScript or JSON code.

What you can do here

Good colour work is a mix of taste and arithmetic. Taste decides the palette; arithmetic decides whether the text is readable, whether a colour-blind user can tell two states apart and what the HEX code is in RGB or CMYK. These tools take care of the arithmetic so you can concentrate on the taste.

Pick a colour from an image, extract a brand palette from a logo, generate accessible shades, check WCAG contrast ratios and turn palettes into CSS variables. Because the processing is local, your logos and mock-ups are not uploaded anywhere.

  • Accessibility: contrast checker, colour-blindness simulator, accessible colour adjuster and grayscale check.
  • Palettes: generate palettes and shades, extract colours from an image or a brand logo.
  • Convert: HEX, RGB, HSL and CMYK, and turn a palette into code.
  • Explore: find the name of a colour and preview the readability of text on any background.

Frequently asked questions

What contrast ratio do I need?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1 and 4.5:1. The contrast checker shows all of them.
Can I get colours from a photo?
Yes. Upload an image to the colour picker or the palette extractor; it stays in your browser.
How do I convert HEX to RGB?
Use the colour converter, which shows HEX, RGB, HSL and CMYK together and lets you copy any of them.
Are the palettes accessible?
The generator suggests palettes and the checker measures contrast, so you can verify every text and background pair.
Do you store my images?
No. Colours are read in your browser and the image is never uploaded.