Color representation in web development has evolved from basic 16-color HTML keywords (red, blue) to sophisticated 24-bit color models (HEX, RGB, HSL) and modern perceptual spaces (OKLCH, display-p3).

Choosing the right color format improves CSS readability, design system theme tokenization, and dynamic UI state generation (hover, active, disabled states).

This guide breaks down HEX, RGB, and HSL math, conversion rules, and online color tools.

1. HEX Color Codes (#RRGGBB)

HEX (Hexadecimal) represents 24-bit RGB colors using 6 hexadecimal characters preceded by a hash symbol (#).

  • Red Channel: Digits 1-2 (00 to FF -> 0 to 255)
  • Green Channel: Digits 3-4 (00 to FF -> 0 to 255)
  • Blue Channel: Digits 5-6 (00 to FF -> 0 to 255)
  • Alpha Channel (Optional): Digits 7-8 (00 to FF -> 0% to 100% opacity)

Examples:

  • Pure White: #FFFFFF
  • Pure Black: #000000
  • ToolzStack Blue: #3B82F6

2. RGB & RGBA Model rgb(r, g, b)

RGB defines colors directly as decimal values from 0 to 255 for Red, Green, and Blue light channels.

CSS Syntax:

/* Standard RGB */
color: rgb(59, 130, 246);

/* RGBA with 50% Alpha Opacity */
color: rgba(59, 130, 246, 0.5);

/* Modern CSS Color Level 4 Syntax */
color: rgb(59 130 246 / 50%);

3. HSL Model hsl(h, s, l)

HSL (Hue, Saturation, Lightness) maps colors onto a 3D cylindrical coordinate system:

  • Hue ($H$): Color angle on a 360-degree color wheel ($0^\circ$ = Red, $120^\circ$ = Green, $240^\circ$ = Blue).
  • Saturation ($S$): Color intensity from $0%$ (gray) to $100%$ (vivid color).
  • Lightness ($L$): Brightness from $0%$ (black) through $50%$ (pure color) to $100%$ (white).
/* HSL Syntax */
color: hsl(217, 91%, 60%);

/* Creating a Darker Hover Variant by Decreasing Lightness from 60% to 50% */
button:hover {
  background-color: hsl(217, 91%, 50%);
}

Convert Color Formats Online

Use the free browser-based ToolzStack Color Converter to convert HEX, RGB, HSL, and HSV color strings, extract contrast ratios, and design CSS gradient fills with CSS Gradient Generator.