Color Converter Guide: Convert HEX, RGB, HSL, and CMYK Colors

// Valid HEX formats
const colors = [
  '#FF5733',      // 6-digit
  '#F57',         // 3-digit (expanded to #FF5577)
  '#FF5733FF',    // 8-digit with alpha
  '#F57F',        // 4-digit with alpha
];

// Parse HEX
function parseHex(hex) {
  // Remove # if present
  hex = hex.replace('#', '');

  // Expand 3-digit to 6-digit
  if (hex.length === 3) {
    hex = hex.split('').map(char => char + char).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 };
}

console.log(parseHex('#FF5733'));  // { r: 255, g: 87, b: 51 }
console.log(parseHex('#F57'));     // { r: 255, g: 85, b: 119 }

/* RGB in CSS */
.element {
  /* Standard notation */
  color: rgb(255, 87, 51);

  /* With alpha */
  background: rgba(255, 87, 51, 0.5);

  /* Percentage notation */
  border-color: rgb(100%, 34%, 20%);

  /* Modern syntax (CSS Colors Level 4) */
  color: rgb(255 87 51);
  background: rgb(255 87 51 / 50%);
}

/* HSL in CSS */
.element {
  /* Standard HSL */
  color: hsl(11, 100%, 60%);

  /* With alpha */
  background: hsla(11, 100%, 60%, 0.5);

  /* Modern syntax */
  color: hsl(11deg 100% 60%);
  background: hsl(11 100% 60% / 50%);
}

/* Creating variations */
:root {
  --primary-hue: 210;
  --primary: hsl(var(--primary-hue), 70%, 50%);
  --primary-light: hsl(var(--primary-hue), 70%, 70%);
  --primary-dark: hsl(var(--primary-hue), 70%, 30%);
}

// HSV is not native to CSS, but used in color pickers
const hsv = {
  h: 210,   // Hue: 0-360°
  s: 50,    // Saturation: 0-100%
  v: 100    // Value: 0-100%
};

// HSV vs HSL for same color
// HSL: hsl(210, 100%, 75%)  // Lightness at 75%
// HSV: hsv(210, 50%, 100%)  // Value at 100%

// Both represent similar blue, but calculated differently

// CMYK for print
const cmyk = {
  c: 0,    // Cyan: 0-100%
  m: 66,   // Magenta: 0-100%
  y: 80,   // Yellow: 0-100%
  k: 0     // Black: 0-100%
};

// Common CMYK colors
const colors = {
  red:     { c: 0,   m: 100, y: 100, k: 0 },
  green:   { c: 100, m: 0,   y: 100, k: 0 },
  blue:    { c: 100, m: 100, y: 0,   k: 0 },
  black:   { c: 0,   m: 0,   y: 0,   k: 100 },
  white:   { c: 0,   m: 0,   y: 0,   k: 0 }
};

/* CSS Named Colors */
.element {
  color: red;              /* #FF0000 */
  background: blue;        /* #0000FF */
  border-color: green;     /* #008000 */
}

/* Modern additions */
.modern {
  color: rebeccapurple;    /* #663399 */
  background: transparent;
  border: currentColor;
}

/* Shades of gray */
.grays {
  color: black;            /* #000000 */
  background: white;       /* #FFFFFF */
  border: gray;            /* #808080 */
  outline: silver;         /* #C0C0C0 */
}

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Expand 3-digit hex to 6-digit
  if (hex.length === 3) {
    hex = hex.split('').map(char => char + char).join('');
  }

  // Parse hex values
  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 };
}

