HEX-, RGB-, HSL-Konvertierungsleitfaden für Produktteams

HEX, RGB, HSL Konvertierungshandbuch für Produktteams

Designer übergeben HEX-Codes in Figma. Ingenieure schreiben RGB in Code. HSL ist das, was Sie für programmatische Farbmanipulation tatsächlich wollen. Hier ist, wie die drei Formate miteinander in Beziehung stehen und wann Sie jede verwenden sollten.

Die drei Formate

HEX -- #FF5733

Zwei hexadezimale Ziffern pro Kanal: #RRGGBB. Jede Paarung ist 00-FF (0-255 in Dezimalzahlen). Die Web-Standard seit den 1990er Jahren. Kompakt, allgemein unterstützt, aber für den menschlichen Lesen transparent.

RGB -- rgb(255, 87, 51)

Drei Dezimalwerte, 0-255 pro Kanal. Was CSS rgb() verwendet. Slightly lesbarer als HEX, aber immer noch schwer zu mental anpassen ("Machen Sie es 20 % heller" ist nicht offensichtlich in RGB).

HSL -- hsl(11, 100%, 60%)

Hue (0-360 Grad auf der Farbkugel), Saturation (0-100%), Lightness (0-100%). Entworfen für Menschen: Sie können direkt über Farbbeziehungen nachdenken.

Wann Sie Jedes Verwenden

Warum HSL für Themen-Systeme gewinnt

Mit HSL ist Farbmanipulation arithmetisch:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% Helligkeit */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% Helligkeit */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* Desaturiert */
}

Ändern Sie --hue auf 210 und Ihre gesamte Palette verschiebt sich von Orange zu Blau. Versuchen Sie das mit HEX.

Heller: Erhöhen Sie L. 60% → 80% = heller.

Dunkler: Verringern Sie L. 60% → 40% = dunkler.

Desaturiert: Verringern Sie S. 100% → 40% = mehr gedämpft.

Komplementärfarbe: Fügen Sie 180 zu H. 11 → 191.

Konvertierungszettel

HEX → RGB: Teilen Sie in Paare auf, konvertieren Sie hexadezimale Ziffern in Dezimalzahlen.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (vereinfacht):

Gedächtnisformeln zu memorieren. Verwenden Sie die Farbpalette , um zwischen allen drei Formaten sofort umzustellen.

Moderne CSS: oklch()

CSS Farb-Level 4 führte oklch() -- wahrnehmungsunabhängige Helligkeit ein. Anders als HSL sehen gleichwertige L-Werte tatsächlich gleich hell aus, unabhängig von der Farbe. Wenn Sie 2025+ ein neues Design-System starten, sollten Sie oklch() neben HSL in Betracht ziehen.

Verwandte

Naechster Schritt

Fuehre den Workflow direkt in Color Picker aus und speichere die Baseline.