HEX vs RGB vs HSL: Understanding Color Formats

Three formats describe the same color in three different ways. HEX is compact and ubiquitous in code. RGB is intuitive for understanding how screens produce color. HSL is the most human-readable, breaking color into hue, saturation, and lightness: the way designers actually think about color. Knowing how to move between them makes color work in CSS, design tools, and code much faster.

Key Takeaways

• HEX uses 6 hexadecimal digits to represent red, green, and blue channels (e.g., #FF5733).
• RGB uses three integers from 0–255 for the same channels (e.g., rgb(255, 87, 51)).
• HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%).
• All three describe identical colors; choose the format that fits the task.
• HSL is best for adjusting tones; HEX is most compact; RGB is the technical foundation.

How Screens Produce Color

Every pixel on a typical display is made of three tiny light emitters: red, green, and blue. By varying the brightness of each, the pixel produces any color. This is the additive color model: combining red, green, and blue light produces white (unlike paint, where mixing pigments gets darker).

All three color formats describe how bright each of the three channels should be.

RGB Format

RGB lists three values, each between 0 and 255, representing the intensity of red, green, and blue.

Syntax: rgb(R, G, B) where R, G, B are 0–255.

Examples:

• rgb(255, 0, 0): pure red
• rgb(0, 255, 0): pure green
• rgb(0, 0, 255): pure blue
• rgb(255, 255, 255): white (all channels at maximum)
• rgb(0, 0, 0): black (all channels at zero)
• rgb(128, 128, 128): middle gray

RGB with alpha: rgba(255, 87, 51, 0.8) is the same color at 80% opacity.

RGB is the most direct format: it tells you exactly what the display will do. It is less intuitive when you want to lighten or shift a color, because adjusting individual channels rarely produces the change you expect.

HEX Format

HEX is RGB written in hexadecimal (base-16). Each color channel uses two hex digits, ranging from 00 to FF (decimal 0 to 255).

Syntax: #RRGGBB

Examples (same colors as above):

• #FF0000: red
• #00FF00: green
• #0000FF: blue
• #FFFFFF: white
• #000000: black
• #808080: middle gray

Hexadecimal uses digits 0–9 and letters A–F to represent values 0–15. Two hex digits cover 0–255 in a compact form.

Hex shortcuts:

• #FFF is shorthand for #FFFFFF when each channel has identical hex digits.
• #F00 = #FF0000, #0F0 = #00FF00, etc.

HEX with alpha: 8-digit hex includes alpha at the end. #FF573380 is the orange-red above at ~50% opacity.

HEX is the default in CSS and most design tools because it is compact and copies cleanly. It is hard to read intuitively ("is #7A4ECF blue or purple?"), but easy to share and store.

HSL Format

HSL describes color using three more human-readable dimensions:

• Hue (H): the color's position on the color wheel, 0–360°.

- 0° = red - 60° = yellow - 120° = green - 180° = cyan - 240° = blue - 300° = magenta - 360° = red again

• Saturation (S): how vivid the color is, 0–100%. 0% is gray; 100% is the most vivid version.
• Lightness (L): how bright the color is, 0–100%. 0% is black; 100% is white. 50% is the "pure" color.

Syntax: hsl(H, S%, L%)

Examples:

• hsl(0, 100%, 50%): pure red
• hsl(120, 100%, 50%): pure green
• hsl(240, 100%, 50%): pure blue
• hsl(0, 0%, 0%): black
• hsl(0, 0%, 100%): white
• hsl(0, 0%, 50%): middle gray

HSL with alpha: hsla(0, 100%, 50%, 0.5) is red at 50% opacity.

HSL is the most useful format for design work because adjustments are intuitive: increase lightness for a tint, decrease for a shade, decrease saturation for a more muted version, shift hue to step around the color wheel.

Side-by-Side Comparison

Converting Between Formats

HEX ↔ RGB:

Each pair of hex digits converts to a decimal 0–255:

• FF (hex) = 255 (decimal)
• 00 (hex) = 0 (decimal)
• 7A (hex) = 7 × 16 + 10 = 122

Going the other way: divide by 16, take quotient and remainder, look up the hex digit.

For mental conversion of common values: F0 = 240, 80 = 128, 40 = 64, 20 = 32, 10 = 16, 01 = 1.

RGB ↔ HSL:

This conversion is mathematically more involved. The basic outline:

1. Divide R, G, B by 255 to get values in [0, 1].
2. Find max and min of those values.
3. Lightness = (max + min) / 2.
4. Saturation depends on whether L < 0.5 or L ≥ 0.5.
5. Hue depends on which of R, G, B is the max.

Almost no one does this by hand. Use a converter.

When to Use Each Format

Use HEX when:

