Farbformate erklärt: HEX, RGB und HSL
Schnelle Antwort
HEX (#RRGGBB) und RGB (0–55 pro Kanal) kodieren direkt die Intensitäten von Rot, Grün und Blau. HSL (Farbton 0–60°, Sättigung/Helligkeit 0–00 %) kodiert Farben auf eine Weise, die der menschlichen Wahrnehmung entspricht, was die Erstellung von Paletten und Schattierungen erleichtert. Konvertieren Sie zwischen allen dreien mit unserem Farbkonverter.
Einführung
Webfarben werden in drei vorherrschenden Formaten angegeben: HEX (Basis-16-Rot, Grün, Blau), RGB (Dezimal 0–55 pro Kanal) und HSL (Farbton, Sättigung, Helligkeit). Alle drei beschreiben denselben sRGB-Farbraum, stellen jedoch unterschiedliche Achsen zur Verfügung: HEX und RGB sind hardwareorientiert (direkte Kanalwerte), während HSL menschlich orientiert ist (intuitiver Farbton, Sättigung und Helligkeit). Modern CSS unterstützt auch Alpha über HEX8, rgba() und hsla().
Schritt für Schritt
-
Verstehen Sie die HEX-Notation
HEX schreibt jeden Kanal als zweistellige Basis-16-Zahl: #RRGGBB. 00 ist aus, FF (255) ist volle Intensität. #FF0000 ist reines Rot, #00FF00 reines Grün, #0000FF reines Blau, #FFFFFF Weiß, #000000 Schwarz. Eine vierstellige Abkürzung #RGB wird zu #RRGGBB erweitert und #RRGGBBAA fügt Alpha hinzu (z. B. #FF573380 ist 50 % Alpha).
-
Verstehen Sie die RGB-Notation
RGB verwendet Dezimalzahlen 0–55 pro Kanal: rgb(255, 87, 51) ist dasselbe wie #FF5733. Die Funktion rgba() fügt ein 0-Alpha hinzu: rgba(255, 87, 51, 0.5) ist zu 50 % undurchsichtig. RGB entspricht HEX – es ist nur eine Dezimalzahl anstelle der Basis 16.
-
Verstehen Sie die HSL-Notation
HSL verwendet Farbton (0–60° im Farbkreis: 0 = Rot, 120 = Grün, 240 = Blau), Sättigung (0 % = Grau, 100 % = Vollfarbe) und Helligkeit (0 % = Schwarz, 50 % = Normal, 100 % = Weiß). hsl(11, 100 %, 60 %) ist ein leuchtendes Orange. HSL macht es einfach, Farbtöne (Helligkeit erhöhen) und Schattierungen (Helligkeit verringern) desselben Farbtons zu erstellen.
-
Konvertieren Sie zwischen Formaten
HEX→RGB: Jedes Paar als Basis-16 analysieren. RGB→HEX: Konvertieren Sie jeden Kanal in eine zweistellige Basis-16. RGB→HSL: Berechnet Max/Min der normalisierten Kanäle, Helligkeit = (max+min)/2, Sättigung hängt von der Helligkeit ab, Farbton ist der Winkel des dominanten Kanals. Nutzen Sie unseren Farbkonverter, um all dies im Handumdrehen zu erledigen.
-
Wählen Sie das richtige Format für die Aufgabe
Verwenden Sie HEX für Kompaktheit in Design-Tokens und Assets. Verwenden Sie RGB/rgba(), wenn Sie Kanäle interpolieren oder animieren müssen. Verwenden Sie HSL/HSLA beim Generieren von Paletten, Schattierungen oder Themenvariationen – die Anpassung der Helligkeit um 10 % ist viel einfacher als Überlegungen zu RGB-Deltas.
Beispiele
Reines Rot in allen drei Formaten
Eingang: #FF0000
Ausgabe: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Ein leuchtendes Orange
Eingang: #FF5733
Ausgabe: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Weiß und Schwarz
Eingang: #FFFFFF und #000000
Ausgabe: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Erstellen Sie einen 5-stufigen Farbton aus einem HSL-Farbton
Eingang: hsl(210, 70 %, 50 %) – Helligkeit um 30/40/50/60/70 % variieren
Ausgabe: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 – eine kohärente blaue Palette
Häufige Probleme
- Mischen von 3-stelligem und 6-stelligem HEX: #F00 und #FF0000 haben die gleiche Farbe, aber einige Parser akzeptieren nur eine Form. Normalisieren Sie den Code auf 6 Ziffern, um Überraschungen zu vermeiden.
- Vergessen Sie, dass HSL Helligkeit 50 % nicht „halbe Helligkeit“ ist: Bei 100 % Sättigung ist 50 % Helligkeit der reine Farbton; Bei über 50 % erfolgt eine Tönung in Richtung Weiß, bei unter 50 % erfolgt eine Schattierung in Richtung Schwarz. „50 % Grau“ ist hsl(0, 0 %, 50 %).
- Alphakanal-Verwirrung: #RRGGBBAA (HEX8) wird in modernen Browsern unterstützt, in älteren jedoch nicht; rgba()/hsla() bietet eine breitere Unterstützung. Testen Sie immer die Zielumgebung.
- Nicht übereinstimmende Farbräume: HEX, RGB und HSL beschreiben alle sRGB. Wenn Sie zu/von P3 oder Lab/OKLCH (von modernen Displays verwendet) konvertieren, erzeugt eine naive Kanalkopie falsche Farben – verwenden Sie eine geeignete Farbbibliothek.
Tipps
- Verwenden Sie HSL beim Entwerfen einer Palette: Wählen Sie einen Farbton aus und variieren Sie dann die Helligkeit (z. B. 30/50/70 %) und die Sättigung (z. B. 60/80/100 %), um kohärente Schattierungen und Farbtöne zu erzeugen.
- Überprüfen Sie zur Barrierefreiheit das Kontrastverhältnis zum Hintergrund – WCAG AA erfordert 4,5:1 für normalen Text, AAA 7:1. Verwenden Sie unseren Farbkonverter, um relative Luminanz und Kontrast zu berechnen.
- Bevorzugen Sie das moderne CSS color-mix() oder oklch() für eine wahrnehmungsmäßig einheitliche Interpolation – RGB Interpolation kann beim Mischen von Komplementärfarben durch schlammige Grautöne hindurchgehen.
- Konvertieren Sie beim Generieren von Farbverläufen zunächst die Endpunkte in dasselbe Format. Das Mischen von HEX und HSL in einer einzigen Farbverlaufsdeklaration kann zu unerwarteten Mittelpunkten führen.