HEX to RGB Converter
HEX, RGB and HSL, converted in whichever direction you need.
The three notations describe the same colours and suit different jobs: HEX is compact and belongs in stylesheets, RGB matches how a screen actually mixes light, and HSL is the only one you can adjust by hand and predict the result. Paste any of the three below and the other two appear, along with a swatch so you can see what you are actually looking at.
————How it works
Pick or paste a colour
The text field accepts HEX, RGB or HSL in any common spelling.
Read all three formats
Each row copies to the clipboard with one click.
Take the CSS custom property
The last row is ready to paste into a variable declaration.
Why HSL is the one worth learning
HEX and RGB describe the same thing in two alphabets: three channels of red, green and blue, written as hexadecimal pairs or decimal numbers. #2563eb and rgb(37, 99, 235) are identical instructions to the screen, which is why converting between them is arithmetic with no judgement in it.
HSL rearranges the same colour into hue, saturation and lightness — an angle on the colour wheel, how vivid it is, and how light. That matters because it maps onto the changes designers actually want. A hover state that is 10% lighter is one number in HSL and three unrelated numbers in RGB, which is why a palette built in HSL stays coherent while one built by nudging hex values drifts.
The catch is that HSL lightness is not perceptual. hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue, both at "50% lightness", and the yellow is far brighter to the eye. This is why two colours that look balanced in an HSL picker can fail a contrast check, and why newer CSS colour spaces such as OKLCH exist.
Where the three-digit shorthand and the alpha channel fit
A three-character hex code is shorthand: each digit is doubled, so #fa0 means #ffaa00. It can only express 4,096 of the 16.7 million available colours — every channel has to be a repeated pair — so it is handy for round numbers like #fff and useless for a brand colour.
Transparency comes as a fourth channel. CSS accepts eight-digit hex, where the last pair is alpha from 00 to ff, and the functional forms rgb(37 99 235 / 50%) and hsl(224 83% 53% / 50%) using the modern space-separated syntax. This converter works in opaque colours; add the alpha in whichever notation your stylesheet uses.
One practical warning about transparency: a semi-transparent colour has no fixed contrast ratio, because the result depends on whatever is behind it. Accessibility checks have to be run against the composited colour that ends up on screen, not against the value written in the stylesheet.