HEX ⇔ RGB ⇔ HSL

Convert color codes between formats instantly

How to Convert a Color Code

  1. Enter the value you have. Type or paste into whichever field matches the format you're starting from — HEX, RGB, or HSL.
  2. Read the others. The remaining fields update to match, and the swatch at the top shows the color so you can confirm it's the one you meant.
  3. Adjust if you like. Every field is editable, so you can nudge a single RGB channel or HSL value and watch the other formats follow.
  4. Copy what you need. Take the value in whichever notation your project uses.

What This Tool Does

Color values move between formats constantly: a designer hands you a HEX, a CSS variable wants RGB channels, a JavaScript library expects HSL. This converter takes any one of the three and gives you the other two immediately, so you don't have to do the arithmetic or look up a chart.

If you don't have a value yet and want to choose one visually, the Color Picker is the better starting point — this tool is for when you already have a code in hand.

Why a Round Trip Can Shift the Value

HEX and RGB describe a color the same way — three channels, 0 to 255 each — so converting between them is exact in both directions. HSL is different: it re-describes the color as hue, saturation, and lightness, and those get rounded to whole numbers for practical use.

That rounding means a round trip isn't always perfectly lossless. Convert a HEX to HSL and back and you may land a point or two away from where you started. The difference is invisible to the eye, but it's worth knowing if you're comparing values programmatically or wondering why a code doesn't match the one you began with. When exactness matters, keep HEX or RGB as your source of truth and treat HSL as a working format for adjusting lightness and building tints.

Frequently Asked Questions

Do HEX and RGB describe the same thing?

Yes. Both give red, green, and blue channel values — HEX writes them in base 16 as six characters, RGB writes them as three numbers from 0 to 255.

What do H, S, and L stand for?

Hue (the position on the color wheel, 0–360), saturation (how vivid the color is, as a percentage), and lightness (how light or dark it is, as a percentage).

Why did my HEX change slightly after converting to HSL and back?

HSL values are rounded to whole numbers, so a round trip can land a fraction away from the original. The visual difference is imperceptible.

Can I enter a three-character HEX like #4AF?

Shorthand HEX expands by doubling each character, so #4AF is the same color as #44AAFF. Entering the full six-character form is the safest way to get an exact match.