Color Converter

Designers and developers move between color formats all the time. This converter keeps HEX, RGB and HSL in sync: change any one and the others update, along with a preview swatch. It also tells you whether black or white text is more readable on that color and shows the contrast ratio.

How to use it

1. Use the color picker, or type a value into the HEX, RGB or HSL box.
2. The other formats and the preview update automatically.
3. Copy whichever format your design tool or stylesheet needs.

The three formats

• HEX such as #2F5BEA writes red, green and blue as two hexadecimal digits each (00 to FF). It is the most common format in CSS and design apps.
• RGB such as rgb(47, 91, 234) gives the same three channels as numbers from 0 to 255.
• HSL such as hsl(226, 82%, 55%) describes hue (the position on the color wheel), saturation and lightness. It is the easiest format for making a lighter or darker shade of a color: just change the last number.

Contrast and accessibility

The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text. The preview checks both white and black text against your color and recommends the stronger one.

Frequently asked questions