Color Converter — HEX, RGB, HSL
Paste a colour in any of the three notations and get the others back, alpha included, with a swatch so you can see what you are converting.
Color
Notations
About this tool
Hex is what a design tool hands you, rgb() is what a canvas or an image library wants, and hsl() is what you reach for when you need a colour slightly lighter or a hue rotated. Converting between them by hand is arithmetic nobody enjoys. Paste any of the three — with or without alpha — and the others appear, along with a swatch, because a value alone is easy to mistype and hard to sanity-check.
How to use it
- 1Paste a colour: #3fb984, rgb(63 185 132) or hsl(157, 49%, 49%).
- 2Read the other notations on the right and check the swatch above them.
- 3Copy the line you need, or the ready-made CSS custom property.
Frequently asked questions
›Which notations can I paste?
Hex in 3, 4, 6 or 8 digits (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() and rgba(), and hsl() and hsla(). Both the comma syntax and the modern space syntax with a slash before the alpha are accepted.
›Why does the HSL come back with decimals?
Because hue, saturation and lightness are continuous while hex is 8 bits per channel. Converting hex to HSL rarely lands on whole numbers, and rounding them would shift the colour slightly on the way back.
›What is the fourth hex pair for?
Alpha. #3fb984cc is the same colour at 80% opacity. It is supported everywhere that matters now, and it is shorter than switching to rgba().
›Are named colours like "tomato" supported?
No. Resolving the 148 CSS keywords needs the full table for very little benefit — paste the hex value instead. Any browser devtools panel will give it to you.
›Why do designers keep mentioning OKLCH?
Because HSL lightness does not match perceived lightness: two colours at the same L can look very different. OKLCH fixes that, which makes it far better for building palettes. This page stays with the three notations you paste day to day.