Color Picker Guide: HEX, RGB, HSL Conversion for Web Developers

Colors in web development can be represented in multiple formats: HEX, RGB, HSL, HSV. Understanding these formats and how to convert between them is essential for modern web development.

Color Format Comparison

Format	Example	Use Case
HEX	#667eea	CSS, design tools
RGB	rgb(102, 126, 234)	CSS, JavaScript
RGBA	rgba(102, 126, 234, 0.8)	Transparency in CSS
HSL	hsl(228, 77%, 66%)	Color manipulation
HSV/HSB	hsv(228, 56%, 92%)	Color pickers

HEX Color Format

Structure: #RRGGBB where each pair is a hexadecimal value (00-FF)

#667eea
  ││└─ Blue (ea = 234)
  │└─── Green (7e = 126)
  └──── Red (66 = 102)

Shorthand HEX

#fff = #ffffff (white)
#f0f = #ff00ff (magenta)
#369 = #336699 (blue)

HEX with Alpha (Transparency)

#667eea80  /* 50% transparent */
       └─── Alpha (80 = 128/255 = 50%)

Converting HEX to RGB

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

hexToRgb('#667eea'); // {r: 102, g: 126, b: 234}

Converting RGB to HEX

function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

rgbToHex(102, 126, 234); // "#667eea"

RGB Color Format

Structure: rgb(red, green, blue) where each value is 0-255

.element {
  color: rgb(102, 126, 234);
  background: rgba(102, 126, 234, 0.5); /* 50% transparency */
}

RGB Advantages

• Intuitive: Directly represents light mixing
• Dynamic: Easy to manipulate in JavaScript
• Supports alpha: RGBA for transparency

Common RGB Colors

rgb(255, 0, 0)     /* Red */
rgb(0, 255, 0)     /* Green */
rgb(0, 0, 255)     /* Blue */
rgb(255, 255, 255) /* White */
rgb(0, 0, 0)       /* Black */
rgb(128, 128, 128) /* Gray */

HSL Color Format

Structure: hsl(hue, saturation%, lightness%)

• Hue: 0-360° (color wheel position)
• Saturation: 0-100% (color intensity)
• Lightness: 0-100% (brightness)

.element {
  color: hsl(228, 77%, 66%);
  background: hsla(228, 77%, 66%, 0.5); /* With transparency */
}

Why HSL is Powerful

1. Easy Color Manipulation

// Make color lighter
hsl(228, 77%, 66%) → hsl(228, 77%, 80%)

// Make color darker
hsl(228, 77%, 66%) → hsl(228, 77%, 40%)

// Reduce saturation (make grayer)
hsl(228, 77%, 66%) → hsl(228, 40%, 66%)

2. Generate Color Palettes

// Complementary color (opposite on wheel)
hsl(228, 77%, 66%) → hsl(48, 77%, 66%)  // +180°

// Triadic colors (120° apart)
hsl(228, 77%, 66%)
hsl(348, 77%, 66%)  // +120°
hsl(108, 77%, 66%)  // +240°

// Analogous colors (adjacent on wheel)
hsl(198, 77%, 66%)  // -30°
hsl(228, 77%, 66%)  // Base
hsl(258, 77%, 66%)  // +30°

HSL Color Wheel

0° = Red
60° = Yellow
120° = Green
180° = Cyan
240° = Blue
300° = Magenta
360° = Red (wraps around)

Converting RGB to HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // Grayscale
  } 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(102, 126, 234); // {h: 228, s: 77, l: 66}

Converting HSL to RGB

function hslToRgb(h, s, l) {
  h /= 360; s /= 100; l /= 100;

  let r, g, b;

  if (s === 0) {
    r = g = b = l; // Grayscale
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

hslToRgb(228, 77, 66); // {r: 102, g: 126, b: 234}

Practical Use Cases

1. Dynamic Theming

function generateTheme(baseHue) {
  return {
    primary: `hsl(${baseHue}, 70%, 50%)`,
    secondary: `hsl(${baseHue + 180}, 70%, 50%)`,
    light: `hsl(${baseHue}, 70%, 90%)`,
    dark: `hsl(${baseHue}, 70%, 20%)`
  };
}

const blueTheme = generateTheme(220);
// primary: hsl(220, 70%, 50%) - Blue
// secondary: hsl(40, 70%, 50%) - Orange (complementary)

2. Hover Effects

.button {
  background: hsl(228, 77%, 66%);
  transition: background 0.3s;
}

.button:hover {
  /* Darken by reducing lightness */
  background: hsl(228, 77%, 50%);
}

3. Accessibility - Ensure Contrast

function ensureContrast(color, minLightness = 20, maxLightness = 80) {
  const hsl = rgbToHsl(...hexToRgb(color));

  // Ensure text is readable
  if (hsl.l < minLightness) hsl.l = minLightness;
  if (hsl.l > maxLightness) hsl.l = maxLightness;

  return hslToRgb(hsl.h, hsl.s, hsl.l);
}

4. Color Palettes

// Monochromatic (same hue, different lightness)
function monochromaticPalette(baseColor, steps = 5) {
  const hsl = rgbToHsl(...hexToRgb(baseColor));
  return Array.from({ length: steps }, (_, i) => {
    const l = 20 + (i * 15); // 20%, 35%, 50%, 65%, 80%
    return hslToRgb(hsl.h, hsl.s, l);
  });
}

// Analogous (adjacent hues)
function analogousPalette(baseColor) {
  const hsl = rgbToHsl(...hexToRgb(baseColor));
  return [-30, 0, 30].map(offset => {
    return hslToRgb((hsl.h + offset + 360) % 360, hsl.s, hsl.l);
  });
}

Color Naming and Accessibility

WCAG Contrast Ratios

function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function getContrastRatio(color1, color2) {
  const lum1 = getLuminance(...hexToRgb(color1));
  const lum2 = getLuminance(...hexToRgb(color2));
  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  return (lighter + 0.05) / (darker + 0.05);
}

const ratio = getContrastRatio('#667eea', '#ffffff');
console.log(`Contrast ratio: ${ratio.toFixed(2)}`); // 4.53:1

// WCAG AA: 4.5:1 for normal text, 3:1 for large text
// WCAG AAA: 7:1 for normal text, 4.5:1 for large text

Try It Yourself

Use our Free Color Picker Tool to:

• Pick colors visually with an interactive picker
• Convert between HEX, RGB, HSL, HSV formats
• Adjust colors with RGB sliders
• Generate color palettes (monochromatic, complementary, triadic, analogous)
• Copy color codes with one click

Quick Reference

// HEX → RGB
parseInt('66', 16) // 102

// RGB → HEX
(102).toString(16) // '66'

// Current format detection
if (color.startsWith('#')) // HEX
if (color.startsWith('rgb')) // RGB
if (color.startsWith('hsl')) // HSL

Conclusion

Mastering color formats is essential for modern web development. Each format has its strengths:

• HEX: Compact, widely supported, good for static colors
• RGB: Intuitive, JavaScript-friendly, supports transparency
• HSL: Best for color manipulation, palette generation, and theming

Best Practice: Use HSL for dynamic colors and theming, HEX for static brand colors, RGB when working with JavaScript.

Need to pick and convert colors right now? Try our free color picker tool — instant conversions, palette generation, and more!