Farbkonverter (HEX, RGB, HSL)

Design- und Entwicklungsworkflows kombinieren verschiedene Möglichkeiten, um dieselbe Farbe auf dem Bildschirm zu beschreiben. HEX (#RRGGBB) ist in CSS- und Figma-Inspektionspanels kompakt. RGB listet rote, grüne und blaue Kanäle von 0–255 auf – die Muttersprache von Monitoren und Canvas-APIs. HSL drückt den Farbton auf einem 0–360°-Rad aus, die Sättigung als 0–100 % Lebendigkeit und die Helligkeit als 0–100 % Helligkeit, was für viele Designer einfacher ist, wenn sie Farbtöne optimieren, ohne dass der Farbton driftet.

Alle drei Formate in diesem Tool werden bei korrekter Konvertierung demselben sRGB-Farbraum zugeordnet. HEX und RGB sind exakte Inverse mit 8-Bit-Präzision. HSL verwendet intern Gleitkomma-Mathematik; Nach der Roundtrip-Konvertierung können Sie feststellen, dass sich die Kanalwerte um einen Schritt unterscheiden – normal für HSL-Bearbeitungsworkflows.

Schalten Sie die segmentierte Eingabesteuerung zwischen HEX und RGB um, je nachdem, was Ihre Übergabe bietet. Geben Sie im HEX-Modus mit oder ohne Hash ein – #3B82F6 und 3B82F6 funktionieren beide, ebenso wie die dreistellige Abkürzung #3BF erweitert zu #33BBFF. Im RGB-Modus geben Sie die Kanäle separat ein; Das Tool gibt HEX in Großbuchstaben sowie einen rgb()-CSS-String und eine HSL-Aufschlüsselung aus.

Funktioniertes Beispiel mit dem Standard-HEX-Feld #3B82F6: Rot = 0x3B = 59, Grün = 0x82 = 130, Blau = 0xF6 = 246. Zusammenfassung zeigt RGB(59, 130, 246) – ein gesättigtes Blau, das in Tailwind-UI-Paletten üblich ist. HSL liegt bei etwa 217° Farbton, 91 % Sättigung, 60 % Helligkeit. Wechseln Sie mit diesen Kanalwerten in den RGB-Modus und Sie erhalten das gleiche HEX zurück.

HSL ist beim Erstellen von Design-Tokens nützlich: Erhöhen Sie die Helligkeit, um #3B82F6 in einen Schwebezustand zu versetzen, ohne einen neuen Farbton auszuwählen. Geringere Sättigung für gedämpfte Hintergründe. Für programmatische Themes speichern viele Teams HSL in benutzerdefinierten CSS-Eigenschaften, da die Alpha-Syntax „hsl(217 91 % 60 % / 0,5)“ klar lesbar ist.

Zu den häufigsten Fehlern gehören die Annahme, dass HEX Alpha enthält (achtstelliges #RRGGBBAA wird hier nicht unterstützt), das Mischen von 0–1 normalisiertem RGB aus einigen Grafik-APIs ohne Multiplikation mit 255 und der Vergleich gedruckter Pantone-Farbfelder mit sRGB-Hex auf einem nicht kalibrierten Display. Webfarben sind emittiertes sRGB-Licht – für die CMYK-Druckkonvertierung ist ein separates Profil erforderlich.

Die dreistellige HEX-Kurzschrift dupliziert jedes Nibble – aus #ABC wird #AABBCC. Ungültige Zeichen oder falsche Länge führen zu einer Bindestrich-Überschrift, in der nach einer gültigen Farbe gefragt wird, z. B. #3B82F6. Benannte CSS-Farben (rebeccapurple, cornflowerblue) werden nicht analysiert – konvertieren Sie sie zuerst in DevTools in HEX und fügen Sie sie dann hier ein.

Einschränkungen: nur undurchsichtiges sRGB – kein CMYK, Lab, Display-P3 oder achtstelliges Alpha-Hex. Farbenblindheitssimulation und Kontrastprüfung gehören in den Kontrastverhältnisrechner. WCG-Displays geben gesättigte Blautöne möglicherweise anders wieder als die sRGB-Vorschau auf Standardmonitoren.