// With alpha support
function hexToRgba(hex) {
  hex = hex.replace(/^#/, '');

  if (hex.length === 4) {
    hex = hex.split('').map(char => char + char).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);
  const a = hex.length === 8
    ? parseInt(hex.substring(6, 8), 16) / 255
    : 1;

  return { r, g, b, a };
}

// Usage
console.log(hexToRgb('#FF5733'));      // { r: 255, g: 87, b: 51 }
console.log(hexToRgba('#FF573380'));   // { r: 255, g: 87, b: 51, a: 0.5 }

function rgbToHex(r, g, b) {
  // Clamp values to 0-255
  r = Math.max(0, Math.min(255, Math.round(r)));
  g = Math.max(0, Math.min(255, Math.round(g)));
  b = Math.max(0, Math.min(255, Math.round(b)));

  // Convert to hex and pad with zero
  const toHex = (n) => n.toString(16).padStart(2, '0');

  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  r = Math.max(0, Math.min(255, Math.round(r)));
  g = Math.max(0, Math.min(255, Math.round(g)));
  b = Math.max(0, Math.min(255, Math.round(b)));
  a = Math.max(0, Math.min(1, a));

  const toHex = (n) => n.toString(16).padStart(2, '0');
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');

  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHex}`.toUpperCase();
}

// Usage
console.log(rgbToHex(255, 87, 51));       // #FF5733
console.log(rgbaToHex(255, 87, 51, 0.5)); // #FF573380

function rgbToHsl(r, g, b) {
  // Normalize to 0-1
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h, s, l;

  // Calculate lightness
  l = (max + min) / 2;

  if (delta === 0) {
    // Achromatic (gray)
    h = 0;
    s = 0;
  } else {
    // Calculate saturation
    s = l > 0.5
      ? delta / (2 - max - min)
      : delta / (max + min);

    // Calculate hue
    switch (max) {
      case r:
        h = ((g - b) / delta + (g < b ? 6 : 0)) / 6;
        break;
      case g:
        h = ((b - r) / delta + 2) / 6;
        break;
      case b:
        h = ((r - g) / delta + 4) / 6;
        break;
    }
  }

  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

// Usage
console.log(rgbToHsl(255, 87, 51));  // { h: 11, s: 100, l: 60 }

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

  let r, g, b;

  if (s === 0) {
    // Achromatic (gray)
    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)
  };
}

// Usage
console.log(hslToRgb(11, 100, 60));  // { r: 255, g: 87, b: 51 }

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

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h, s, v;

  // Value
  v = max;

  // Saturation
  s = max === 0 ? 0 : delta / max;

  // Hue
  if (delta === 0) {
    h = 0;
  } else {
    switch (max) {
      case r:
        h = ((g - b) / delta + (g < b ? 6 : 0)) / 6;
        break;
      case g:
        h = ((b - r) / delta + 2) / 6;
        break;
      case b:
        h = ((r - g) / delta + 4) / 6;
        break;
    }
  }

  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    v: Math.round(v * 100)
  };
}

console.log(rgbToHsv(255, 87, 51));  // { h: 11, s: 80, v: 100 }

function hsvToRgb(h, s, v) {
  h /= 360;
  s /= 100;
  v /= 100;

  const i = Math.floor(h * 6);
  const f = h * 6 - i;
  const p = v * (1 - s);
  const q = v * (1 - f * s);
  const t = v * (1 - (1 - f) * s);

  let r, g, b;

  switch (i % 6) {
    case 0: r = v; g = t; b = p; break;
    case 1: r = q; g = v; b = p; break;
    case 2: r = p; g = v; b = t; break;
    case 3: r = p; g = q; b = v; break;
    case 4: r = t; g = p; b = v; break;
    case 5: r = v; g = p; b = q; break;
  }

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

console.log(hsvToRgb(11, 80, 100));  // { r: 255, g: 87, b: 51 }

function rgbToCmyk(r, g, b) {
  // Normalize to 0-1
  r /= 255;
  g /= 255;
  b /= 255;

  // Calculate K (black)
  const k = 1 - Math.max(r, g, b);

  // If pure black
  if (k === 1) {
    return { c: 0, m: 0, y: 0, k: 100 };
  }

  // Calculate CMY
  const c = (1 - r - k) / (1 - k);
  const m = (1 - g - k) / (1 - k);
  const y = (1 - b - k) / (1 - k);

  return {
    c: Math.round(c * 100),
    m: Math.round(m * 100),
    y: Math.round(y * 100),
    k: Math.round(k * 100)
  };
}

console.log(rgbToCmyk(255, 87, 51));
// { c: 0, m: 66, y: 80, k: 0 }

function cmykToRgb(c, m, y, k) {
  // Normalize to 0-1
  c /= 100;
  m /= 100;
  y /= 100;
  k /= 100;

  // Calculate RGB
  const r = 255 * (1 - c) * (1 - k);
  const g = 255 * (1 - m) * (1 - k);
  const b = 255 * (1 - y) * (1 - k);

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

console.log(cmykToRgb(0, 66, 80, 0));
// { r: 255, g: 87, b: 51 }

class ColorConverter {
  // HEX to RGB
  static hexToRgb(hex) {
    hex = hex.replace(/^#/, '');
    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 };
  }

  // RGB to HEX
  static rgbToHex(r, g, b) {
    const toHex = n => Math.max(0, Math.min(255, Math.round(n)))
      .toString(16)
      .padStart(2, '0');

    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
  }

  // RGB to HSL
  static rgbToHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;

    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const delta = max - min;

    let h = 0, s = 0, l = (max + min) / 2;

    if (delta !== 0) {
      s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);

      switch (max) {
        case r: h = ((g - b) / delta + (g < b ? 6 : 0)) / 6; break;
        case g: h = ((b - r) / delta + 2) / 6; break;
        case b: h = ((r - g) / delta + 4) / 6; break;
      }
    }

    return {
      h: Math.round(h * 360),
      s: Math.round(s * 100),
      l: Math.round(l * 100)
    };
  }

  // HSL to RGB
  static 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)
    };
  }

  // HEX to HSL (via RGB)
  static hexToHsl(hex) {
    const rgb = this.hexToRgb(hex);
    return this.rgbToHsl(rgb.r, rgb.g, rgb.b);
  }

  // HSL to HEX (via RGB)
  static hslToHex(h, s, l) {
    const rgb = this.hslToRgb(h, s, l);
    return this.rgbToHex(rgb.r, rgb.g, rgb.b);
  }

  // Format to CSS string
  static toRgbString(r, g, b, a) {
    return a !== undefined
      ? `rgba(${r}, ${g}, ${b}, ${a})`
      : `rgb(${r}, ${g}, ${b})`;
  }

  static toHslString(h, s, l, a) {
    return a !== undefined
      ? `hsla(${h}, ${s}%, ${l}%, ${a})`
      : `hsl(${h}, ${s}%, ${l}%)`;
  }
}

// Convert HEX to RGB
const rgb = ColorConverter.hexToRgb('#FF5733');
console.log(rgb);  // { r: 255, g: 87, b: 51 }

// Convert RGB to HEX
const hex = ColorConverter.rgbToHex(255, 87, 51);
console.log(hex);  // #FF5733

// Convert RGB to HSL
const hsl = ColorConverter.rgbToHsl(255, 87, 51);
console.log(hsl);  // { h: 11, s: 100, l: 60 }

// Convert HSL to RGB
const rgb2 = ColorConverter.hslToRgb(11, 100, 60);
console.log(rgb2);  // { r: 255, g: 87, b: 51 }

// Chain conversions
const hex2 = ColorConverter.hslToHex(11, 100, 60);
console.log(hex2);  // #FF5733

// Format for CSS
console.log(ColorConverter.toRgbString(255, 87, 51));
// rgb(255, 87, 51)

console.log(ColorConverter.toHslString(11, 100, 60, 0.5));
// hsla(11, 100%, 60%, 0.5)

class ColorConverter:
    @staticmethod
    def hex_to_rgb(hex_color):
        """Convert HEX to RGB"""
        hex_color = hex_color.lstrip('#')
        if len(hex_color) == 3:
            hex_color = ''.join([c*2 for c in hex_color])

        r = int(hex_color[0:2], 16)
        g = int(hex_color[2:4], 16)
        b = int(hex_color[4:6], 16)

        return (r, g, b)

    @staticmethod
    def rgb_to_hex(r, g, b):
        """Convert RGB to HEX"""
        return f'#{r:02x}{g:02x}{b:02x}'.upper()

    @staticmethod
    def rgb_to_hsl(r, g, b):
        """Convert RGB to HSL"""
        r, g, b = r/255, g/255, b/255

        max_val = max(r, g, b)
        min_val = min(r, g, b)
        delta = max_val - min_val

        l = (max_val + min_val) / 2

        if delta == 0:
            h = s = 0
        else:
            s = delta / (2 - max_val - min_val) if l > 0.5 else delta / (max_val + min_val)

            if max_val == r:
                h = ((g - b) / delta + (6 if g < b else 0)) / 6
            elif max_val == g:
                h = ((b - r) / delta + 2) / 6
            else:
                h = ((r - g) / delta + 4) / 6

        return (round(h * 360), round(s * 100), round(l * 100))

    @staticmethod
    def hsl_to_rgb(h, s, l):
        """Convert HSL to RGB"""
        h, s, l = h/360, s/100, l/100

        def hue_to_rgb(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

        if s == 0:
            r = g = b = l
        else:
            q = l * (1 + s) if l < 0.5 else l + s - l * s
            p = 2 * l - q

            r = hue_to_rgb(p, q, h + 1/3)
            g = hue_to_rgb(p, q, h)
            b = hue_to_rgb(p, q, h - 1/3)

        return (round(r * 255), round(g * 255), round(b * 255))

# Usage
converter = ColorConverter()
rgb = converter.hex_to_rgb('#FF5733')
print(f'RGB: {rgb}')  # (255, 87, 51)

hex_val = converter.rgb_to_hex(255, 87, 51)
print(f'HEX: {hex_val}')  # #FF5733

/* All color formats in CSS */
.element {
  /* HEX */
  color: #FF5733;

  /* RGB */
  background: rgb(255, 87, 51);

  /* RGBA */
  border-color: rgba(255, 87, 51, 0.5);

  /* HSL */
  outline-color: hsl(11, 100%, 60%);

  /* HSLA */
  box-shadow: 0 0 10px hsla(11, 100%, 60%, 0.5);

  /* Named color */
  text-decoration-color: tomato;

  /* Modern syntax (CSS Colors 4) */
  background: rgb(255 87 51);
  color: hsl(11deg 100% 60%);
  border: rgb(255 87 51 / 50%);
}

/* CSS Custom Properties */
:root {
  --primary-h: 11;
  --primary-s: 100%;
  --primary-l: 60%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
}

class ColorManipulator {
  // Lighten color (increase lightness)
  static lighten(hex, percent) {
    const hsl = ColorConverter.hexToHsl(hex);
    hsl.l = Math.min(100, hsl.l + percent);
    return ColorConverter.hslToHex(hsl.h, hsl.s, hsl.l);
  }

  // Darken color (decrease lightness)
  static darken(hex, percent) {
    const hsl = ColorConverter.hexToHsl(hex);
    hsl.l = Math.max(0, hsl.l - percent);
    return ColorConverter.hslToHex(hsl.h, hsl.s, hsl.l);
  }

  // Alternative: RGB multiplication
  static lightenRgb(hex, factor) {
    const rgb = ColorConverter.hexToRgb(hex);
    const r = Math.min(255, Math.round(rgb.r + (255 - rgb.r) * factor));
    const g = Math.min(255, Math.round(rgb.g + (255 - rgb.g) * factor));
    const b = Math.min(255, Math.round(rgb.b + (255 - rgb.b) * factor));
    return ColorConverter.rgbToHex(r, g, b);
  }
}

// Usage
const color = '#3498db';
console.log(ColorManipulator.lighten(color, 20));  // Lighter blue
console.log(ColorManipulator.darken(color, 20));   // Darker blue

class ColorManipulator {
  // Increase saturation
  static saturate(hex, percent) {
    const hsl = ColorConverter.hexToHsl(hex);
    hsl.s = Math.min(100, hsl.s + percent);
    return ColorConverter.hslToHex(hsl.h, hsl.s, hsl.l);
  }

  // Decrease saturation
  static desaturate(hex, percent) {
    const hsl = ColorConverter.hexToHsl(hex);
    hsl.s = Math.max(0, hsl.s - percent);
    return ColorConverter.hslToHex(hsl.h, hsl.s, hsl.l);
  }

  // Convert to grayscale (0% saturation)
  static grayscale(hex) {
    const hsl = ColorConverter.hexToHsl(hex);
    return ColorConverter.hslToHex(hsl.h, 0, hsl.l);
  }
}

// Usage
const color = '#3498db';
console.log(ColorManipulator.saturate(color, 30));    // More vibrant
console.log(ColorManipulator.desaturate(color, 30));  // More muted
console.log(ColorManipulator.grayscale(color));       // Gray version

class ColorHarmony {
  // Complementary (opposite on color wheel)
  static complementary(hex) {
    const hsl = ColorConverter.hexToHsl(hex);
    const compHue = (hsl.h + 180) % 360;
    return ColorConverter.hslToHex(compHue, hsl.s, hsl.l);
  }

  // Analogous (adjacent colors)
  static analogous(hex, angle = 30) {
    const hsl = ColorConverter.hexToHsl(hex);
    return [
      hex,
      ColorConverter.hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l),
      ColorConverter.hslToHex((hsl.h - angle + 360) % 360, hsl.s, hsl.l)
    ];
  }

  // Triadic (120° apart)
  static triadic(hex) {
    const hsl = ColorConverter.hexToHsl(hex);
    return [
      hex,
      ColorConverter.hslToHex((hsl.h + 120) % 360, hsl.s, hsl.l),
      ColorConverter.hslToHex((hsl.h + 240) % 360, hsl.s, hsl.l)
    ];
  }

  // Split complementary
  static splitComplementary(hex, angle = 30) {
    const hsl = ColorConverter.hexToHsl(hex);
    const compHue = (hsl.h + 180) % 360;
    return [
      hex,
      ColorConverter.hslToHex((compHue + angle) % 360, hsl.s, hsl.l),
      ColorConverter.hslToHex((compHue - angle + 360) % 360, hsl.s, hsl.l)
    ];
  }

  // Tetradic (square)
  static tetradic(hex) {
    const hsl = ColorConverter.hexToHsl(hex);
    return [
      hex,
      ColorConverter.hslToHex((hsl.h + 90) % 360, hsl.s, hsl.l),
      ColorConverter.hslToHex((hsl.h + 180) % 360, hsl.s, hsl.l),
      ColorConverter.hslToHex((hsl.h + 270) % 360, hsl.s, hsl.l)
    ];
  }
}

// Usage
const color = '#3498db';
console.log(ColorHarmony.complementary(color));
console.log(ColorHarmony.analogous(color));
console.log(ColorHarmony.triadic(color));

class ColorBlender {
  // Linear interpolation between two colors
  static blend(hex1, hex2, weight = 0.5) {
    const rgb1 = ColorConverter.hexToRgb(hex1);
    const rgb2 = ColorConverter.hexToRgb(hex2);

    const r = Math.round(rgb1.r * (1 - weight) + rgb2.r * weight);
    const g = Math.round(rgb1.g * (1 - weight) + rgb2.g * weight);
    const b = Math.round(rgb1.b * (1 - weight) + rgb2.b * weight);

    return ColorConverter.rgbToHex(r, g, b);
  }

  // Mix with white (tint)
  static tint(hex, weight = 0.5) {
    return this.blend(hex, '#FFFFFF', weight);
  }

  // Mix with black (shade)
  static shade(hex, weight = 0.5) {
    return this.blend(hex, '#000000', weight);
  }

  // Create gradient steps
  static gradient(hex1, hex2, steps = 5) {
    const colors = [];
    for (let i = 0; i < steps; i++) {
      const weight = i / (steps - 1);
      colors.push(this.blend(hex1, hex2, weight));
    }
    return colors;
  }
}

// Usage
console.log(ColorBlender.blend('#FF0000', '#0000FF', 0.5));
// Blend red and blue

console.log(ColorBlender.tint('#3498db', 0.3));
// Lighten by mixing with white

console.log(ColorBlender.gradient('#FF0000', '#0000FF', 5));
// Create 5-step gradient

class ColorAccessibility {
  // Calculate relative luminance
  static luminance(r, g, b) {
    const [rs, gs, bs] = [r, g, b].map(c => {
      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;
  }

  // Calculate contrast ratio
  static contrastRatio(hex1, hex2) {
    const rgb1 = ColorConverter.hexToRgb(hex1);
    const rgb2 = ColorConverter.hexToRgb(hex2);

    const lum1 = this.luminance(rgb1.r, rgb1.g, rgb1.b);
    const lum2 = this.luminance(rgb2.r, rgb2.g, rgb2.b);

    const lighter = Math.max(lum1, lum2);
    const darker = Math.min(lum1, lum2);

    return (lighter + 0.05) / (darker + 0.05);
  }

  // Check WCAG compliance
  static checkWCAG(foreground, background) {
    const ratio = this.contrastRatio(foreground, background);

    return {
      ratio: ratio.toFixed(2),
      AA: ratio >= 4.5,
      AALarge: ratio >= 3,
      AAA: ratio >= 7,
      AAALarge: ratio >= 4.5
    };
  }

  // Find accessible text color (black or white)
  static getTextColor(background) {
    const whiteContrast = this.contrastRatio(background, '#FFFFFF');
    const blackContrast = this.contrastRatio(background, '#000000');

    return whiteContrast > blackContrast ? '#FFFFFF' : '#000000';
  }
}

// Usage
const result = ColorAccessibility.checkWCAG('#3498db', '#FFFFFF');
console.log(result);
// { ratio: '3.41', AA: false, AALarge: true, AAA: false, AAALarge: false }

const textColor = ColorAccessibility.getTextColor('#3498db');
console.log(textColor);  // #FFFFFF (white text on blue background)

class ThemeGenerator {
  static generateTheme(baseColor) {
    const hsl = ColorConverter.hexToHsl(baseColor);

    return {
      primary: baseColor,
      primaryLight: ColorConverter.hslToHex(hsl.h, hsl.s, Math.min(100, hsl.l + 20)),
      primaryDark: ColorConverter.hslToHex(hsl.h, hsl.s, Math.max(0, hsl.l - 20)),

      secondary: ColorConverter.hslToHex((hsl.h + 180) % 360, hsl.s, hsl.l),

      accent: ColorConverter.hslToHex((hsl.h + 120) % 360, hsl.s, hsl.l),

      background: '#FFFFFF',
      surface: '#F5F5F5',
      text: '#212121',
      textSecondary: '#757575',

      success: '#4CAF50',
      warning: '#FF9800',
      error: '#F44336',
      info: '#2196F3'
    };
  }

  static generateMonochrome(baseColor, steps = 5) {
    const hsl = ColorConverter.hexToHsl(baseColor);
    const colors = [];

    for (let i = 0; i < steps; i++) {
      const lightness = 90 - (i * (80 / (steps - 1)));
      colors.push(ColorConverter.hslToHex(hsl.h, hsl.s, lightness));
    }

    return colors;
  }
}

// Usage
const theme = ThemeGenerator.generateTheme('#3498db');
console.log(theme);

const monochrome = ThemeGenerator.generateMonochrome('#3498db', 5);
console.log(monochrome);

class GradientGenerator {
  static linear(startColor, endColor, steps = 10) {
    const colors = [];

    for (let i = 0; i < steps; i++) {
      const weight = i / (steps - 1);
      colors.push(ColorBlender.blend(startColor, endColor, weight));
    }

    return colors;
  }

  static toCssGradient(startColor, endColor, angle = 90) {
    return `linear-gradient(${angle}deg, ${startColor}, ${endColor})`;
  }

  static multiStop(colors, angle = 90) {
    const stops = colors.map((color, i) => {
      const percent = (i / (colors.length - 1)) * 100;
      return `${color} ${percent}%`;
    }).join(', ');

    return `linear-gradient(${angle}deg, ${stops})`;
  }

  static radial(startColor, endColor, shape = 'circle') {
    return `radial-gradient(${shape}, ${startColor}, ${endColor})`;
  }
}

// Usage
const steps = GradientGenerator.linear('#FF0000', '#0000FF', 5);
console.log(steps);

console.log(GradientGenerator.toCssGradient('#FF0000', '#0000FF'));
// linear-gradient(90deg, #FF0000, #0000FF)

console.log(GradientGenerator.multiStop(['#FF0000', '#00FF00', '#0000FF']));
// linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

class ImageColorProcessor {
  static async getDominantColor(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = imageElement.width;
    canvas.height = imageElement.height;

    ctx.drawImage(imageElement, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    let r = 0, g = 0, b = 0;
    const pixelCount = data.length / 4;

    for (let i = 0; i < data.length; i += 4) {
      r += data[i];
      g += data[i + 1];
      b += data[i + 2];
    }

    r = Math.round(r / pixelCount);
    g = Math.round(g / pixelCount);
    b = Math.round(b / pixelCount);

    return ColorConverter.rgbToHex(r, g, b);
  }

  static async extractPalette(imageElement, colorCount = 5) {
    // Simplified K-means clustering for color extraction
    // In production, use a library like color-thief
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = imageElement.width;
    canvas.height = imageElement.height;

    ctx.drawImage(imageElement, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // ... k-means clustering algorithm
    // Return array of dominant colors

    return ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6'];
  }
}

// Usage
const image = document.getElementById('myImage');
const dominantColor = await ImageColorProcessor.getDominantColor(image);
console.log('Dominant color:', dominantColor);

class ThemeSwitcher {
  constructor() {
    this.themes = {
      light: {
        primary: '#3498db',
        background: '#ffffff',
        text: '#212121'
      },
      dark: {
        primary: '#2980b9',
        background: '#1e1e1e',
        text: '#ffffff'
      }
    };

    this.currentTheme = 'light';
    this.loadTheme();
  }

  setTheme(themeName) {
    const theme = this.themes[themeName];
    if (!theme) return;

    // Set CSS custom properties
    const root = document.documentElement;
    Object.entries(theme).forEach(([key, value]) => {
      root.style.setProperty(`--${key}`, value);
    });

    this.currentTheme = themeName;
    localStorage.setItem('theme', themeName);
  }

  loadTheme() {
    const saved = localStorage.getItem('theme');
    this.setTheme(saved || 'light');
  }

  toggle() {
    const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
    this.setTheme(newTheme);
  }

  setCustomColor(colorName, value) {
    document.documentElement.style.setProperty(`--${colorName}`, value);
  }
}

// Usage
const themeSwitcher = new ThemeSwitcher();

// Toggle theme
document.getElementById('themeToggle').addEventListener('click', () => {
  themeSwitcher.toggle();
});

// Set custom color
themeSwitcher.setCustomColor('primary', '#e74c3c');