Color Converter

Convert any color between HEX, RGB, and HSL formats instantly. Enter a value in any field and all three representations update live, with a color swatch showing exactly what the color looks like. Copy each format with a single click.

Adjust any color field above.

How It Works

Every color on a screen can be described in multiple ways. Three of the most common formats used in web development and design are HEX, RGB, and HSL — and while they all represent the same underlying color, each format has different strengths depending on the context.

**HEX — The Web Standard**

A HEX color code is a six-character string prefixed with a hash sign, like #4F46E5. The six characters are split into three pairs: the first pair represents the red channel, the second the green channel, and the third the blue channel. Each pair is a two-digit hexadecimal number ranging from 00 (0 in decimal, no intensity) to FF (255 in decimal, full intensity). So #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. HEX notation is compact and universally accepted in CSS, SVG, HTML attributes, and most design applications. A shorthand form exists for colors where each pair has identical digits: #AABBCC can be written as #ABC.

**RGB — Red, Green, Blue**

The RGB model describes a color as three integer values, one for each light channel: red, green, and blue. Each value ranges from 0 (no contribution) to 255 (full intensity). The notation in CSS looks like rgb(79, 70, 229). Mixing all three at full intensity gives white (255, 255, 255); all at zero gives black (0, 0, 0). RGB maps closely to how display hardware works — screens physically blend red, green, and blue subpixels — which makes it intuitive for programmers who think in terms of hardware output.

**HSL — Hue, Saturation, Lightness**

HSL describes color in terms that are closer to human perception. Hue is the base color expressed as a degree on a 360-degree color wheel: 0° and 360° are red, 120° is green, 240° is blue, and the rest are the colors in between. Saturation is expressed as a percentage from 0% (completely grey, no color) to 100% (fully vivid). Lightness is also a percentage: 0% is pure black, 50% is the "normal" color, and 100% is pure white. HSL is especially useful for programmatically lightening, darkening, or desaturating a color — you simply adjust a single component rather than recalculating all three RGB values.

**The Conversion Formulas**

Converting HEX to RGB is straightforward: parse each two-character hex pair with parseInt(pair, 16) to get a decimal value between 0 and 255.

Converting RGB to HSL requires normalizing the R, G, B values to the 0–1 range, finding the maximum and minimum channel values, and then computing: lightness = (max + min) / 2; saturation = (max − min) / (1 − |2L − 1|) when L ≠ 0 or 1; hue depends on which channel is the maximum — if red is max, H = ((G − B) / (max − min)) × 60, and so on for green and blue.

Converting HSL back to RGB uses the inverse: compute an intermediate chroma value, derive temporary RGB components from the hue, then shift and scale them using the lightness.

**Practical Use Cases**

In CSS, you might define a brand color as a HEX value, then use HSL in JavaScript to generate a tinted button hover state or a full palette of shades. Designers frequently pick colors in HSL because adjusting just the lightness slider produces a predictable, harmonious variation. Meanwhile, image-processing scripts often work in raw RGB values for pixel-level manipulation. This tool handles all three directions instantly so you can work freely across different environments without manual arithmetic.

Frequently Asked Questions

What is the difference between HEX and RGB?

They encode the same information — red, green, and blue channel intensities — but in different notations. HEX expresses each channel as a two-digit base-16 number (#FF is 255 in decimal), while RGB writes the same three values as plain decimal integers: rgb(255, 0, 0). Both are accepted in CSS and most design tools; the choice is usually personal preference or a framework convention.

Why does HSL make it easier to create color palettes?

Because you can change just one component at a time. To make a color lighter, increase the L value without touching H or S. To make it less vivid (muted), lower the S value. This is far more intuitive than adjusting R, G, and B simultaneously and hoping the result looks right. Most design systems define their color scales this way — a base hue at multiple lightness steps from dark to light.

Does this tool support 3-digit HEX shorthand like #FFF?

Yes. When you type a 3-digit HEX code, the converter automatically expands it by doubling each character: #ABC becomes #AABBCC before parsing. The result fields and swatch update normally. The output is always shown as the full 6-digit form.

What happens if I enter an out-of-range value, like RGB 300?

The converter clamps values to their valid range. RGB channels are clamped to 0–255, HSL hue to 0–360, and saturation and lightness to 0–100. An invalid HEX string (wrong length or non-hex characters) shows an inline error and the swatch does not update until the value is corrected.

Can I share a specific color with someone?

Yes — the URL updates automatically as you change the color, appending ?hex=RRGGBB (without the # sign). You can copy the URL from your browser address bar, or use the Share link button to copy it to your clipboard in one click. The recipient opens the link and sees the same color loaded instantly.