• Writing CSS by hand
• Specifying brand colors in style guides
• Sharing colors via copy-paste
• Working in design tools that default to it

Use RGB when:

• You need to set opacity via rgba()
• Code is doing math on color channels
• Working with raw pixel data
• Communicating with engineers who think in 0–255

Use HSL when:

• Designing color systems (variations of a base color)
• Building dark mode by adjusting lightness
• Creating color palettes (rotating hue at fixed S/L)
• Working with color in a way humans naturally describe

A practical workflow: pick colors in HSL while designing, store them as HEX in CSS variables, convert to RGB only when you need to add transparency.

Modern CSS: All Three Plus More

CSS now supports several additional color formats:

• hsl() and hsla() for HSL with optional alpha
• hwb() (hue-whiteness-blackness), a newer alternative
• oklch() and oklab(), perceptually uniform color spaces, more accurate for accessibility work
• Named colors like red, cornflowerblue, which are easy but limited

For most everyday CSS, HEX and HSL cover 95% of work.

Common Mistakes

Confusing HSL hue degrees with degrees in math. HSL hue wraps at 360° back to 0° (red). Going from 350° to 10° is a 20° clockwise step on the color wheel.

Treating lightness 50% as "medium gray." Lightness 50% is the most saturated version of the hue, not gray. Gray happens at saturation 0%.

Adjusting RGB channels to lighten a color. Raising all three channels equally washes out the color. Lightness in HSL is the better lever.

Forgetting hex is base 16. FA is not 1010; it is 250.

Mixing color spaces in CSS without confidence. Modern CSS handles all of them, but stick to one format per project for readability.

Assuming all formats are equally accessible to assistive tools. Screen readers and color blindness simulators work with the rendered pixel, not the format you used to specify it.

Practical Scenarios

Scenario 1: Brand color system. A brand color is #3B82F6 (blue). To build a palette: convert to HSL → hsl(217, 91%, 60%). Generate lighter and darker shades by adjusting only lightness: 80%, 70%, 60% (base), 50%, 40%, 30%. Hue and saturation stay constant; lightness varies. Result: a cohesive palette.

Scenario 2: Hover state. A button color is #10B981. For hover, the designer wants slightly darker. In HSL: hsl(160, 84%, 39%) becomes hsl(160, 84%, 33%), a 6-point lightness reduction. Same hue, same saturation, slightly darker.

Scenario 3: Adding transparency. A modal overlay needs to be 50% transparent black. Either rgba(0, 0, 0, 0.5) or hsla(0, 0%, 0%, 0.5) or 8-digit hex #00000080.

Scenario 4: Accessibility audit. A designer wants to know whether text passes WCAG contrast. The contrast checker takes any of HEX, RGB, or HSL; they all describe the same pixel. Format doesn't change the contrast ratio.

FAQ

Are HEX, RGB, and HSL the same color? They are different notations for the same color. #FF0000, rgb(255, 0, 0), and hsl(0, 100%, 50%) all describe pure red.

Which format is best for CSS? HEX is most common and most compact. HSL is best for creating variations of a base color. RGB with alpha is preferred when transparency is needed.

How do I convert HEX to RGB? Each pair of hex digits converts to a decimal 0–255. FF = 255, 00 = 0. So #FF0000 = rgb(255, 0, 0).

Why does HSL use degrees? Because hue is positioned on a color wheel, a circular arrangement of colors. 0° is red, 120° is green, 240° is blue, and 360° wraps back to red.

What does the alpha channel do? Alpha sets transparency (opacity), from 0 (fully transparent) to 1 (fully opaque). RGB uses rgba(); HSL uses hsla(); HEX uses 8 digits.

Can I use a 3-digit HEX code? Yes, when each channel has identical hex digits: #FFF = #FFFFFF. #F00 = #FF0000. This is just a compact form.

What's the difference between HSL and HSV? Both use Hue and Saturation. HSL's third dimension is Lightness; HSV's is Value (brightness). They produce different results: HSL's white is at L=100%, while HSV's white is at S=0% with any V. HSL is more common in web design.

Related Tools

The Color Converter handles all three formats in one place. For specific conversions, use the HEX to RGB Converter and RGB to HSL Converter. For accessibility, the Contrast Checker evaluates text/background pairs against WCAG standards.

Related Articles

• How Color Contrast Works for Accessibility
• Scientific Notation Explained

Final Thoughts

HEX, RGB, and HSL are three windows into the same color. HEX is compact; RGB is technical; HSL is human-friendly. The right format depends on what you're doing, and a fluent designer uses all three, often within the same project. Pick HSL when reasoning about color, store HEX in code, drop to RGB when alpha or math is needed, and let converters handle the translation. The math behind them is fixed; the choice of notation is yours.