Color Converter Tools and Techniques

Web developers work with multiple color formats. Learn how to convert between them.

Color Formats

| Format | Example | Use Case | |--------|---------|----------| | HEX | #FF5733 | CSS, design tools | | RGB | rgb(255, 87, 51) | CSS, canvas | | RGBA | rgba(255, 87, 51, 0.5) | CSS with opacity | | HSL | hsl(14, 100%, 60%) | Color manipulation | | HSLA | hsla(14, 100%, 60%, 0.5) | CSS with opacity |

HEX to RGB

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');
  
  // Handle short form (#FFF)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
  
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  
  return { r, g, b };
}

// Usage
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }
hexToRgb('#F00');    // { r: 255, g: 0, b: 0 }

RGB to HEX

function rgbToHex(r, g, b) {
  const toHex = n => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  
  return '#' + toHex(r) + toHex(g) + toHex(b);
}

// Usage
rgbToHex(255, 87, 51); // '#ff5733'

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

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

Complete Converter

function convertColor(color, format) {
  // First parse to RGB
  let r, g, b;
  
  if (color.startsWith('#')) {
    ({ r, g, b } = hexToRgb(color));
  } else if (color.startsWith('rgb')) {
    const match = color.match(/\d+/g);
    r = parseInt(match[0]);
    g = parseInt(match[1]);
    b = parseInt(match[2]);
  } else if (color.startsWith('hsl')) {
    const match = color.match(/\d+/g);
    ({ r, g, b } = hslToRgb(parseInt(match[0]), parseInt(match[1]), parseInt(match[2])));
  }
  
  // Convert to desired format
  switch (format) {
    case 'hex': return rgbToHex(r, g, b);
    case 'rgb': return `rgb(${r}, ${g}, ${b})`;
    case 'hsl': 
      const { h, s, l } = rgbToHsl(r, g, b);
      return `hsl(${h}, ${s}%, ${l}%)`;
    default: return null;
  }
}

CSS Color Functions

// Lighten
function lighten(color, percent) {
  // Mix with white
}

// Darken  
function darken(color, percent) {
  // Mix with black
}

// Opacity
const transparent = 'rgba(255, 87, 51, 0.5)';

Best Practices

1. Use named colors - red, blue for common
2. HEX for design - Short, standard
3. RGB for effects - Opacity support
4. HSL for manipulation - Easy to adjust

Conclusion

Know how to convert between HEX, RGB, and HSL. Use libraries for complex operations. Keep color consistent across your application.