Accepts #rgb, #rrggbb, and 8-digit #rrggbbaa hex, plus rgb()/rgba() and hsl()/hsla(). Invalid input turns the field red until it parses.
Quick answer
HEX, RGB, and HSL are three ways of writing the same color. HEX packs the red, green, and blue channels into base-16 pairs (#RRGGBB); RGB writes those channels as 0–255 numbers; HSL describes the color by hue, saturation, and lightness. Edit any field above and the other two update live — all in your browser, nothing uploaded.
How the conversions work
All three formats describe a point in the same color space, so conversion is just arithmetic:
- HEX ↔ RGB — each color channel is one byte.
#3B82F6splits into3B,82,F6, which are59,130,246in decimal. Going back, each 0–255 number is written as a two-digit base-16 value. - RGB → HSL — find the max and min channel to derive lightness, then compute saturation and the hue angle from which channel is dominant.
- HSL → RGB — reverse the process, mapping the hue angle back onto the red/green/blue mix at the given saturation and lightness.
Because HEX and RGB are limited to 256 steps per channel while HSL is continuous, an HSL → RGB → HSL round trip can round to the nearest representable color. The visible result is identical; only the final digit may move by one.
Which format to use, and when
- HEX is the most compact and is the default in design tools and most CSS. Great for storing and sharing a single fixed color.
- RGB / RGBA is handy when you need transparency (
rgba(0,0,0,0.5)) or when you're manipulating channels programmatically, for example in a canvas or image pipeline. - HSL / HSLA is the most human-friendly for building palettes. To make a color lighter, raise the lightness; to create a complementary color, add 180° to the hue. The shade strip on the left is generated exactly this way — same hue and saturation, stepped lightness.
Worked example
Take the blue #3B82F6. Converting it across formats gives:
HEX #3B82F6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)To make a hover state 15% darker, drop the HSL lightness from 60% to 45% — hsl(217, 91%, 45%) — which is far more intuitive than guessing new RGB numbers. Paste any of these into the fields above to see the others and the live swatch update.
Accessibility note
Color choice is also an accessibility decision. Text needs sufficient contrast against its background — WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text. HSL makes this easier to tune: keep the hue, and adjust lightness until the contrast passes. The swatch above automatically flips its label between black and white based on the color's luminance, which is the same relative-luminance calculation contrast checkers use.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the six-digit hex into three pairs and read each as a base-16 number: #3B82F6 becomes R=0x3B=59, G=0x82=130, B=0xF6=246, i.e. rgb(59, 130, 246). This tool does it instantly — paste the hex and the RGB value updates as you type.
What is the difference between RGB and HSL?
RGB describes a color by how much red, green, and blue light it mixes (0–255 each). HSL describes the same color by Hue (0–360° on the color wheel), Saturation (0–100%), and Lightness (0–100%). HSL is easier for humans to reason about — to make a color lighter you just raise the lightness, and to shift it toward another color you change the hue.
Do HEX, RGB, and HSL support transparency?
Yes. HEX supports an alpha channel as an 8-digit value (#RRGGBBAA), and CSS has rgba() and hsla() (plus modern rgb()/hsl() with a slash alpha). This converter preserves alpha across all three formats when you include it.
Is my color data sent to a server?
No. All conversion runs entirely in your browser with JavaScript. Nothing you type is uploaded, and the tool works offline once the page has loaded.
Why does my HSL value look slightly different after a round trip?
HEX and RGB store 256 discrete steps per channel, while HSL is continuous, so converting HSL → RGB → HSL can round to the nearest representable color. The visible color is effectively identical; only the last digit of the HSL numbers may shift by one.