Design Tools4 min read8 March 2026

HEX, RGB & HSL Color Codes: Complete Color Conversion Guide

Understand the difference between HEX, RGB, and HSL color formats, how to convert between them, and when to use each in CSS and design work.

Color Formats in CSS and Design

Web browsers support multiple ways to specify colors. Understanding the differences helps you choose the right format for each context and convert between them confidently.

HEX Color Codes

HEX (hexadecimal) colors are written as #RRGGBB where RR, GG, and BB are hexadecimal values (00–FF) representing the red, green, and blue channels:

  • #FF0000 — pure red
  • #00FF00 — pure green
  • #0000FF — pure blue
  • #FFFFFF — white
  • #000000 — black
  • #6C5CE7 — indigo/purple

A shorthand form #RGB exists where each digit is doubled: #F00 = #FF0000. An 8-character form #RRGGBBAA includes an alpha (opacity) channel.

RGB Color Values

RGB specifies colors as three integers (0–255) for red, green, and blue: rgb(108, 92, 231). The equivalent with opacity is RGBA: rgba(108, 92, 231, 0.5).

RGB is more readable than HEX for developers since each channel's relative intensity is immediately clear.

HSL Color Values

HSL (Hue, Saturation, Lightness) represents colors in a way that mirrors how humans think about color:

  • Hue — the color wheel position, 0°–360° (0°=red, 120°=green, 240°=blue)
  • Saturation — color intensity, 0% (grey) to 100% (vivid)
  • Lightness — 0% (black) to 100% (white), 50% = pure color

Example: hsl(251, 75%, 63%) — a medium-bright purple.

HSL is the preferred format when you need to programmatically manipulate colors — for example, creating hover states by darkening a button by 10%: just reduce the L value by 10.

When to Use Each Format

  • HEX — design tools (Figma, Sketch), brand color documentation, CSS custom properties for fixed colors
  • RGB/RGBA — when you need transparency; mixing colors dynamically in JavaScript
  • HSL/HSLA — when building color systems, generating shades/tints, or writing dynamic CSS variables

CSS Custom Properties Example

:root {
  --color-primary: hsl(251, 75%, 63%);
  --color-primary-light: hsl(251, 75%, 73%);  /* lighten */
  --color-primary-dark: hsl(251, 75%, 53%);   /* darken */
}

Using the ToolsPal Color Converter

  1. Enter a color in any format (HEX, RGB, or HSL)
  2. All other formats update instantly
  3. A live color preview shows the resulting color
  4. Copy any format to clipboard with one click