Free hex / RGB / HSL color converter

What this color converter does

This color converter takes one color and shows it in the three formats CSS and design tools use every day: HEX (#RRGGBB), RGB (rgb(r, g, b)) and HSL (hsl(h, s%, l%)). Type a hex value — or pick a shade with the color picker — and the matching RGB and HSL strings appear instantly, ready to copy straight into your stylesheet.

All three are the same color written three ways. HEX and RGB describe how much red, green and blue light to mix. HSL describes the same point by its hue, saturation and lightness, which is far easier to tweak by hand. The converter does the arithmetic so you do not have to convert hex to RGB or RGB to HSL in your head.

HEX, RGB and HSL explained

Each format encodes the same display color, but they read very differently. Knowing what each number means tells you which one to reach for.

HEX — #RRGGBB

A hex color is a hash followed by three pairs of hexadecimal (base-16) digits: two for red, two for green, two for blue. Each pair runs from 00 (none) to ff (full, which is 255 in decimal). So #ff0000 is pure red and #000000 is black. It is compact, case-insensitive, and the format you will paste most often.

RGB — rgb(r, g, b)

RGB writes the three channels as plain decimal numbers from 0 to 255. It is "additive" — start from black and add light, so the more of each channel, the brighter the result, and all three at full gives white. rgb(255, 0, 0) is the same pure red as #ff0000; the only difference is base 10 versus base 16.

HSL — hsl(h, s%, l%)

HSL re-describes the color the way a person thinks about it. Hue is an angle from 0 to 360° around the color wheel (0° red, 120° green, 240° blue). Saturation is a percentage from 0% (grey) to 100% (vivid). Lightness is a percentage from 0% (black) through 50% (the pure hue) to 100% (white). The percent signs are part of the syntax — hsl(220, 60%, 50%), not hsl(220, 60, 50).

How the conversion works

There are two conversions under the hood, and they are very different in character. HEX and RGB are the same numbers in different bases. HSL is a genuine reshaping of those numbers into hue, saturation and lightness.

• HEX ↔ RGB is a base change. Each two-digit hex pair is one channel read in base 16. 33 is 3×16 + 3 = 51, 66 is 6×16 + 6 = 102, cc is 12×16 + 12 = 204. To go back, write each 0–255 channel as two hex digits. No color information changes — only the way the digits are written.
• RGB ↔ HSL is a transform. Divide each channel by 255, find the largest and smallest of the three, and derive lightness from their midpoint, saturation from their spread, and hue from which channel leads. It is the standard formula in the CSS spec.

A worked example: #3366CC across all three formats

Step 1 — HEX to RGB (read each pair in base 16)

Split into three pairs: 33, 66, CC. In decimal that is 3×16+3 = 51, 6×16+6 = 102, and 12×16+12 = 204. So the color is rgb(51, 102, 204).

Step 2 — RGB to HSL (find lightness, saturation, hue)

Scale to 0–1: 0.200, 0.400, 0.800. The max (0.800, blue) and min (0.200, red) average to 0.500, so L = 50%. The spread gives S = 60%. Blue leads, placing the hue near the blue side of the wheel at H = 220°.

Step 3 — Read off the result

The color is hsl(220, 60%, 50%). Type #3366CC into the converter and it reports exactly rgb(51, 102, 204) and hsl(220, 60%, 50%) — the same blue, three ways.

When to use HEX, RGB or HSL

Browsers treat all three identically, so the "best" format is whichever is easiest for the job in front of you. A rough rule: HEX and RGB for code and exact values, HSL for thinking and tweaking.

• HEX — shortest to write and the de-facto default in design tools, brand guides and most stylesheets. Best when you just need to drop in an exact color.
• RGB — when a value comes from an image, a pixel reading or a tool that thinks in 0–255 channels, or when you need the alpha form rgb(r g b / a).
• HSL — when you are designing relationships between colors. To make a shade darker, lower the lightness. To mute it, lower the saturation. To build a palette, keep the hue and vary the other two. That is awkward in HEX or RGB and obvious in HSL.

Common colors in HEX, RGB and HSL

A quick lookup for everyday colors across all three formats. Each row is the identical color written three ways — exactly what the converter outputs for that hex value.

Values computed with the CSS Color Module Level 3 conversion; HSL channels are rounded to whole numbers, matching the converter's output.

Alpha and opacity: RGBA, HSLA and 8-digit hex

The three formats above describe opaque colors — and so does this converter. To add transparency, CSS extends each format with an alpha channel from 0 (fully transparent) to 1 (fully opaque):

• RGBA — rgba(51, 102, 204, 0.5), or the modern slash form rgb(51 102 204 / 50%), for the example blue at half opacity.
• HSLA — hsla(220, 60%, 50%, 0.5), the same half-transparent blue in HSL.
• 8-digit hex — #3366CC80 adds a fourth pair for alpha (80 ≈ 50%), supported in all modern browsers.

Common color-format mistakes (and how to avoid them)

Most "the color isn't applying" bugs come from small syntax slips. These are the ones that catch people out.

• Three-digit vs six-digit hex. #36c is valid shorthand for #3366cc — each digit is doubled. But #36cc (four digits) is not a color. Stick to 3, 6, or (with alpha) 4 or 8 digits.
• Forgetting the % in HSL. Saturation and lightness must carry a percent sign: hsl(220, 60%, 50%) works, hsl(220, 60, 50) does not. Hue takes no unit.
• Channel range mix-ups. RGB channels run 0–255, not 0–100. rgb(60%, 60%, 60%) is legal but means percentages, not raw values — don't mix the two.
• Dropping the hash. 3366cc with no # is not a valid CSS color, even though many tools accept it. The converter is forgiving about the hash; your stylesheet may not be.

How accurate is this color converter?

Calculators that work alongside the hex / RGB / HSL color converter

These pair naturally with this one for decisions that sit nearby.

Frequently asked questions about the free hex / RGB / HSL color converter

About this Color Converter (hex / RGB / HSL)

This color converter runs entirely in your browser — the color you enter is never sent anywhere. Type a hex value or pick a shade, and it shows the equivalent HEX, RGB and HSL instantly, ready to copy into your CSS. It converts an opaque color between formats; alpha/opacity is handled separately.

It is one of our free developer tools; browse the full set on the calculators index.