HEX, RGB, HSL, and oklch: CSS Color Formats Explained

HEX — The Design Tool Format

Hexadecimal color codes encode RGB as three pairs of hex digits:

#RRGGBB   →  #ff4d8b  (R=255, G=77, B=139)
#RGB      →  #f4b     (shorthand, each digit doubled: #ff44bb)
#RRGGBBAA →  #ff4d8b80 (with 50% alpha)
#RGBA     →  #f4b8      (shorthand with alpha)

HEX is the default output from design tools (Figma, Sketch) and is the most common format in CSS codebases. It is not human-readable — you cannot tell by looking at #b8a4ed that it is a light purple.

RGB — Programmatic Manipulation

rgb(255, 77, 139)
rgb(255 77 139)            /* space syntax, CSS Color Level 4 */
rgba(255, 77, 139, 0.5)    /* 50% opacity */
rgb(255 77 139 / 50%)      /* modern syntax */

RGB is most useful when manipulating colors programmatically. Lightening a color by increasing all three channels is straightforward; creating a palette is not.

HSL — The Designer's Mental Model

hsl(340, 100%, 60%)         /* hue, saturation, lightness */
hsl(340deg 100% 60% / 0.5) /* with 50% opacity */

HSL maps to how humans perceive color:

Hue (0–360°): the color family — 0=red, 120=green, 240=blue
Saturation (0–100%): 0% = grayscale, 100% = vivid
Lightness (0–100%): 0% = black, 50% = pure color, 100% = white

HSL makes it easy to generate tints and shades: same hue and saturation, different lightness. Creating a color palette in code is much simpler with HSL than HEX or RGB.

Converting Colors in JavaScript

// HEX to RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// RGB to HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

oklch — The Modern Standard

CSS Color Level 4 introduces perceptually uniform color spaces. oklch is the recommended choice for new design systems:

oklch(70% 0.2 340deg)   /* lightness, chroma, hue */

In HSL, changing the hue at constant lightness gives colors with different perceived brightness (yellow looks much brighter than blue at 50% L). In oklch, changing the hue at constant lightness gives colors that actually look equally bright to the human eye — making it much better for accessible color palettes and consistent UI theming.

Browser support: all modern browsers as of 2023.

Convert Colors Instantly

Use ToolsVito's Color Converter to convert between HEX, RGB, HSL, and more — with a live color preview.