Color Converter — HEX, RGB & HSL

What Are HEX, RGB, and HSL?

Every color your screen can show is ultimately a mix of three primary channels of light: red, green, and blue. HEX, RGB, and HSL are simply three different ways of writing that same triple, and this converter lets you move between them without doing the arithmetic yourself. Understanding the differences is the key to choosing the right format for the job.

HEX

A hex color is a base-16 number split into three pairs: #3498db means red = 34 hex (52 decimal), green = 98 hex (152 decimal), blue = db hex (219 decimal). Because each pair runs from 00 to ff (0–255), a full hex color is always six digits. A shorthand form, #34d, is exactly equivalent to #3344dd — each digit is doubled, so it only works when both digits of a channel match. HEX is the compact workhorse of web development and design tools, and is what this site's own palette was chosen in.

RGB

RGB spells out the same three numbers directly, each in 0–255: rgb(52, 152, 219). It is the most literal model — there is nothing between the notation and the hardware's three light emitters — which makes it the natural choice for image editors, canvas and WebGL code, and APIs that deal in raw pixel values. Its weakness is readability: rgb(52, 152, 219) tells you almost nothing about what the color looks like.

HSL

HSL (hue, saturation, lightness) re-expresses the same triple in terms that match how people actually describe color. Hue is the position on the color wheel in degrees (0 = red, 120 = green, 240 = blue, with 360 wrapping back to red). Saturation is the intensity of the hue as a percentage (0% is gray, 100% is vivid). Lightness is how close the color is to black or white (0% is black, 50% is the pure hue, 100% is white). So hsl(204, 70%, 53%) reads as "a medium, fairly saturated blue." That semantic power is why designers use HSL for adjusting shades and tints: bumping lightness up by ten points gives a lighter version of exactly the same hue, which is much harder to reason about in RGB.

How the Conversions Work

Moving between HEX and RGB is trivial — it is just base-16 to base-10 — but converting RGB to HSL (and back) requires the formulas below, which are the same math the CSS Color specification defines. Let r, g, b be the channels scaled to 0–1, and let max and min be the largest and smallest of the three.

Concretely, hue depends on which channel is largest: if red dominates, hue starts from the red sector (0°) and is adjusted by how far green and blue are apart; if green dominates it starts at 120°; if blue dominates, at 240°. When all three channels are equal the color is a gray, the delta is zero, saturation is defined as 0, and hue is meaningless (this tool reports 0). Converting back from HSL to RGB runs the same formulas in reverse through the standard "hue to RGB" helper function.

Step-by-Step: Converting #3498db by Hand

Follow along once so the math never feels like magic. Start with the hex value #3498db:

1. HEX → RGB: convert each hex pair to decimal. 34 = 52, 98 = 152, db = 219. So rgb(52, 152, 219).
2. Scale to 0–1: divide each channel by 255, giving approximately r = 0.204, g = 0.596, b = 0.859. Here max = 0.859 (blue) and min = 0.204 (red).
3. Lightness: L = (0.859 + 0.204) / 2 = 0.531, or 53.14%.
4. Delta: Δ = 0.859 − 0.204 = 0.655.
5. Saturation: S = 0.655 / (1 − |2 × 0.531 − 1|) = 0.655 / 0.938 = 0.699, or 69.87%.
6. Hue: blue is the dominant channel, so hue starts in the blue sector: 60 × ((r − g) / Δ + 4) = 60 × ((0.204 − 0.596) / 0.655 + 4) = 60 × 3.401 = 204.07°.

Result: #3498db = rgb(52, 152, 219) = hsl(204.07, 69.87%, 53.14%) — exactly what the tool above shows. And the round trip works: plug those HSL values back into the reverse formula and you recover rgb(52, 152, 219) exactly, which is why converting a color back and forth never drifts.

Conversion Reference Table

Paste any of the HEX values above into the tool to watch all three representations appear at once, or type any other color you have on hand.

When to Use Each Format

• HEX — the default for CSS custom properties, design tokens, brand style guides, and copying between design tools. Compact and unambiguous.
• RGB — anywhere raw pixel values are the interface: canvas/WebGL drawing, image processing, data visualization libraries, and APIs that return or accept channel triples.
• HSL — when you are generating color systems programmatically. A ramp of ten shades is trivially produced by stepping lightness while holding hue and saturation constant, which is exactly how the site's palette generator works. HSL is also the best format for "make this a bit softer" edits.

Troubleshooting & Common Mistakes

Invalid hex input

The converter accepts only three- or six-digit hex (with or without the leading #). The usual mistakes: accidentally copying the 0x-prefixed form from code (e.g. 0x3498db), mixing in non-hex characters, or pasting an eight-digit hex with an alpha pair (#3498db80) — strip the final two digits first. The tool shows a clear error instead of guessing, so the moment the field turns red you know exactly what to fix.

Confusing HSL with HSB/HSV

As covered in the FAQ, HSL and HSB share a hue circle but differ in the third axis. If you are converting a color that came from a tool labeled HSB or HSV, do not assume the numbers are interchangeable — convert deliberately between the two models, or you will get visibly different colors.

Rounding when you don't need to

This tool rounds HSL to two decimals so the display stays tidy, but the underlying conversion is exact and round-trips cleanly. If you hand-type rounded HSL values back into CSS you may see a one-unit shift in a channel; that is unavoidable rounding, not a bug in the tool.

Frequently Asked Questions