COLOR TOOLS

Color picker

Pick a color, convert it between HEX, RGB, HSL, HSV and CMYK, and check that text in it is readable. Everything runs in your browser.

#2f6fed

Type a HEX code, rgb(), hsl() or a color name.

  • HEX#2f6fed
  • RGBrgb(47 111 237)
  • HSLhsl(220 84% 56%)
  • HSVhsv(220, 80%, 93%)
  • CMYKcmyk(80%, 53%, 0%, 7%)

Contrast checker

Large text reads like this

Body text reads like this. The quick brown fox jumps over the lazy dog.

4.55 : 1 contrast between the color and the background

  • Pass AA, normal text needs 4.5 : 1
  • Pass AA, large text and icons needs 3 : 1
  • Fail AAA, normal text needs 7 : 1
  • Pass AAA, large text needs 4.5 : 1

Palettes

Tints mixed with white

Shades mixed with black

Complementary opposite on the wheel

Analogous neighbours on the wheel

Triadic evenly spaced thirds

Select a swatch to make it the current color.

What the formats mean

HEX
Red, green and blue as three two-digit hexadecimal numbers, the usual form in CSS and design tools. Two more digits add transparency.
RGB
The same three channels as numbers from 0 to 255.
HSL and HSV
Hue as an angle on the color wheel, then saturation, then lightness (HSL) or value (HSV). Easier to adjust by eye than RGB.
CMYK
Ink percentages for print. This is a plain conversion: a printer’s own color profile will give somewhat different numbers.

How do I convert HEX to RGB?

Type or paste the HEX code into the Color box. The RGB, HSL, HSV and CMYK values appear at once, each with a Copy button. It works the other way too: enter rgb(47 111 237) to get its HEX code.

What contrast do I need?

The Web Content Accessibility Guidelines (WCAG) ask for at least 4.5 : 1 between normal text and its background, and 3 : 1 for large text (about 24 px, or 19 px bold) and for icons and controls. The stricter AAA level asks for 7 : 1 and 4.5 : 1.

Which browsers can pick from the screen?

Chrome, Edge and other Chromium browsers on a computer. Elsewhere the button is not shown; choose an image or a screenshot and pick from that instead.

Is my image uploaded?

No. The image is opened by your browser and stays on your device, and this page loads no ads.

Related tools

Shrink a picture with the image compressor, make a colored QR code, or browse all utilities.