Developer
Encoders, converters & dev utilities
Color Converter (HEX ↔ RGB ↔ HSL)
Convert colors between HEX, RGB & HSL with a live swatch. In your browser. Accurate, instant and free — for United States.
100% in-browser — nothing is uploaded
Drag the ring for hue, the square for shade — or use arrow keys.
Edit any field — the picker and the other formats update live. HEX accepts #RGB, #RRGGBB and #RRGGBBAA.
HSL is not HSV / HSB
Working with CSS elsewhere? Hash a value with the Hash Generator, encode assets with the Base64 Converter, or reshape config with the Data-Format Converter.
HEX, RGB and HSL — three ways to write one color
HEX and RGB are two spellings of the same 8-bit sRGB values; HSL is a cylindrical remapping of them. Type any one into the tool above and the other two update instantly, with a live swatch.
HEX
Hexadecimal channels
#ff8800
- #RRGGBB — one byte per channel
- #RGB shorthand expands (F80 → FF8800)
- #RRGGBBAA adds alpha
RGB(A)
Decimal channels
rgb(255, 136, 0)
- Each channel 0–255
- Same values as HEX, in decimal
- rgba(…, 0.5) adds opacity
HSL(A)
Hue, saturation, lightness
hsl(32, 100%, 50%)
- Hue 0–360°, S & L 0–100%
- Great for tints & shades
- CSS-native (unlike HSV)
HSL is not HSV / HSB — and where alpha fits
HSL and HSV share a hue angle but use different geometry for the other two axes — so the same three numbers describe differentcolors. Knowing which model your tool speaks prevents a whole class of "why doesn't this match?" bugs.
HSL — lightness
CSS-native
- L 100% → white; L 0% → black
- L 50% at full S → the pure hue
- Symmetric — easy tints & shades
HSV / HSB — value
Common in design apps
- V 100% at full S → the pure hue
- No built-in white at the top
- Not a CSS format — convert first
Alpha is opacity, not color
The nearest CSS keyword color
CSS defines keyword colors — red, orange, teal, crimson — that map to fixed RGB values. The tool labels your color with the closest keyword by Euclidean distancein RGB space: the keyword whose R, G, B are nearest to yours. It's an approximation — RGB distance isn't a perfect model of perception — but a useful ballpark label.
Frequently asked questions
They are three ways to write the same sRGB color. HEX is a hexadecimal shorthand for the red, green and blue channels — #FF8800 means R=255, G=136, B=0. RGB writes those same channel values in decimal — rgb(255, 136, 0) — and RGBA adds an alpha (opacity) channel. HSL describes the color as hue (an angle 0–360° around the color wheel), saturation (0–100%) and lightness (0–100%), which maps more closely to how people think about adjusting a color. HEX and RGB are two spellings of the identical 8-bit values; HSL is a mathematical remapping of them.
No. HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, value/brightness) share the hue angle but use different geometry for the other two axes, so the same numbers describe different colors. In HSL, lightness 100% is always white and 50% is the pure hue; in HSV, value 100% is the pure hue at full brightness and there is no built-in white point at the top. CSS supports HSL (and HWB) natively but not HSV, so this converter uses HSL. If a design tool shows you HSB/HSV values, they will not match HSL directly.
Alpha is opacity: 1 (or 100%) is fully opaque and 0 is fully transparent. In HEX it is an optional extra byte — #FF880080 is #FF8800 at 50% opacity (0x80 = 128 ≈ 0.5). In RGB and HSL you express it as rgba(255,136,0,0.5) or hsla(32,100%,50%,0.5). Alpha does not change the color itself, only how much of the background shows through when it is composited.
CSS defines a set of keyword colors such as red, orange, teal and crimson that map to fixed RGB values. This tool shows the named color closest to your current value by measuring the straight-line (Euclidean) distance between the two colors in RGB space and picking the smallest. It is a rough approximation — RGB distance does not perfectly match human perception — but it is a handy label for the ballpark of a color.
Different tools speak different formats. A design file might give you HEX, a CSS variable system might prefer HSL so you can derive tints and shades by nudging lightness, and a canvas or shader API might want RGB channel values or normalized floats. Converting lets you move a single source-of-truth color between design handoff, CSS, and code without re-picking it — and HSL in particular makes it easy to build a consistent palette by holding hue fixed and varying saturation and lightness.
Method, standards & references
Method: HEX is parsed to 8-bit RGB channels (with 3/4-char shorthand expansion and optional alpha byte); RGB↔HSL uses the W3C CSS Color 3/4 formulas; the nearest named color is the smallest Euclidean distance in RGB space over the CSS keyword set. Everything runs in your browser — nothing is uploaded.
How we calculate this
Reviewed by Reckonist Editorial · Last reviewed 4 July 2026. Figures follow the methods and sources set out in our editorial standards.
This tool converts colors between HEX, RGB and HSL entirely in your browser for design and front-end work. Conversions are standard sRGB math; the nearest-named-color label is an RGB-distance approximation, not a perceptual match.
Keep going
Same-category tools follow this colour; a cross-category link keeps its own.