FluffyBench

What do HEX, RGB, and HSL mean for a color?

Why can one color have three different codes? HEX and RGB describe its red, green, and blue amounts; HSL makes it easier to picture a softer or lighter shade.

FluffyBench · 5 min read · Reviewed

One color, three ways to write it

HEX and RGB describe amounts of red, green, and blue. HSL describes a color's hue, saturation, and lightness. Think of them as different ways to give an address: a compact code, three coordinates, or a spot on a color wheel with two extra dials.

Here's a teal written in all three notations. The labels describe a color in sRGB, the color range these web color codes use.

#0C9D8A and rgb(12, 157, 138) describe the teal swatch. FluffyBench's rounded HSL output is hsl(172, 86%, 33%).

A teal color with three labels

The swatch stays teal; each label gives you a different way to read it. How we reviewed

HEX and RGB: the same red, green, and blue amounts

HEX packs each channel into a pair of characters after the # sign. It uses base sixteen: the digits 0 through 9, then A through F. RGB writes the amounts as ordinary numbers, from 0 for none of a channel to 255 for its maximum. You don't need to do the arithmetic yourself.

Each HEX pair lines up with one RGB number, in red, green, blue order.

#0C9D8A: Red 0C equals 12; Green 9D equals 157; Blue 8A equals 138. #ABC expands to #AABBCC.

From HEX pairs to RGB amounts

Short HEX repeats each digit; the channel order stays red, green, blue.

Changing one RGB number changes the mix. Here, adding red while leaving green and blue alone turns the teal toward a paler color.

rgb(12, 157, 138) beside an illustrative rgb(138, 157, 138); red changes from 12 to 138, while green and blue stay fixed.

Change one RGB channel

Rendered for illustration: the red amount changes; green and blue stay fixed.

HSL: change hue, saturation, or lightness

When you want a softer blue, adjusting three RGB amounts can feel like guessing. HSL gives you dials that are easier to picture: hue chooses a place around the color wheel, saturation moves from gray to vivid color, and lightness moves from black through the color to white.

You can change saturation or lightness while keeping the same blue hue. Each ladder changes one dial and holds the other two still.

Hue wheel: red 0 degrees, yellow 60, green 120, cyan 180, blue 240, magenta 300. At hue 240 and lightness 50%, saturation rises from 0% gray through 50% to 100% blue. At hue 240 and saturation 100%, lightness rises from 0% black through 50% blue to 100% white.

A color wheel and two blue ladders

Rendered for illustration: less saturation makes blue grayer; more lightness takes it toward white.

HSL lightness isn't a brightness reading. Yellow and blue can share the same lightness setting and still look very different, so don't use that number alone to judge how bright a palette looks.

hsl(60, 100%, 50%) becomes rgb(255, 255, 0); relative luminance 0.9278. hsl(240, 100%, 50%) becomes rgb(0, 0, 255); relative luminance 0.0722

Equal HSL lightness can look very different

Both colors have HSL lightness 50%; relative luminance measures their brightness on a different scale.

Which color notation should you use?

The best notation is the one that makes your next job easier. If a field asks for a particular format, that decides it for you.

Copy a supplied HEX code: HEX. Read red, green, and blue amounts: RGB. Explore a softer or lighter shade: HSL.

Match the notation to your job

Choose by the job: copy a code, read channel amounts, or explore a shade.

Doing it in FluffyBench

FluffyBench's Color Converter gives you HEX, RGB, and HSL together, so you can copy the spelling your next field needs. It accepts short or full HEX, comma-separated rgb(r, g, b), and hsl(h, s%, l%). Space-separated RGB and values with transparency, such as rgba() or eight-digit HEX, aren't accepted; the tool page has the full input list.

Here's how to translate a color in FluffyBench. Results update as you type.

  1. FluffyBench's Color pane with #0C9D8A in the HEX, RGB, or HSL color field and Read as HEX.
    FluffyBench's Color pane with #0C9D8A in the HEX, RGB, or HSL color field and Read as HEX.
    Step 1. Paste your color into the Color pane. Here we're using the teal from this guide.
    1. Enter #0C9D8A in HEX, RGB, or HSL color.
    2. Read as HEX identifies the notation you've entered.
  2. The teal color preview in FluffyBench's Same color pane.
    The teal color preview in FluffyBench's Same color pane.
    Step 2. Check the swatch in Same color: is this the color you meant?
    1. The preview shows the color read from your input.
  3. HEX #0C9D8A, RGB rgb(12, 157, 138), and HSL hsl(172, 86%, 33%) with three row copy buttons.
    HEX #0C9D8A, RGB rgb(12, 157, 138), and HSL hsl(172, 86%, 33%) with three row copy buttons.
    Step 3. Match your destination's format and copy that row. Each button copies its value as text.
    1. Copy HEX copies the compact color code.
    2. Copy RGB copies the red, green, and blue amounts.
    3. Copy HSL copies hue, saturation, and lightness.
  4. Same color header with FluffyBench's Copy all button.
    Same color header with FluffyBench's Copy all button.
    Step 4. Need all three spellings? Copy all is the alternative to copying one row.
    1. Copy all copies the three values on separate lines.

Need to convert a color between HEX, RGB and HSL?

Why rounded HSL can change an exact match

FluffyBench writes HSL with whole numbers, like rounding a price to the nearest dollar and losing the cents. Converting that rounded text back to RGB can change a channel: in this teal, blue moves from 138 to 137. Keep your original HEX or RGB when an exact match matters.

#0C9D8A, rgb(12, 157, 138), through rounded hsl(172, 86%, 33%), returns #0C9D89, rgb(12, 157, 137). Red and green are unchanged; blue changes from 138 to 137.

One round trip through rounded HSL

Both swatches are shown; the blue channel labels reveal the changed value.
Search FluffyBench