Dieselben drei Zahlen
| Schreibweise | Der Wert | Liest sich als |
|---|---|---|
| HEX | #394DFE | drei Kanäle zur Basis 16 |
| RGB | rgb(57, 77, 254) | dieselben Kanäle im Dezimalsystem |
| HSL | hsl(234, 99%, 61%) | Farbton, Sättigung, Helligkeit |
Hex packt jeden Kanal in zwei Ziffern von 00 bis FF. RGB schreibt dieselben Kanäle als 0 bis 255. HSL beschreibt die Farbe stattdessen über einen Farbtonwinkel und zwei Prozentangaben, und das ist eine andere Art, denselben Bildpunkt zu benennen.
Wohin Hex gehört
Entwurfsübergabe und Stilvorlagen. Sechs Zeichen, keine Satzzeichen, nichts zum Vertippen. Figma, eine Tailwind-Konfiguration, eine Markenseite und eine CSS-Variable nehmen es direkt, und zwei Leute, die #394DFE lesen, können sich nicht uneins sein, was dort steht.
Die Umrechnung, nach der ich am häufigsten greife, ist nicht die, nach der diese Anleitung heißt. Es ist SwiftUI. Color(red: 0.22, green: 0.30, blue: 1.00) verlangt, dass jeder Kanal zuerst durch 255 geteilt wird, und das ist der Schritt, den niemand im Kopf machen will.
Klipto liest auch die Schreibweise, die du kopiert hast, eine hsl()-Zeichenkette gibt dir also Hex zurück. Es gibt kein Eingabeformat zu wählen und keine Richtung einzustellen.
Wo sich rgb() seinen Platz verdient
Alpha, und Werte, die aus Code kommen. rgba(57, 77, 254, 0.4) sagt 40 Prozent Deckkraft klar heraus. Wird eine Farbe von einem Skript oder einer Sass-Funktion zusammengesetzt, sind drei Dezimalzahlen leichter zu erzeugen als eine Zeichenkette zur Basis 16, die du auffüllen musst.
Hex kann Alpha auch tragen, und das vergessen viele. Acht Ziffern heißen RGBA: #394DFE80 ist dieses Blau bei ungefähr halber Deckkraft, und heutige Browser kommen damit zurecht. Die vierstellige Kurzform tut dasselbe mit einer Ziffer je Kanal. rgba() ist also nicht der einzige Weg zur Durchsichtigkeit, nur der lesbare.
HSL, wenn du von Hand nachjustierst
Die Helligkeit ist eine Zahl, die du verschieben kannst. Nimm hsl(234, 99%, 61%), senk sie auf 45 Prozent, und du hast eine dunklere Fassung desselben Farbtons für einen Überfahr-Zustand. In Hex hieße das: umrechnen, drei Kanäle anpassen, zurückrechnen.
Die Falle: Hex hat keinen Farbraum
Ein Hex-Code sind drei Bytes und sonst nichts. Er trägt keine Angabe darüber, zu welchem Farbraum diese Bytes gehören, also nimmt jede Software einfach sRGB an. Diese Annahme ist unsichtbar, bis etwas ihr widerspricht.
AppKit widerspricht. NSColor(red:green:blue:alpha:) baut die Farbe in deviceRGB, nicht in sRGB, und auf einem Bildschirm mit weitem Farbraum erscheinen dieselben Zahlen sichtbar anders als das Hex, mit dem du angefangen hast. Nimm stattdessen NSColor(srgbRed:green:blue:alpha:). Der Fehler steckt nicht in der Schreibweise. Er steckt in dem Farbraum, den niemand aufgeschrieben hat.
Was ich benutze
Hex voreingestellt, weil es überallhin eingefügt werden kann. rgb(), wenn Deckkraft oder ein berechneter Wert im Spiel ist, HSL, wenn ich Abstufungen eines Farbtons baue.
Für einen einzelnen Wert im Browser: kostenlos im Browser ausprobieren. Auf meinem eigenen Mac legt Klipto jede Schreibweise in die Einfüge-Vorschau, die kopierte Farbe kommt also in der Form an, die die geöffnete Datei will — offline, ohne Tab.
Häufige Fragen
Ist HEX oder RGB besser für CSS?
Beides funktioniert gleich. Hex ist kürzer und in der Übergabe üblich, rgb() liest sich besser, wenn du Alpha brauchst oder wenn dein Code den Wert berechnet.
Unterstützt Hex Durchsichtigkeit?
Ja. Acht Ziffern sind RGBA und vier Ziffern die Kurzform, #394DFE80 sind also etwa 50 Prozent Deckkraft.
Warum sehen dieselben Zahlen in meinem Mac-Programm anders aus?
NSColor(red:green:blue:alpha:) benutzt deviceRGB statt sRGB. Hex-Codes gehen von sRGB aus, wechsel also zu NSColor(srgbRed:...).
Wann sollte ich HSL nehmen?
Wenn du eine Farbe von Hand änderst. Helligkeit und Sättigung sind eigene Zahlen, eine dunklere Abstufung ist also eine einzige Bearbeitung.
Weiterlesen
Hol dir jede Schreibweise im Moment des Einfügens. Klipto laden.