RGB-zu-HSL Konverter: Farbmodell-Übersetzer

RGB-zu-HSL Konverter

rgb(59, 130, 246) konvertiert zu hsl(217, 91%, 60%). Der Farbton 217° platziert diese Farbe im blauen Bereich des Farbkreises, die Sättigung von 91% bedeutet, dass sie fast vollständig lebendig ist, und die Helligkeit von 60% positioniert sie bei mittlerer Helligkeit. HSL trennt die Identität der Farbe von ihrer Intensität, was die programmatische Arbeit damit viel einfacher macht als mit RGB.

Was HSL bedeutet

HSL steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Jede Komponente beschreibt eine andere Qualität einer Farbe:

Die Positionen des Farbkreises für den Farbton:

  0° / 360°  — Rot
       60°   — Gelb
      120°   — Grün
      180°   — Cyan
      240°   — Blau
      300°   — Magenta

hsl(217, 91%, 60%) liegt bei 217°, zwischen Cyan (180°) und Blau (240°), näher an Blau. Mit 91% Sättigung ist es fast vollständig lebendig. Mit 60% Helligkeit liegt es leicht über dem Mittelpunkt der reinen Farbe.

Warum HSL besser für programmatische Farben ist

Bei RGB gibt es keinen direkten Kanal für Helligkeit. Um rgb(59, 130, 246) aufzuhellen, musst du alle drei Kanäle in Richtung 255 skalieren, während ihre Proportionen erhalten bleiben. Zum Abdunkeln in Richtung 0 skalieren. Die Mathematik ist fehleranfällig und nicht intuitiv.

Mit HSL passt du einen Wert an:

/* Basis-Farbe */
--color: hsl(217, 91%, 60%);

/* Hellere Variante: erhöhe einfach die Helligkeit */
--color-light: hsl(217, 91%, 75%);

/* Dunklere Variante: verringere einfach die Helligkeit */
--color-dark: hsl(217, 91%, 40%);

/* Entsättigte Variante (dezent) */
--color-muted: hsl(217, 30%, 60%);

/* Komplementärfarbe: drehe den Farbton um 180° */
--color-complement: hsl(37, 91%, 60%);

Die Konvertierungsmathematik von RGB zu HSL:

1. Normalisiere die RGB-Werte auf den Bereich 0 bis 1
2. Berechne den hellsten und dunkelsten Kanal für die Helligkeit
3. Berechne die Sättigung aus dem Abstand zwischen hellstem und dunkelstem Kanal
4. Bestimme den Farbton aus dem dominanten Kanal und dem Abstand zu den anderen

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    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)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return [h * 360, s * 100, l * 100];
}