Color Converter
HEX, RGB and HSL in step, with shades and a contrast checker.
About the colour converter
Convert between HEX, RGB and HSL with every field editable β type into any one and the others update to match. Pick a colour visually, paste one in any of the three notations, or generate a random one.
Underneath, a tint-and-shade ramp steps the same hue and saturation through ten levels of lightness, and a contrast panel checks the colour against white and black text using the WCAG 2.1 formula.
HEX, RGB and HSL β and when HSL is easier
HEX and RGB describe the same thing in different notation: how much red, green and blue
to mix. #2F6DF6 and rgb(47, 109, 246) are identical.
HSL restates that as hue (position on the colour wheel, 0β360Β°), saturation (how vivid, 0β100%) and lightness (0% black to 100% white). It is far easier to work with when you want a variation rather than a specific colour: to make a shade, drop the lightness and leave hue and saturation alone. Doing the same in HEX means recalculating three channels at once.
Reading the contrast check
WCAG contrast is expressed as a ratio from 1:1 (identical) to 21:1 (black on white). For normal body text, AA requires 4.5:1 and AAA requires 7:1. For large text β 18pt, or 14pt bold β the thresholds drop to 3:1 and 4.5:1.
The ratio is computed from relative luminance, not from how light a colour looks, which is why some colours that seem mid-tone fail badly. Pure yellow on white looks legible at a glance and scores about 1.07:1.
Frequently asked questions
How do I convert HEX to RGB?
Paste the hex code into the HEX field and the RGB value updates instantly. Both 6-digit and 3-digit shorthand forms are accepted, with or without the leading #.
What is the difference between RGB and HSL?
RGB specifies how much red, green and blue to mix. HSL specifies hue, saturation and lightness. They describe the same colours, but HSL makes it much easier to produce a lighter or darker variation of a colour you already have.
What contrast ratio do I need for accessibility?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. The contrast panel shows the ratio against white and black and whether each level passes.
How do I make a lighter or darker version of a colour?
Use the tints and shades row β it keeps the hue and saturation fixed and steps the lightness, which is exactly how you build a consistent colour ramp. Click any swatch to copy its hex code.
Why does yellow fail contrast against white?
Because contrast is based on relative luminance rather than perceived hue. Yellow is very luminous, so it sits close to white on that scale and scores near 1:1, despite looking like a strong colour.