What next?
Hex, RGB and HSL are one colour in three notations.
How to use this tool
- Enter a colour as HEX, RGB or HSL.
- The other formats update instantly.
- Copy the value you need.
What your result means
The three notations describe one identical colour, not three similar ones. HEX and RGB are the same numbers in different bases — #7C3AED is simply 124, 58, 237 written in hexadecimal — so converting between them is lossless and exact.
HSL is the odd one out. It re-expresses the same point as hue, saturation and lightness, which is far easier to reason about when you are building a palette: hold the hue, drop the lightness, and you have a darker shade of the same colour. The round trip through HSL can shift a value by one unit because the components are rounded to whole degrees and percentages, so keep HEX or RGB as your source of truth and use HSL for adjusting.
Why this one is different
Contrast ratios against white and black are computed the way the accessibility guidelines define them, using linearised luminance rather than a quick brightness average, and the readable choice is named with the grade it passes. The nearest CSS colour name is given too, matched perceptually — plain channel distance calls this violet a steel blue.
HEX, RGB and HSL are the same thing
Every screen colour is just amounts of red, green and blue light. RGB states those amounts directly; HEX is the same three numbers written in compact base-16; and HSL re-describes them as hue, saturation and lightness.
HSL is the designer's favourite because it's intuitive — nudge lightness for a tint, drop saturation to mute. This tool keeps all three in sync so you can copy whichever your code needs.
Related tools
Three ways to describe the same colour
HEX and RGB are the same thing in different notation — three channel values from 0 to 255, written as hexadecimal pairs or decimal numbers. HSL restates that colour as hue (an angle around the colour wheel), saturation and lightness. HSL is the one worth learning, because it makes the useful edits obvious: hold hue and saturation, change lightness, and you have a tint or shade that belongs to the same family. Doing the same thing in HEX means guessing.
Worked example
Converting the hex value #7C3AED:
RGB rgb(124, 58, 237)
HSL hsl(262, 83%, 58%)
The hex pairs 7C, 3A and ED are simply 124, 58 and 237 written in base 16 — the conversion is exact. The HSL form says the same thing differently: a violet hue at 262°, strongly saturated, a little lighter than mid. To make a darker shade of this exact colour, drop the lightness and leave the other two alone.
Frequently asked questions
When should I use HSL instead of HEX?＋
Whenever you are building a palette rather than picking a single colour. Generating hover states, disabled states and tints from one base colour is a matter of changing lightness in HSL, which keeps the whole set visually consistent.
What does the fourth value in RGBA or an 8-digit HEX mean?＋
Alpha — opacity from 0 (fully transparent) to 1 in RGBA, or 00 to FF in an 8-digit HEX. It affects how the colour composites over what is behind it, not the colour itself.
Why does the same HEX look different on two screens?＋
Because sRGB values are relative, and displays vary in gamut, calibration and colour profile. Wide-gamut screens in particular render saturated colours noticeably differently. For print or brand-critical work, a colour-managed workflow matters more than the HEX value.
How do I check colour contrast for accessibility?＋
WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. The ratio is computed from relative luminance, so two colours of similar brightness fail even when their hues differ sharply.
What is the difference between HSL and OKLCH?＋
HSL is easy to reason about but not perceptually uniform, so two colours with the same lightness value can look very different. OKLCH is built on a perceptual model, which makes generating a consistent palette much more predictable.
Why does my brand colour look dull on screen?＋
Most displays cover sRGB, but wide-gamut screens can show more saturated colours. A vivid print or Pantone colour often has no exact sRGB equivalent, so it is clipped to the nearest representable value.
Assumptions & limitations
The conversions are exact within a colour space; the limits are in what a screen can actually show:
- All conversions assume sRGB. A wide-gamut display or a colour-managed document can render the same values differently.
- HEX, RGB and HSL describe the same sRGB colour, so a round trip can shift the last digit through rounding.
- HSL lightness is not perceived lightness: two colours at the same L value can look very different.
- Print colour (CMYK, Pantone) has no exact screen equivalent, so an on-screen match is an approximation.