Free online color converter. Convert between HEX, RGB, and HSL color codes instantly with a live color preview. Essential for web design, CSS, and graphic design. Accurate, instant, no sign-up.
HEX ↔ RGB ↔ HSL • live preview
Convert design HEX codes to RGB/RGBA for transparency, or HSL for easy lightness and saturation tweaks in CSS.
Match brand colors across tools — Figma, Photoshop, and Illustrator each prefer different formats.
HSL (hue, saturation, lightness) makes it intuitive to create tints, shades, and color variations programmatically.
Digital colors are described in three common formats. HEX (hexadecimal) is the web standard: a 6-digit code like #2563EB, where the pairs represent Red, Green, and Blue from 00 to FF (0–255 in decimal). RGB expresses the same values as decimals — rgb(37, 99, 235) — which is handy when you need an alpha channel (RGBA) for transparency. Both describe identical colors; HEX is just a compact way of writing RGB. Converting between them is constant work for web developers and designers.
HSL (Hue, Saturation, Lightness) takes a different, more human approach: hue is an angle on the color wheel (0–360°), saturation is color intensity (0–100%), and lightness runs from black to white (0–100%). HSL makes it easy to generate a palette — keep the hue and adjust lightness for tints and shades, or rotate the hue for complementary colors. Modern CSS supports all three formats, so converting accurately between HEX, RGB, and HSL lets you pick the most convenient representation for each task, whether matching a brand color, building a design system, or fine-tuning a gradient.
#RRGGBB — two hex digits each for red, green, blue. #FF0000 = pure red, #00FF00 = green, #0000FF = blue, #FFFFFF = white, #000000 = black.
rgb(r, g, b) with each 0–255. rgb(255,0,0) = red. Add alpha for transparency: rgba(255,0,0,0.5) = 50% transparent red.
hsl(hue, sat%, light%). Hue 0/360 = red, 120 = green, 240 = blue. Lightness 0% = black, 50% = pure color, 100% = white.
Red #FF0000. Blue #0000FF. Green #008000. Black #000000. White #FFFFFF. Gray #808080. Orange #FFA500.
Digital colour has several representations describing the same thing for different purposes. RGB and its hex shorthand are how displays actually work, mixing red, green and blue light in 256 levels each — 16.7 million combinations. HSL restructures the same information into hue, saturation and lightness, which maps far better onto how people reason about colour: making something "lighter" is one number in HSL and three coordinated changes in RGB. That is why design systems are usually built in HSL and rendered in hex. CMYK is a different beast entirely — subtractive ink rather than additive light — and cannot reproduce many RGB colours at all.
Hex = RGB values written as two hexadecimal digits eachL = (max + min) ÷ 2, where max/min are the largest and smallest of R,G,B ÷ 255S = (max − min) ÷ (1 − |2L − 1|)H = 60° × the offset of the dominant channelwhere:
Assumptions: sRGB colour space, the web default. Wide-gamut displays and print (CMYK) cover different ranges, so a colour that renders correctly on screen may be out of gamut for a printer.
Take a common interface blue through both conversions.
Resultrgb(52,152,219) = #3498DB = hsl(204, 70%, 53%)
The HSL form is the useful one for building a palette: holding hue and saturation while varying lightness from 20% to 90% produces a coherent tonal ramp of the same colour, which is extremely awkward to generate by adjusting RGB values directly.