HEX to HSL Converter

function hexToHsl(hex: string): { h: number; s: number; l: number } {
  let c = hex.replace('#', '');
  if (c.length === 3) c = c.split('').map(x => x + x).join('');
  const num = parseInt(c, 16);
  let r = ((num >> 16) & 255) / 255;
  let g = ((num >> 8) & 255) / 255;
  let b = (num & 255) / 255;

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

  if (max !== min) {
    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); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

import colorsys

def hex_to_hsl(hex_code: str) -> str:
    h = hex_code.lstrip('#')
    if len(h) == 3:
        h = ''.join(c * 2 for c in h)
    r, g, b = (int(h[i:i+2], 16) / 255.0 for i in (0, 2, 4))
    hue, light, sat = colorsys.rgb_to_hls(r, g, b)
    return f"hsl({round(hue * 360)}, {round(sat * 100)}%, {round(light * 100)}%)"

# Example:
print(hex_to_hsl("#17A2B8")) # "hsl(188, 78%, 41%)"

$brand-hex: #17A2B8;

// Native Sass color manipulation
.card-theme {
  background-color: $brand-hex;
  border-color: darken($brand-hex, 15%);
  &:hover {
    background-color: lighten($brand-hex, 10%);
  }
}

:root {
  /* Store HSL components separately */
  --accent-h: 188;
  --accent-s: 78%;
  --accent-l: 41%;
}

.badge {
  background: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  color: hsl(var(--accent-h) var(--accent-s) 95%);
}