Color Converter
Convert a colour between HEX, RGB and HSL, with a live swatch and contrast check.
Swatch
Every notation
| Format | Value |
|---|---|
| HEX | #1F9D76 |
| RGB | rgb(31, 157, 118) |
| HSL | hsl(161, 67%, 37%) |
| CSS shorthand | #1F9D76 |
HEX and RGB are the same numbers
A HEX colour is just three bytes written in base 16. In #1F9D76, 1F is the red channel, 9D the green and 76 the blue — which in decimal is 31, 157 and 118. Converting between them is pure notation; nothing about the colour changes.
Three-digit HEX like #abc is shorthand where each digit is doubled, so it means #aabbcc.
HSL describes it the way people do
HSL re-expresses the same colour as hue (an angle on the colour wheel), saturation (how vivid) and lightness. It is far easier to work with when you want a lighter version of a colour rather than a different one — nudge the lightness and leave hue alone.
Contrast
The contrast figures compare this colour against white and black using the WCAG relative-luminance formula. For normal body text you want at least 4.5:1; large text can go down to 3:1.