How to use the Color Converter & Picker
- Type a colour like #ff5733, rgb(255, 87, 51) or hsl(11, 100%, 60%), or use the picker.
- Copy the format you need.
- Check contrast with white and black text, and pick a shade or tint.
Formula used
#RRGGBB → R = hex(RR), G = hex(GG), B = hex(BB)Contrast = (L1 + 0.05) ÷ (L2 + 0.05)
L is relative luminance, as defined in WCAG 2.
Worked examples
| HEX | RGB | HSL |
|---|---|---|
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #012169 (Union Jack blue) | rgb(1, 33, 105) | hsl(222, 98%, 21%) |
| #5B5BF7 | rgb(91, 91, 247) | hsl(240, 91%, 66%) |
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal. #FF8800 is rgb(255, 136, 0).
What is HSL?
Hue (0 to 360 degrees on the colour wheel), saturation and lightness. It makes shades easy: change only the lightness.
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1.
What is the Union Jack blue?
The UK flag blue is commonly given as #012169. India's saffron is often #FF9933 and its green #138808.
Does it support 3-digit HEX?
Yes. #F80 expands to #FF8800.
Written and tested by MasterKit Online Editorial Team
Our team builds and tests every tool by hand, checks each formula against official sources (IRS, HMRC, the Income Tax Department of India, CBSE, NHS, WHO) and reviews pages whenever rules change. Last reviewed on . Spotted a mistake? Tell us.