Color Picker & Converter

Pick a color and convert between HEX, RGB, HSL, HSV and CMYK. Check contrast against white and black, and get tints and shades.

Text contrast (WCAG)

Tints and shades

Click a swatch to use that color.

How to convert a color

  1. Type or paste a color in any CSS format – #2563eb, 2563eb, rgb(37, 99, 235), hsl(221 83% 53%) or a name like tomato – or pick one with the color picker.
  2. The color is shown in HEX, RGB, HSL, HSV and CMYK. Click Copy next to the format you need.
  3. Check the contrast boxes to see whether white or black text is readable on this color, and click a tint or shade to explore lighter and darker versions.

Color formats explained

  • HEX – the most common format in web design: red, green and blue as two hexadecimal digits each, from 00 to FF.
  • RGB – the same red, green and blue values as numbers from 0 to 255.
  • HSL – hue (0–360° around the color wheel), saturation and lightness. Easy to adjust by hand: change the lightness to get lighter or darker versions.
  • HSV / HSB – hue, saturation and value (brightness), used by color pickers in Photoshop, Figma and other design apps.
  • CMYK – cyan, magenta, yellow and black ink, used for printing. The values here are a simple conversion; professional print work uses color profiles, so ask your printer for exact values.

What do the contrast results mean?

The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text (level AA) and 3:1 for large text. Level AAA requires 7:1. Good contrast makes buttons and text readable for everyone, including people with low vision and anyone using a phone in bright sunlight.