Color Converter: HEX, RGB and HSL with WCAG Contrast Check

HEX, RGB and HSL explained

Web colors can be written in several ways, and all of them describe the same screen colors. HEX is a six-digit code such as #2563eb, in which each pair of digits is the amount of red, green and blue from 00 to ff. RGB writes the same three amounts as numbers from 0 to 255, as in rgb(37, 99, 235). HSL describes color the way people think about it: a hue angle from 0 to 360 on the color wheel, a saturation percentage and a lightness percentage.

Designers like HSL because it is easy to adjust. To make a color lighter, raise the lightness. To make it duller, lower the saturation. To shift it toward another color, change the hue. Developers often use HEX because it is short and universal. This tool converts between them instantly.

How to convert colors

1. Pick a color with the color picker, or type a value in any of the three boxes.
2. The other two boxes and the preview update automatically.
3. Read the summary for ready-to-use values and a CSS snippet.
4. Check the contrast table to see how the color works against white and black.
5. Copy the value you need into your stylesheet or design tool.

Accepted formats

• HEX with or without the hash: #2563eb, 2563eb or the short form #26e.
• RGB with three numbers from 0 to 255: rgb(37, 99, 235) or just 37 99 235.
• HSL with a hue from 0 to 360 and two percentages: hsl(221, 83%, 53%).

Contrast and accessibility

Text must be easy to read against its background. The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between the brightness of two colors, from 1:1 for identical colors to 21:1 for black on white. To meet level AA for normal text, the ratio must be at least 4.5:1. Large text needs 3:1, and level AAA asks for 7:1.

This tool calculates the ratio of your color against pure white and pure black. If a color fails against white, put dark text on it. If it fails against black, use white text. For a text and background pair that are both custom colors, check them in your design tool as well.

Tips for choosing colors

• Pick one main color and build a palette by changing only its lightness in HSL.
• Do not rely on color alone to carry meaning, because many people cannot tell some colors apart.
• Test colors on a real screen, since monitors and phones display them differently.
• Keep a small set of named color variables in your stylesheet, so changes are easy.

Color formats in CSS

CSS accepts named colors such as tomato, HEX codes, rgb() and hsl(). Modern CSS also allows a space-separated form, such as rgb(37 99 235), and a transparency value, as in rgb(37 99 235 / 50%) or the eight-digit HEX #2563eb80. This converter works with fully opaque colors. For transparency, convert the base color here and then add the alpha value in your stylesheet.

Common colors in HEX, RGB and HSL

Frequently Asked Questions