Understanding Color Codes: HEX, RGB, and HSL

·5 min read

Open any design tool, and you'll see color defined in at least three different formats: HEX, RGB, and HSL. They all describe the same colors — just in different ways. Choosing the right format depends on what you're doing and what kind of control you need.

Here's a practical breakdown of each format, when to use which, and how to convert between them without losing your mind.

HEX: The Web Standard

HEX (hexadecimal) is the most widely used color format on the web. It's compact, universally supported, and what most people think of when they hear "color code."

Format: `#RRGGBB`

Each pair of characters represents a color channel (Red, Green, Blue) in base-16 notation, ranging from `00` (0) to `FF` (255).

  • `#FF0000` — Pure red (Red: 255, Green: 0, Blue: 0)
  • `#00FF00` — Pure green
  • `#0000FF` — Pure blue
  • `#FFFFFF` — White (all channels maxed)
  • `#000000` — Black (all channels zero)
  • `#808080` — Medium gray (equal mid-values)

Shorthand notation: When both characters in each pair match, you can abbreviate. `#FF6633` becomes `#F63`. The browser expands it automatically.

8-digit HEX for transparency: `#RRGGBBAA` adds an alpha channel. `#FF000080` is red at 50% opacity. Not all legacy tools support this, but modern browsers handle it fine.

  • CSS stylesheets (it's the de facto standard)
  • Design handoffs between designers and developers
  • Quick color references in documentation
  • Any context where brevity matters

The downside: HEX isn't intuitive. Looking at `#2E86AB`, can you guess what color that is? (It's a medium blue.) You can't easily "adjust" a HEX color mentally — making it 20% lighter requires converting to another format first.

RGB: The Additive Color Model

RGB describes colors the way screens produce them — by mixing red, green, and blue light at different intensities.

Format: `rgb(R, G, B)` where each value ranges from 0 to 255.

With transparency: `rgba(R, G, B, A)` where A is 0 (fully transparent) to 1 (fully opaque).

  • `rgb(255, 0, 0)` — Pure red
  • `rgb(255, 165, 0)` — Orange
  • `rgb(128, 0, 128)` — Purple
  • `rgba(0, 0, 0, 0.5)` — Black at 50% opacity
  • Red + Green = Yellow (`rgb(255, 255, 0)`)
  • Red + Blue = Magenta (`rgb(255, 0, 255)`)
  • Green + Blue = Cyan (`rgb(0, 255, 255)`)
  • Equal amounts of all three = Gray (the exact shade depends on the value)
  • Programmatic color manipulation (adding/subtracting channel values)
  • Working with image data (most image formats store pixels as RGB values)
  • Canvas API and WebGL
  • Situations where you need transparency (rgba is cleaner than 8-digit HEX)

Practical tip: RGB makes it easy to understand *brightness*. Higher numbers = more light = brighter color. `rgb(200, 200, 200)` is light gray; `rgb(50, 50, 50)` is dark gray. When all three values are high but one dominates, you get a tinted pastel.

HSL: The Human-Friendly Format

HSL stands for Hue, Saturation, Lightness — and it's the format that matches how humans actually think about color.

  • **Hue:** 0–360 degrees on the color wheel (0/360 = red, 120 = green, 240 = blue)
  • **Saturation:** 0% (gray) to 100% (full color)
  • **Lightness:** 0% (black) to 100% (white), with 50% being the "pure" color

With transparency: `hsla(H, S%, L%, A)`

  • `hsl(0, 100%, 50%)` — Pure red
  • `hsl(0, 100%, 75%)` — Light red / pink
  • `hsl(0, 100%, 25%)` — Dark red / maroon
  • `hsl(0, 0%, 50%)` — Medium gray (zero saturation = no color)
  • `hsl(210, 80%, 55%)` — A nice sky blue

Why HSL is powerful for design:

Creating color variations becomes trivial. Want a darker version of your brand color? Just lower the lightness value. Need a muted version? Reduce saturation. Want a complementary color? Add 180 to the hue.

  • **Brand color:** `hsl(210, 80%, 55%)` — Vibrant blue
  • **Hover state:** `hsl(210, 80%, 45%)` — Same blue, slightly darker
  • **Disabled state:** `hsl(210, 20%, 70%)` — Same hue, desaturated and lighter
  • **Complementary:** `hsl(30, 80%, 55%)` — Warm orange (210 + 180 = 390 → 30)
  • **Monochromatic:** Same hue, vary saturation and lightness
  • **Analogous:** Adjacent hues (±30°), similar saturation/lightness
  • **Triadic:** Three hues spaced 120° apart
  • **Complementary:** Two hues 180° apart
  • Building color systems and design tokens
  • CSS custom properties (easy to create theme variations)
  • Any situation where you need to programmatically generate related colors
  • Accessibility adjustments (increasing lightness contrast)

Converting Between Formats

The conversion formulas are straightforward but tedious to do by hand:

HEX → RGB: Split the hex string into three pairs and convert each from base-16 to base-10. `#2E86AB` → R: 46, G: 134, B: 171 → `rgb(46, 134, 171)`.

RGB → HSL: This involves finding the min/max channel values, calculating hue from the dominant channel, saturation from the range, and lightness from the average. The formula is well-defined but has enough edge cases that you really should use a tool.

Quick reference of important colors:

| Color | HEX | RGB | HSL | |-------|-----|-----|-----| | Red | #FF0000 | rgb(255,0,0) | hsl(0,100%,50%) | | Green | #00FF00 | rgb(0,255,0) | hsl(120,100%,50%) | | Blue | #0000FF | rgb(0,0,255) | hsl(240,100%,50%) | | White | #FFFFFF | rgb(255,255,255) | hsl(0,0%,100%) | | Black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |

Color Accessibility: Contrast Matters

Choosing colors isn't just about aesthetics. WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios:

  • **Normal text:** 4.5:1 contrast ratio against the background
  • **Large text (18px+ bold or 24px+):** 3:1 contrast ratio
  • **UI components:** 3:1 against adjacent colors

A common mistake: light gray text on white backgrounds. `#999999` text on `#FFFFFF` has a contrast ratio of only 2.85:1 — failing WCAG AA. Darkening to `#767676` gives you exactly 4.54:1, barely passing.

HSL makes contrast easy to check: If two colors have the same hue and saturation but their lightness values are far apart, contrast is likely sufficient. A 40+ point lightness difference is a good starting point (though always verify with a contrast checker).

Practical Tips for Developers and Designers

1. Use HSL in CSS custom properties for theming. Define your palette as HSL values, and creating dark mode becomes simple — invert the lightness.

2. Store brand colors in HEX for documentation and communication. It's the format everyone recognizes.

3. Use RGBA when you need overlays and transparency. Semi-transparent overlays for modals, image tints, and loading states.

4. Name your colors semantically in code. Instead of `--color-blue-500`, consider `--color-primary` or `--color-surface`. When the brand updates, you change one value instead of hunting for specific HEX codes.

5. Test your palette with color blindness simulators. About 8% of men have some form of color vision deficiency. If your UI relies solely on color to convey meaning (red = error, green = success), add icons or text labels as backup.

Convert between any of these formats instantly with our free Color Converter — no sign-up, no server processing. Everything runs in your browser.

Related Tools

hex to rgb converter
← Back to Blog