Color Converter
100% private — runs on your device, never uploaded. Works offline once loaded.
Pick a colour or type a HEX, RGB or HSL value and instantly see it in every format, with a live swatch. Everything runs locally in your browser.
How the three color models actually differ
HEX is a 6-digit hexadecimal string that packs three bytes of color data — #3366FF means red=51, green=102, blue=255, each channel written in base-16. RGB is the same three channel values, just written as decimal numbers from 0–255, which is why HEX and RGB are really the same color model wearing different clothes.
HSL (hue, saturation, lightness) rewrites that same color around how humans actually think about it: a hue angle from 0–360°, how saturated or muted it is, and how light or dark it is. That's why HSL is the format designers reach for when they want to say 'same color, just darker' without recalculating three interdependent RGB bytes by hand.
Where this comes up in real work
A designer hands you a HEX code from Figma, but your canvas or WebGL code needs RGB integers. A brand guideline lists a Pantone-adjacent HEX value, but your CSS variables use HSL so you can programmatically generate hover and active states from a single base hue.
- Copying a HEX swatch from a screenshot into a CSS stylesheet
- Converting a designer's RGB spec sheet into HEX for a style guide
- Deriving a lighter/darker shade in HSL for :hover states
- Matching a brand color across a website, a Figma file, and a print PDF that each expect a different format
Shorthand codes and rounding quirks
CSS also accepts 3-digit HEX shorthand like #36F, where each digit is simply doubled (3→33, 6→66, F→FF) to expand back to the full 6-digit form. If a color you convert through HSL and back to RGB lands one unit off from where it started, that's normal — HSL math involves division and multiplication that don't always round to a clean integer, not a bug in the conversion.
A practical tip
To build a consistent hover or pressed state for a button, convert your base color to HSL, keep the hue and saturation exactly as they are, and only shift the lightness value up or down by 8–10%. That keeps the color family visually consistent instead of guessing at a new HEX code from scratch.
Frequently asked questions
Which formats are supported?
HEX (e.g. #3366ff), RGB (e.g. rgb(51, 102, 255)) and HSL.
Is it private?
Yes — the conversion happens entirely in your browser.
Which color formats are supported?
HEX (e.g. #3366ff), RGB (e.g. rgb(51, 102, 255)) and HSL (hue, saturation, lightness) — you can start from any one of the three and see the others update instantly.
Does the conversion happen on my device?
Yes — typing or picking a color runs the math locally in your browser, so nothing about the colors you're working with is sent anywhere.
Can I enter a 3-digit HEX shorthand like #3F6?
Yes — shorthand HEX is standard CSS notation where each digit is doubled (3F6 becomes 33FF66) and converts the same as the full 6-digit form.
Why do HEX and HSL sometimes round to slightly different values?
HSL uses trigonometric-style math to describe a color as hue, saturation and lightness, so converting to RGB and back can shift a channel by 1 due to rounding — this is normal floating-point behavior, not an error.
Can I use this to pick an accessible color pair?
It gives you exact values in all three formats to plug into a contrast checker, though it doesn't calculate WCAG contrast ratios itself — pair the HEX output with a dedicated contrast tool for accessibility sign-off.
Does it support CSS named colors like 'tomato' or 'rebeccapurple'?
The converter works from HEX, RGB and HSL input — if you know a named color's HEX equivalent you can enter that directly to see it in the other formats.
Advertisement