How to use the color converter
- Type or paste a colour in HEX, RGB or HSL, or pick one with the colour picker.
- Copy the format you need: HEX and RGB for websites and apps, HSL for making lighter and darker versions in CSS.
- Check the contrast before using the colour behind text, and click a shade to explore lighter or darker versions.
How the formats relate
Screens mix red, green and blue light. RGB gives each from 0 to 255. HEX writes the same three numbers in base 16 (00 to ff). HSL describes the same colour as a hue (an angle round the colour wheel: 0° red, 120° green, 240° blue), saturation (how strong) and lightness. HSV (also called HSB) is similar, with "value" instead of lightness, and is used by many design apps' pickers.
Worked example
Frequently asked questions
Why is CMYK marked "approximate"?
The CMYK numbers here use the simple textbook formula. Real printing depends on the printer, ink and paper, which printers handle with colour profiles. Ask your printer for the CMYK values to use, and use these as a starting point.
What's the short HEX code like #f00?
When each pair of digits is a repeated digit, CSS lets you write each pair once: #ff0000 can be written #f00. We accept both and always show the full six-digit version.
Are shades the same as tints?
Strictly, tints add white and shades add black. Our row keeps the hue and saturation and steps the HSL lightness from 10% to 90%, which gives both darker and lighter versions of your colour.