How this calculator works
- Step 1Read the colourHEX, RGB or HSLAny common CSS form, with optional transparency.
- Step 2Convert through sRGB0–255 per channelEvery format describes the same red, green and blue light.
- Step 3Write every formatCopy-ready CSSHEX, rgb(), hsl() and oklch().
HEX and RGB say how much red, green and blue light to mix. HSL and OKLCH describe the same colour as hue, colourfulness and lightness, which is easier to adjust by eye.
Worked example: a teal
#0f766e has 15 red, 118 green and 110 blue.
- Hex pairs to numbers
0f 76 6e (base 16)
- RGBrgb(15 118 110)
- Hue (angle on the colour wheel)175.3°
- Saturation77.4%
- Lightness26.1%
- HSLhsl(175.3 77.4% 26.1%)
Reading the result
- HSLSimple mathsSame lightness number can look very different across hues.
- OKLCHMatches the eyeEqual lightness values look equally light, so palettes stay even.
- HEXShort and universal: #0f766e, or #0f766e80 with alpha.
- RGBThree numbers 0–255; modern CSS separates them with spaces.
- HSLHue in degrees, saturation and lightness in %.
- OKLCHPerceptual lightness, chroma and hue, supported by current browsers.
Related colour tools
A colour can be written several ways. Whether text on it is readable is a separate check.
To test text against a background, use the color contrast checker, which follows WCAG 2.2. For hex arithmetic, try the hex calculator.
Common mistakes
Mistake: Making a lighter shade by raising HSL lightness alone.
Instead: Try OKLCH lightness for steps that look even.
Mistake: Picking text colour by eye.
Instead: Check the contrast; use the suggested black or white.
Mistake: Dropping the alpha when copying.
Instead: Copy the full value; the converter keeps transparency.
Read how we test our calculators, or browse more developer tools.