Was bedeuten all diese Farbformate?

Eine Farbe auf dem Bildschirm ist eine Mischung aus rotem, grünem und blauem Licht. Jedes Format schreibt diese Mischung auf seine eigene Weise. CSS- und Designtools 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 Cyan-, Magenta-, Gelb- und schwarzer Druckfarbe an. LAB, LCH, OKLab und OKLCH sind so aufgebaut, dass gleiche Abstände zwischen den Zahlen für das Auge wie gleiche Abstände wirken. Das ist hilfreich für Paletten und Farbverläufe. Modernes CSS unterstützt alle vier Formate. Terminals verwenden ANSI-Farbcodes, und CSS kennt außerdem benannte Farben wie tomato.

Hier ist dasselbe Orange in den einzelnen Formaten:

Format Beispiel Bedeutung der Werte
HEX #ff6600 Rot, Grün und Blau mit jeweils zwei hexadezimalen Ziffern
RGB rgb(255, 102, 0) Rot, Grün und Blau 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 schwarze 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, Buntheit und Farbton
OKLab oklab(69.58% 0.1482 0.1406) Helligkeit und zwei Farbachsen in einem neueren Modell als LAB
OKLCH oklch(69.58% 0.2043 43.49) Helligkeit, Buntheit und Farbton in OKLab
XYZ xyz(46, 30.77, 3.52) Der CIE-1931-Farbraum, auf dem LAB basiert
HCG hcg(24, 100%, 0%) Farbton, Buntheit und Grauanteil
Farbname orangered Die ähnlichste benannte CSS-Farbe
ANSI 16 91 Terminalcode für eine der 16 Grundfarben
ANSI 256 208 Terminalcode für eine von 256 Farben
AppleScript RGB {65535, 26214, 0} Rot, Grün und Blau von 0 bis 65535, wie AppleScript sie schreibt
Graustufen gray(46.7%) Helligkeit von 0 % bis 100 %

Werkzeugbeschreibung

Dieses Werkzeug wandelt Farben zwischen diesen 17 Formaten um und zeigt das Ergebnis darunter als Farbfeld an. Alle Farbkonverter hier funktionieren auf dieselbe Weise – vom allgemeinen Farbkonverter bis hin zu Konvertern für einzelne Paare wie HEX zu RGB, RGB zu CMYK oder HEX zu Farbname: Sie starten mit den Formaten, die im Namen angegeben sind, und über die Menüs „Quelle“ und „Ziel“ lassen sich beliebige andere Formate auswählen. Fügen Sie eine Farbe ein, und das Ergebnis erscheint während der Eingabe und kann direkt kopiert werden. Wenn „Automatisch erkennen“ als Quelle ausgewählt ist – so ist der Farbkonverter standardmäßig eingestellt –, ermittelt das Werkzeug 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 #. Die vierte Ziffer oder das letzte Ziffernpaar legt die Deckkraft fest.
  • Funktionen wie rgb(), hsl() oder oklch() mit Kommas oder Leerzeichen zwischen den Werten sowie einer optionalen 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%).
  • Einfache Zahlen ohne Funktionsnamen, wie 255, 102, 0. „Automatisch erkennen“ interpretiert drei Zahlen als RGB oder als HSL, wenn die letzten beiden Prozentwerte sind, und vier Zahlen als CMYK – es sei denn, sie sehen aus wie RGB mit einer Deckkraft.
  • 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, wie {65535, 26214, 0}.

Funktionsweise

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

  • Die Deckkraft wird bei HEX, RGB, HSL, HWB, OKLab und OKLCH übernommen, da diese Formate sie darstellen können. Bei den anderen Formaten wird sie weggelassen.
  • LAB, LCH und XYZ sind CIE-Werte mit dem Weißpunkt D65. CSS lab() und lch() verwenden den Weißpunkt D50, daher unterscheiden sich ihre Zahlen leicht.
  • 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. Daher wird aus oklch(70% 0.3 145) der Wert #00c800.
  • Als Farbname wird die ähnlichste der benannten CSS-Farben ausgegeben. Das Ergebnis ist daher nur bei Farben mit einem eigenen Namen exakt: #ff6600 ergibt orangered, das dem Wert #ff4500 entspricht.
  • Ergebnisse in ANSI 16 und ANSI 256 sind Näherungswerte, da diese Paletten nur 16 beziehungsweise 256 Farben enthalten. ANSI-16-Ergebnisse sind Vordergrundcodes von 30 bis 37 und von 90 bis 97. Die Hintergrundcodes 40 bis 47 und 100 bis 107 werden als dieselben Farben interpretiert.
  • CMYK wird mit der Grundformel berechnet, ohne Farbprofil eines Druckers. Daher können die CMYK-Werte einer Druckerei für dieselbe Farbe abweichen.
  • Graustufen entsprechen dem Durchschnitt 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.
  • „Automatisch erkennen“ interpretiert eine dreistellige Zahl wie 208 als kurzen HEX-Code. Wählen Sie für Terminalcodes daher ANSI 256 oder ANSI 16 als Quelle aus.
  • HSV und HSB sind zwei Bezeichnungen für dasselbe Modell.