Shridha/ tools

Colour Converter

Enter a colour in any of the three common formats and copy it in the others. The contrast check tells you whether white or black text is readable on it.

HEX (#0f766e or #fff), rgb(15, 118, 110) or hsl(175, 77%, 26%)

HEX#0f766e
RGBrgb(15, 118, 110)
HSLhsl(175, 77%, 26%)

Contrast with white text: 5.47:1 (AA). With black text: 3.84:1 (AA large text only).

How it works

HEX writes a colour as three pairs of hex digits for red, green and blue, for example #0f766e. RGB writes the same three numbers from 0 to 255.

HSL describes a colour by hue (the angle on a colour wheel, 0 to 360), saturation (how vivid) and lightness (how light). It is easier to adjust by hand.

The contrast ratio compares the brightness of the colour with white and with black. The accessibility guidelines (WCAG) ask for at least 4.5:1 for normal text (level AA) and 7:1 for the stricter level AAA.

Good to know

Rounding means that converting to HSL and back can change a value by 1.

Contrast depends on both colours. Check your real text and background pair, not just one side.

Frequently asked questions

What formats can I type?

HEX with or without the #, including the short form such as #fff, rgb(15, 118, 110) and hsl(175, 77%, 26%).

What contrast do I need?

At least 4.5:1 for normal text, and 3:1 for large text. 7:1 is the stricter level.

Does it support transparency?

Not as a separate setting. A transparency value in rgba() or hsla() is ignored.

Related tools

Base64 Encoder and DecoderEncode text to Base64 or decode it back, with UTF-8 and URL-safe options.URL Encoder and DecoderPercent-encode or decode text for use in URLs and query strings.Unit ConverterLength, weight, area, volume, speed and temperature, including acre, sq ft and quintal.