RGB to HSL Converter

function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0, s = 0;
  const 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 rgb_to_hsl(r: int, g: int, b: int):
    h, l, s = colorsys.rgb_to_hls(r / 255.0, g / 255.0, b / 255.0)
    return {
        "h": round(h * 360),
        "s": round(s * 100),
        "l": round(l * 100)
    }

# Example:
print(rgb_to_hsl(23, 162, 184)) # {'h': 188, 's': 78, 'l': 41}

:root {
  --primary-h: 188;
  --primary-s: 78%;
  --primary-l: 41%;
}

.btn-primary {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.btn-primary:hover {
  /* Effortless 10% lighter hover state */
  background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%));
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: 'hsl(188, 78%, 65%)',
          DEFAULT: 'hsl(188, 78%, 41%)',
          dark: 'hsl(188, 78%, 25%)',
        }
      }
    }
  }
}