Working with Hex Colors: A Complete Guide to Color Codes in Web Development

Color Consistency

Issue: Different display calibrations showing inconsistent colors

Solution: Use standardized color spaces and test across devices

Accessibility

Issue: Poor contrast ratios affecting readability

Solution: Use tools to verify WCAG contrast requirements

Color Management

Issue: Maintaining consistent brand colors across platforms

Solution: Create a comprehensive color system with variables

Browser Support

Issue: Inconsistent color rendering across browsers

Solution: Use fallback colors and progressive enhancement

CSS Variables for Colors

:root {
    --primary-100: #E3F2FD;
    --primary-500: #2196F3;
    --primary-900: #0D47A1;
    --gray-100: #F5F5F5;
    --gray-900: #212121;
    --success: #4CAF50;
    --error: #F44336;
  }
  
  .button-primary {
    background-color: var(--primary-500);
    color: var(--gray-100);
  }
  
  .button-primary:hover {
    background-color: var(--primary-900);
  }

Color Manipulation Functions

// Convert hex to RGB
  function hexToRGB(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
  }
  
  // Convert RGB to hex
  function rgbToHex(r, g, b) {
    return '#' + [r, g, b]
      .map(x => x.toString(16).padStart(2, '0'))
      .join('');
  }
  
  // Lighten a hex color
  function lightenHex(hex, amount) {
    const { r, g, b } = hexToRGB(hex);
    const light = Math.round(amount * 255);
    return rgbToHex(
      Math.min(r + light, 255),
      Math.min(g + light, 255),
      Math.min(b + light, 255)
    );
  }