Check contrast early
Pick brand colours that work with text before you design everything else.
Colour Code Converter: HEX, RGB & HSL
Paste a colour in any format, or pick one, and get it in HEX, RGB, HSL, HSV and CMYK. See whether white or black text is readable on it, and grab lighter and darker shades.
- 100% free
- No sign-up
- Runs in your browser
Contrast (WCAG)Tints and shades
How to use
How to use the Colour Code Converter (HEX/RGB/HSL)
- Type a colour as HEX, rgb(), hsl() or a CSS name, or use the picker.
- Copy the format you need.
- Check the contrast results before using it behind text.
- Click a tint or shade to copy it.
Private by design. Colour conversions happen in your browser. Nothing is uploaded or stored.
About this tool
Which colour format should you use?
HEX codes such as #8B0000 are compact and the most common in web design and brand guides. RGB is the same colour written as red, green and blue values, and RGBA adds transparency. HSL describes hue, saturation and lightness, which makes it easy to create matching lighter and darker versions by changing a single number.
CMYK is used in print. The conversion here is a mathematical approximation; printers use colour profiles, so ask your print provider for exact values. The contrast check follows WCAG guidelines: 4.5:1 is the minimum for normal text and 3:1 for large text.
Good to know
Colour tips
Use HSL for variations
Adjust lightness to create hover and disabled states.
Confirm print colours
CMYK values here are estimates; check with your printer.
Build a palette
Use the tints and shades for backgrounds, borders and highlights.
FAQ
Colour Code Converter (HEX/RGB/HSL) FAQs
How do I convert HEX to RGB?
Paste the HEX code and copy the RGB value shown below the swatch.
What contrast ratio is accessible?
At least 4.5:1 for normal text and 3:1 for large text under WCAG 2.
Can I use colour names?
Yes. Any CSS colour name, such as teal or rebeccapurple, works.
Is the CMYK value exact?
It is a standard approximation. Real print colours depend on paper and printer profiles.
Need extra development capacity?
Hire dedicated developers from iCreativez who work as part of your team.