RGB to HSL Color Converter

The HSL Color Model Explained

HSL represents colors using three properties that match how humans naturally think about color. Hue is the color itself, measured as a degree on the color wheel: 0 degrees is red, 120 degrees is green, and 240 degrees is blue. Saturation controls the intensity, from 0% (gray) to 100% (fully vivid). Lightness controls brightness, from 0% (black) through 50% (pure color) to 100% (white).

This model was designed to be more intuitive than RGB, where adjusting a single channel changes both the perceived color and brightness simultaneously. In HSL, you can make a color lighter without changing its hue, or desaturate it without affecting brightness. This separation of concerns makes HSL the preferred model for color manipulation in CSS and design systems.

The RGB to HSL Conversion Algorithm

The conversion from RGB to HSL follows a well-defined mathematical process. First, normalize each RGB channel to the range 0-1 by dividing by 255. Then find the maximum and minimum of the three normalized values:

// Normalize to 0-1
const r = R / 255, g = G / 255, b = B / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const d = max - min;

// Lightness
const l = (max + min) / 2;

// Saturation
const s = d === 0 ? 0
  : d / (1 - Math.abs(2 * l - 1));

// Hue (in degrees)
let h = 0;
if (d !== 0) {
  switch (max) {
    case r: h = 60 * (((g - b) / d) % 6); break;
    case g: h = 60 * ((b - r) / d + 2); break;
    case b: h = 60 * ((r - g) / d + 4); break;
  }
}
if (h < 0) h += 360;

When the maximum and minimum values are equal, the color is a shade of gray. Saturation is zero and hue is undefined (conventionally set to 0). The hue formula produces different results depending on which RGB channel is dominant, correctly mapping the result to the appropriate sextant of the color wheel.

Why HSL Is Better for Palette Generation

Color palette generators like gen8x.com work primarily in HSL because color harmonies are defined by angular relationships on the hue wheel. A complementary color is exactly 180 degrees away. Analogous colors are 30 degrees apart. Triadic colors are 120 degrees apart. These operations are trivial in HSL but require converting through multiple color spaces in RGB.

HSL also makes it easy to generate tints and shades of a color by adjusting lightness, and to create muted or vivid variants by adjusting saturation. A typical design system might use a single hue with lightness values of 95%, 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, and 10% to create a complete shade scale, similar to how Tailwind CSS structures its default color palette.

Using hsl() in CSS

CSS supports the hsl() function in all modern browsers. The legacy syntax uses commas, while the modern syntax uses spaces with an optional slash for alpha:

/* Legacy syntax */
color: hsl(217, 91%, 60%);
color: hsla(217, 91%, 60%, 0.5);

/* Modern syntax (CSS Colors Level 4) */
color: hsl(217 91% 60%);
color: hsl(217 91% 60% / 0.5);

/* Using CSS custom properties */
:root {
  --hue-primary: 217;
  --color-primary: hsl(var(--hue-primary) 91% 60%);
  --color-primary-light: hsl(var(--hue-primary) 91% 85%);
  --color-primary-dark: hsl(var(--hue-primary) 91% 35%);
}

Using HSL with CSS custom properties is powerful because you can define a single hue variable and derive an entire color scale from it. Changing the hue variable instantly updates every derived color, making theme switching straightforward.