Color Format Conversion Guide

Colors in web development exist in a half-dozen different formats — and each tool, framework, and medium tends to prefer a different one. Understanding what each format represents and how to convert between them accurately is an essential skill for any front-end developer or designer.

1. The Major Color Formats

/* All represent the same color: Tailwind blue-500 */
HEX:    #3b82f6
RGB:    rgb(59, 130, 246)
RGBA:   rgba(59, 130, 246, 1.0)
HSL:    hsl(217, 91%, 60%)
HSLA:   hsla(217, 91%, 60%, 1.0)
OKLCH:  oklch(0.63 0.19 255)
HWB:    hwb(217 23% 4%)
Named:  (no exact equivalent)

2. HEX Colors

Hexadecimal color notation expresses RGB values as pairs of hex digits: #RRGGBB. Each channel ranges from 00 (0 in decimal) to FF (255 in decimal).

#3b82f6  →  R=0x3b=59, G=0x82=130, B=0xf6=246

/* Shorthand: #RGB = #RRGGBB when digits repeat */
#fff  →  #ffffff  (white)
#000  →  #000000  (black)
#f00  →  #ff0000  (red)

/* 8-digit hex includes alpha */
#3b82f680  →  rgb(59,130,246) at 50% opacity

Best for: Design tools (Figma, Sketch), static CSS values, HTML attributes. Compact and widely understood but not intuitively human-readable.

3. RGB and RGBA

RGB specifies the red, green, and blue channel intensities as integers 0–255 or percentages 0%–100%. RGBA adds an alpha (opacity) channel as a decimal 0.0–1.0 (or 0%–100% in CSS Level 4).

/* Modern CSS syntax allows no commas */
color: rgb(59 130 246);
color: rgb(59 130 246 / 80%);    /* 80% opacity */
color: rgba(59, 130, 246, 0.8);  /* legacy comma syntax */

/* JavaScript canvas & image manipulation */
const r = 59, g = 130, b = 246;
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;

Best for: Programmatic color manipulation, canvas drawing APIs, CSS custom properties where you need individual channel access.

4. HSL and HSLA

HSL (Hue, Saturation, Lightness) maps more closely to how humans perceive color, making it excellent for generating color palettes, hover states, and theming.

• Hue (H): 0–360° on the color wheel (0=red, 120=green, 240=blue)
• Saturation (S): 0%=gray, 100%=full color
• Lightness (L): 0%=black, 50%=normal, 100%=white

/* Generate a color scale by varying only Lightness */
hsl(217, 91%, 95%)  /* very light blue */
hsl(217, 91%, 80%)  /* light blue */
hsl(217, 91%, 60%)  /* base blue (#3b82f6) */
hsl(217, 91%, 40%)  /* dark blue */
hsl(217, 91%, 20%)  /* very dark blue */

/* Darken on hover — change only Lightness */
.btn { background: hsl(217, 91%, 60%); }
.btn:hover { background: hsl(217, 91%, 50%); }

Best for: Generating color palettes, theming systems, hover/active states, CSS custom properties-based design systems.

5. OKLCH – The Modern Standard

OKLCH is the newest CSS color format and is rapidly gaining adoption in 2025–2026. It uses a perceptually uniform color space, meaning colors with the same chroma and lightness values look equally bright to the human eye — something neither RGB nor HSL can guarantee.

/* oklch(Lightness Chroma Hue) */
color: oklch(0.63 0.19 255);

/* P3-wide-gamut colors for modern displays */
color: oklch(0.7 0.3 142);  /* vivid green beyond sRGB */

/* Excellent for generating palette steps */
--color-100: oklch(0.97 0.03 255);
--color-500: oklch(0.63 0.19 255);
--color-900: oklch(0.28 0.13 255);

Best for: Modern CSS-first design systems, wide-gamut displays, perceptually uniform color scales. Supported in all modern browsers as of 2024.

6. Conversion Formulas

HEX to RGB (JavaScript)

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;
}

hexToRgb('#3b82f6'); // { r: 59, g: 130, b: 246 }

RGB to HSL (JavaScript)

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) };
}

rgbToHsl(59, 130, 246); // { h: 217, s: 91, l: 60 }

7. Conclusion

HEX for static values, RGB for programmatic manipulation, HSL for palette generation and theming, OKLCH for perceptually uniform modern design systems. Knowing when to use each format — and how to convert between them — gives you precise control over color in any context.

Try our free Color Converter for instant, visual conversion between all formats.