Was bedeuten all diese Farbformate?

Eine Farbe auf einem Bildschirm ist eine Mischung aus rotem, grünem und blauem Licht. Jedes Format gibt diese Mischung auf seine eigene Weise an. CSS und Design-Tools verwenden HEX-Codes und RGB-Werte. HSL, HSV und HWB beschreiben eine Farbe anhand ihres Farbtons – des Winkels auf dem Farbkreis – sowie ihrer Sättigung und Helligkeit. Das lässt sich von Hand leichter anpassen. CMYK gibt die Mengen an cyanfarbener, magentafarbener, gelber und schwarzer Druckfarbe an. LAB, LCH, OKLab und OKLCH sind so aufgebaut, dass gleiche Zahlenabstände für das Auge ungefähr gleich groß wirken. Das ist bei Farbpaletten und Farbverläufen hilfreich, und modernes CSS unterstützt alle vier. Terminals verwenden ANSI-Farbcodes. CSS bietet außerdem benannte Farben wie tomato.

Hier sehen Sie dasselbe Orange in den verschiedenen Formaten:

Format Beispiel Bedeutung der Werte
HEX #ff6600 Rot, Grün und Blau, jeweils als zwei hexadezimale Ziffern
RGB rgb(255, 102, 0) Rot, Grün und Blau im Bereich von 0 bis 255
HSL hsl(24, 100%, 50%) Farbton, Sättigung und Helligkeit
HSV hsv(24, 100%, 100%) Farbton, Sättigung und Wert, auch HSB genannt
HWB hwb(24 0% 0%) Farbton, Weißanteil und Schwarzanteil
CMYK cmyk(0%, 60%, 100%, 0%) Cyan-, Magenta-, Gelb- und Schwarzanteil der Druckfarbe
LAB lab(62.31, 55, 71.33) CIE-Helligkeit, Grün bis Rot und Blau bis Gelb
LCH lch(62.31, 90.07, 52.36) CIE-Helligkeit, Chroma und Farbton
OKLab oklab(69.58% 0.1482 0.1406) Helligkeit und zwei Farbachsen, ähnlich wie bei LAB
OKLCH oklch(69.58% 0.2043 43.49) Helligkeit, Chroma und Farbton in OKLab
XYZ xyz(46, 30.77, 3.52) Der CIE-XYZ-Farbraum, auf dem LAB basiert
HCG hcg(24, 100%, 0%) Farbton, Chroma und Grauanteil
Farbname orangered Der ähnlichste benannte CSS-Farbwert
ANSI 16 91 Terminalcode für eine der 16 Grundfarben
ANSI 256 208 Terminalcode für eine der 256 Farben
AppleScript RGB {65535, 26214, 0} Rot, Grün und Blau im Bereich von 0 bis 65535, wie von AppleScript angegeben
Graustufen gray(46.7%) Helligkeit von 0 % bis 100 %

Toolbeschreibung

Dieses Tool wandelt Farben zwischen diesen 17 Formaten um und zeigt das Ergebnis als Farbfeld an. Alle Farbkonverter hier funktionieren gleich – vom allgemeinen Farbkonverter bis zu den Konvertern für jeweils ein Formatpaar, etwa HEX zu RGB, RGB zu CMYK oder HEX zu Farbname: Sie starten mit den Formaten, die im Namen stehen, und über die Menüs „Quelle“ und „Ziel“ können Sie beliebige andere Formate auswählen. Fügen Sie eine Farbe ein. Das Ergebnis erscheint während der Eingabe und kann anschließend kopiert werden. Wenn als Quelle „Automatische Erkennung“ ausgewählt ist – die Standardeinstellung des Farbkonverters –, ermittelt das Tool das Format anhand der Schreibweise der Farbe. Mit der Schaltfläche zum Tauschen wird die Umwandlungsrichtung umgekehrt.

Beispiele

Eingabe Ziel Ergebnis
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Farbname tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Was Sie einfügen können

  • HEX-Codes mit 3, 4, 6 oder 8 Ziffern, mit oder ohne #. Eine vierte Ziffer oder ein letztes Wertepaar legt die Deckkraft fest.
  • Funktionen wie rgb(), hsl() oder oklch(), mit Kommas oder Leerzeichen zwischen den Werten und optionaler Deckkraft als vierter Wert oder nach einem Schrägstrich: rgba(37, 99, 235, 0.5) oder rgb(37 99 235 / 50%).
  • Prozentwerte für Rot, Grün und Blau, wie in rgb(100%, 40%, 0%), sowie Farbtonangaben in deg, rad, grad oder turn, wie in hsl(0.5turn, 100%, 50%).
  • Ganze Zahlen ohne Funktionsnamen, zum Beispiel 255, 102, 0. Bei der automatischen Erkennung werden drei Zahlen als RGB gelesen oder als HSL, wenn die letzten beiden Prozentwerte sind. Vier Zahlen werden als CMYK interpretiert, sofern sie nicht wie RGB-Werte mit Deckkraft aussehen.
  • Farbnamen in beliebiger Groß- und Kleinschreibung, mit oder ohne Leerzeichen: Rebecca Purple wird erkannt.
  • HSB-Werte in der Schreibweise hsb() sowie AppleScript-Farben in geschweiften Klammern, zum Beispiel {65535, 26214, 0}.

Funktionsweise

Die Berechnungen übernimmt color-convert, eine JavaScript-Bibliothek zur Farbkonvertierung.

  • Die Deckkraft wird in HEX, RGB, HSL, HWB, OKLab und OKLCH übernommen, da diese Formate sie angeben können. Bei den anderen Formaten wird sie weggelassen.
  • LAB, LCH und XYZ verwenden CIE-Werte mit dem Weißpunkt D65. CSS lab() und lch() verwenden den Weißpunkt D50, daher unterscheiden sich die Werte geringfügig.
  • LAB, LCH, OKLab und OKLCH können Farben beschreiben, die Bildschirme nicht darstellen können. Bei der Umwandlung in HEX, RGB oder ein anderes Bildschirmformat werden die Farbkanäle auf den Bereich von 0 bis 255 begrenzt. Deshalb wird oklch(70% 0.3 145) zu #00c800.
  • Als Farbname wird der ähnlichste benannte CSS-Farbwert ausgegeben. Daher ist das Ergebnis nur bei Farben mit einem Namen exakt: Für #ff6600 wird orangered ausgegeben, also #ff4500.
  • Die Ergebnisse für ANSI 16 und ANSI 256 sind Näherungswerte, da diese Paletten nur 16 beziehungsweise 256 Farben enthalten. Ergebnisse für ANSI 16 sind Vordergrundcodes von 30 bis 37 und von 90 bis 97. Die Hintergrundcodes von 40 bis 47 und von 100 bis 107 werden denselben Farben zugeordnet.
  • CMYK wird anhand der Grundformel berechnet, ohne ein Drucker-Farbprofil zu berücksichtigen. Deshalb können die CMYK-Werte einer Druckerei für dieselbe Farbe abweichen.
  • Graustufen sind der Mittelwert der Rot-, Grün- und Blauwerte.

Tipps

  • Ergebnisse in HEX, RGB, HSL, HWB, OKLab, OKLCH und als Farbname sind gültiges CSS und können unverändert in ein Stylesheet eingefügt werden.
  • Bei der automatischen Erkennung wird eine dreistellige Zahl wie 208 als kurzer HEX-Code gelesen. Wählen Sie für Terminalcodes daher ANSI 256 oder ANSI 16 als Quelle.
  • HSV und HSB sind zwei Bezeichnungen für dasselbe Modell.