Color Converter
Convert between HEX, RGB, and HSL with a live swatch.
Three or six hex digits, with or without #. For example #0080ff or #08f.
Everything is computed locally with no network calls. Switch the input model above to enter a color as hex, RGB, or HSL.
Hex
- RGB
- rgb(0, 128, 255)
- HSL
- hsl(210, 100%, 50%)
Converted in your browser. Color values never leave this device.
How the color converter works
This tool moves a single color between the three formats the web uses every day: hex
(#0080ff), RGB (red, green, and blue from 0 to 255), and HSL (hue, saturation, and
lightness). Pick an input model, type the color in that format, and the converter shows the other two
along with a live swatch so you can see exactly what you have.
Hex and RGB describe the same thing two ways. A hex color is just the three channels written in
base 16, so #0080ff is red 00, green 80, and blue ff, which is 0, 128, and 255 in
decimal. Converting between them is a direct rewrite with no loss.
HSL is a different way of describing the same point. Lightness is the midpoint between the brightest and darkest channel. Saturation measures how far the color is from grey at that lightness. Hue is the angle on the color wheel, from 0 (red) through 120 (green) to 240 (blue). The converter normalizes each channel to a 0 to 1 range, derives those three values using the standard sRGB formulas from the CSS Color specification, and rounds hue to a whole degree and saturation and lightness to whole percents for readability.
Worked example
Start from the hex value #0080ff.
- Split it into channels: red
00= 0, green80= 128, blueff= 255, giving rgb(0, 128, 255). - Normalize: red 0, green 0.502, blue 1. The brightest channel is blue (1) and the darkest is red (0).
- Lightness is the midpoint:
(1 + 0) / 2 = 0.5, which is 50%. - Saturation is
delta / (1 - |2L - 1|) = 1 / 1 = 1, which is 100%. - Hue: blue is the dominant channel, so hue is
((red - green) / delta + 4) * 60. That is((0 - 0.502) / 1 + 4) * 60 = 209.9, which rounds to 210 degrees.
So #0080ff becomes rgb(0, 128, 255) and hsl(210, 100%, 50%), a bright azure blue. Feeding
hsl(210, 100%, 50%) back in returns the same hex, confirming the round trip.
How to use it
- Choose the input model at the top: Hex, RGB, or HSL.
- For hex, type three or six hex digits, with or without the hash.
- For RGB, type three whole numbers from 0 to 255, separated by commas.
- For HSL, type the hue in degrees, then saturation and lightness as percents from 0 to 100.
- Read the other two formats and the swatch instantly, and use the share link to copy a URL that reopens the same color.
Limitations
The converter covers the three standard opaque models. It does not handle an alpha channel (the
eight-digit #rrggbbaa form or rgba/hsla), wide-gamut spaces such as Display P3, or named CSS
colors. It also rounds HSL to whole units, so a few dark, saturated colors shift by a level or two
when you convert RGB to HSL and back. Keep your hex or RGB value as the source of truth, and treat
HSL as the human-readable view.
Frequently asked questions
Which hex formats does it accept?
Both the six-digit form (#0080ff) and the three-digit shorthand (#08f), with or without the leading hash, in upper or lower case. The shorthand expands each digit, so #08f means #0088ff. Anything else, such as a four-digit value or a non-hex letter, is flagged as invalid rather than guessed at.
Why does my HSL show whole numbers when I expected decimals?
Hue is rounded to the nearest degree and saturation and lightness to the nearest percent, because that is how these values are almost always written in CSS. The rounding is tiny, well under one step on a 0 to 255 channel, so converting back to RGB lands on the same color you started with for the vast majority of inputs.
What happens with grey, black, and white?
When the red, green, and blue channels are equal the color is achromatic: it has no hue. The converter reports hue 0 and saturation 0, and only the lightness changes, from 0 for black through 50 for mid grey to 100 for white. This matches how every browser normalizes a grey in HSL.
Is RGB to HSL and back always exact?
It is exact for most colors and off by at most a few levels per channel for some dark, highly saturated ones. That small drift comes from rounding hue, saturation, and lightness to whole units for readability. If you need a perfect round trip, keep the hex or RGB value as your source and treat HSL as a readable view.
Do my colors get sent anywhere?
No. Every conversion runs in your browser with no network request. The color you type is never logged, stored on a server, or shared. The only thing that touches the address bar is the value itself, so a link you copy reproduces the same color, and nothing else leaves your device.