HEX / RGB / HSL Color Converter

How this is calculated

HEX, RGB, and HSL all describe the same color in different ways. HEX and RGB both encode red, green, and blue directly (HEX in base-16, RGB in base-10); HSL instead describes hue, saturation, and lightness. Converting between them uses standard, well-defined formulas.

Three ways to describe the same color

Every color on a screen is ultimately made of red, green, and blue light mixed together — HEX and RGB both describe this mix directly, just in different number systems. HSL takes a more human-friendly approach: instead of thinking in terms of red/green/blue amounts, it describes a color by its hue (the base color on a color wheel), saturation (how vivid or muted it is), and lightness (how close to black or white it is). Designers often find HSL more intuitive for tasks like "make this a bit darker" or "same color, less saturated" — adjustments that are awkward to reason about directly in RGB or HEX.

HEX to RGB

Example: #6C3FC7 splits into RR=6C, GG=3F, BB=C7, which convert from base-16 to base-10 as R=108, G=63, B=199.

RGB to HSL

RGB values are first normalized to a 0–1 range, then lightness is the average of the max and min channel values, saturation depends on how far apart the max and min channels are, and hue is derived from which channel (R, G, or B) is dominant. The exact formula is more involved than a single line, but the calculator above handles it directly.

Common HEX shorthand

Common pitfalls

• Forgetting the 3-digit HEX shorthand — #F00 and #FF0000 are the same color; each shorthand digit is simply doubled to expand it.
• Confusing HSL lightness with RGB brightness — 50% lightness in HSL is the "purest" version of a hue, not necessarily what looks brightest on screen; 0% and 100% lightness are always black and white respectively, regardless of hue.
• Mixing up saturation and lightness — lowering saturation makes a color more gray/muted; lowering lightness makes it darker — they're independent adjustments.

Tips

• To darken a color while keeping its identity, lower the HSL lightness value rather than editing RGB or HEX directly.
• To create a muted or pastel version of a color, lower the HSL saturation while keeping hue and lightness roughly the same.
• HEX is the most common format for CSS and design tools; HSL is often easier when you need to programmatically generate color variations (like a set of shades).

More worked examples

Example — Brand color to CSS variable: A brand's primary purple, RGB(108, 63, 199), converts to #6C3FC7 for use directly in a CSS file or design tool.

Example — Building a shade scale: Starting from HSL(261°, 55%, 51%), keeping hue and saturation fixed while stepping lightness from 20% to 80% in increments produces a consistent set of shades of the same color — a common technique for generating a design system's color palette.

Example — Checking a design spec: A designer hands off "hsl(220, 70%, 50%)" but your codebase uses HEX values — converting it gives #267ACC, ready to paste into CSS.

Frequently asked questions

What's the difference between HEX and RGB? They describe the exact same red/green/blue values — HEX uses base-16 (hexadecimal) notation like #FF0000, while RGB uses base-10 numbers like rgb(255, 0, 0).

What does HSL stand for? Hue, Saturation, and Lightness — a way of describing color that's often more intuitive for humans than raw RGB values.

How do I make a color darker without changing its hue? Lower the Lightness value in HSL while keeping hue and saturation the same — this darkens the color without shifting which color it fundamentally is.

What is 3-digit HEX shorthand? A shorthand like #F00 where each digit is doubled to expand to the full 6-digit form — #F00 becomes #FF0000.

Why would I use HSL instead of HEX? HSL makes it easier to reason about adjustments like 'more saturated' or 'a bit darker' since those map directly to one HSL value, unlike HEX or RGB where such changes affect all three numbers.

Is HSL lightness the same as brightness? Not exactly — HSL lightness of 50% gives the purest version of a hue, while both 0% and 100% always produce black and white regardless of hue, which differs from how 'brightness' works in other color models.

Can I convert HSL directly to HEX? Yes — this calculator converts HSL to RGB internally first, then RGB to HEX, giving you both results from a single HSL input.

What's a common use case for this converter? Converting a color a designer specifies in one format (like HSL from a design tool) into the format your code actually needs (like HEX for CSS).

Does saturation or lightness change first when I adjust a color? They're independent — saturation controls how vivid vs. gray a color is, and lightness controls how close to black or white it is, and you can adjust either without affecting the other.