HSL in HEX umrechnen Hue Saturation Lightness ↔ Hexadecimal Kostenlos Online Sicher
Geben Sie einen Wert in HSL ein und lesen Sie ihn sofort in HEX ab. Gerechnet wird in Ihrem Browser, nichts wird irgendwohin geschickt, und wovon das Ergebnis abhängt, steht unten, statt vorausgesetzt zu werden.
Kein Upload
Woher diese Schreibweisen kommen
Hex und RGB sind dasselbe, zweimal geschrieben. Eine Bildschirmfarbe sind drei Zahlen — wie viel rotes, grünes und blaues Licht auszusenden ist —, jede von 0 bis 255, also ein Byte; Hex schreibt diese Bytes schlicht im Sechzehnersystem, sodass #FF8800 und rgb(255, 136, 0) derselbe Befehl an denselben Bildpunkt sind. HSL wurde erfunden, weil keines von beiden für Menschen lesbar ist: es gibt den Farbton als Winkel auf einem Farbkreis an, Sättigung und Helligkeit als Prozentwerte, sodass ein Gestalter etwas heller machen kann, ohne drei Zahlen neu zu berechnen. CMYK gehört einer ganz anderen Welt an — der Farbe, nicht dem Licht. Es ist subtraktiv, aus vier Druckplatten gebaut, und es erreicht nicht jede Farbe, die ein Bildschirm kann, denn der Bildschirm sendet Licht aus, das Papier wirft es nur zurück.
Wo sie Ihnen begegnen
Hex ist das, was Sie in ein Stylesheet tippen und was ein Gestaltungswerkzeug Ihnen reicht. RGB erscheint überall dort, wo mit einer Farbe gerechnet wird — Verläufe, Transparenz, Code, der einen Ton berechnet. Zu HSL greift man beim Abstimmen einer Palette von Hand, weil die gewünschten Änderungen meist Änderungen einer seiner drei Zahlen sind. CMYK verlangt die Druckerei, und die Umrechnung dorthin ist der Augenblick, in dem ein Entwurf aufhört, Licht zu sein, und zu Farbe wird.
Häufige Fragen
Warum weicht mein CMYK-Ergebnis von dem der Druckerei ab?
Weil es keine einzige richtige Umrechnung gibt. Die Rechnung auf dieser Seite ist die einfache, geräteunabhängige — die richtige Antwort, wenn Sie einen Ausgangspunkt oder eine grobe Entsprechung brauchen. Eine Druckerei rechnet über ein Farbprofil um, das die bestimmte Farbe, das Papier und die Maschine berücksichtigt; dieselbe RGB-Farbe ergibt auf glänzendem Papier andere CMYK-Werte als auf ungestrichenem. Was genau stimmen muss, verlangt das Profil der Druckerei, nicht das Vertrauen in eine Formel.
Warum lassen sich manche Bildschirmfarben nicht drucken?
Weil beide nicht dieselben Farben erreichen. Ein Bildschirm macht Farbe durch Hinzufügen von Licht und kann ein leuchtendes, gesättigtes Cyan oder Grün erzeugen, dem Druckfarbe schlicht nicht nahekommt; Papier macht Farbe durch Verschlucken von Licht, und das Hellste, was es je sein kann, ist das Weiß der Seite. Die Menge der erreichbaren Farben heißt Farbraum, und wo sie sich nicht überschneiden, muss eine Umrechnung die nächstliegende verfügbare Farbe wählen. Darum wirkt eine leuchtende Bildschirmfarbe im Druck oft etwas matter.
Ist das Ergebnis exakt?
Wo beide Einheiten durch ganze Zahlen voneinander abgeleitet sind, ja — die Seite sagt es über der Zahl, und gerundet wird nur bei der Anzahl der angezeigten Stellen. Wo das Verhältnis keine endliche Dezimalzahl hat, zeigt die Seite zwölf signifikante Stellen und nennt die Beziehung näherungsweise, statt etwas anderes vorzugeben.
Verlässt etwas, das ich eingebe, mein Gerät?
Nein. Die Rechnung läuft in Ihrem Browser; nichts wird hochgeladen, und es gibt auch keinen Server dafür. Einmal geladen, funktioniert die Seite auch ohne Netz.
Warum man HSL in HEX umrechnet
Sie haben eine Farbe in HSL ausgearbeitet, weil das die Schreibweise ist, in der Sie denken können: Farbton 30, Sättigung 29%, Helligkeit 28%, ein gedämpftes Braun, und eine blassere Fassung bei 34% für den Hover-Zustand. Nun muss die Farbe irgendwohin, wo ein Hex-Code verlangt wird: eine Design-Token-Datei, ein Markenblatt, ein Werkzeug, das hsl() nicht versteht, eine E-Mail-Vorlage, eine Nachricht an einen Kollegen. HSL in HEX umzurechnen heißt, die Farbe, über die Sie nachgedacht haben, in der Form aufzuschreiben, die kurz, eindeutig und von allem verstanden ist.
Die Umrechnung läuft in der Gegenrichtung zu der, der Designer zuerst begegnen. Sie beginnt bei drei menschenfreundlichen Zahlen und kommt bei drei Bytes an. Jeder Schritt ist einfache Arithmetik, doch sie umfasst einige trigonometrieartige Fälle und Rundungen, weshalb Menschen sie sich lieber abnehmen lassen. Die Seite erledigt es in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie, wie aus den drei Zahlen die sechs Hex-Ziffern werden, was die Umrechnung erhält, warum eine Farbe, die durch HSL gegangen ist, einen oder zwei Schritte von ihrem Ausgangspunkt landen kann, die Arten, wie Designer die Umrechnung nutzen, und die Fallen, die es zu meiden gilt.
Wie die Umrechnung funktioniert
Von Farbton, Sättigung und Helligkeit zu Rot, Grün und Blau
Der Umrechner berechnet zuerst die Buntheit (Chroma), also wie weit die Farbe vom Grau entfernt ist: Sie wächst mit der Sättigung und schrumpft, wenn sich die Helligkeit von 50% entfernt. Dann ordnet er den Farbton einem von sechs Sektoren des Farbkreises zu, jeder 60 Grad breit, und entscheidet anhand des Sektors, welcher der drei Kanäle sein Maximum hat, welcher sein Minimum und welcher dazwischen liegt. Schließlich addiert er eine Konstante, damit die Helligkeit stimmt, skaliert die drei Werte vom Bereich 0 bis 1 auf 0 bis 255 hoch und rundet jeden auf eine ganze Zahl. Diese drei Bytes werden im Sechzehnersystem geschrieben, je zwei Ziffern.
Ein Beispiel mit Zahlen
Nehmen Sie hsl(30, 29%, 28%). Die Buntheit ist (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. Der Farbton von 30 Grad liegt in der Mitte des ersten Sektors, der mittlere Kanal ist also die halbe Buntheit, 0,0812. Die zu addierende Konstante ist 0,28 − 0,0812 = 0,1988. Rot ist also 0,1624 + 0,1988 = 0,3612, Grün ist 0,0812 + 0,1988 = 0,28 und Blau ist 0,1988. Mit 255 multipliziert und gerundet sind das 92, 71 und 51. In Hex ist das #5C4733.
Grautöne
Beträgt die Sättigung 0%, ist die Farbe ein Grau, gleich welcher Farbton, und die drei Bytes sind gleich. hsl(0, 0%, 50%) ist #808080. Der Farbton wird ignoriert, jede Farbtonzahl ergibt also dasselbe Grau.
Was die Umrechnung erhält und was nicht
Sie erhält die Farbe, wie Sie sie beschrieben haben
Das Ergebnis ist die Farbe, deren Farbton, Sättigung und Helligkeit Sie angegeben haben, als Bytes geschrieben. Die drei Zahlen, die Sie getippt haben, sind die Farbe, wie das Auge sie ordnet, ein Farbton auf dem Kreis, wie gesättigt sie ist, wie hell. Darum lohnt sich HSL, und die Umrechnung trägt Ihre Wahl getreu nach Hex.
Sie kann auf dem Rückweg nicht dieselben Zahlen versprechen
Beide beschreiben dieselben Farben, doch HSL erreicht sie über eine andere Geometrie, und seine drei Zahlen werden beim Aufschreiben auf ganze Grad und ganze Prozent gerundet. Eine nach HSL und zurück geführte Farbe kann also ein oder zwei Schritte von ihrem Ausgangspunkt landen: optisch gleich, nicht Byte für Byte gleich. In unserem Beispiel war #5A4632 eine Farbe, deren HSL etwa hsl(30, 29%, 28%) ist; rechnet man diese gerundeten Zahlen zurück, erhält man #5C4733, zwei Schritte entfernt im Rot. Brauchen Sie die exakten Bytes, behalten Sie das Hex.
Prozent- und Gradzeichen
Die Seite liest den Farbton in Grad und Sättigung und Helligkeit in Prozent. Sie können sie mit oder ohne Zeichen schreiben. Ein Farbton über 360 oder unter 0 wird um den Kreis gewickelt, 390 ist also dasselbe wie 30.
Praktische Verwendungen
Eine Design-Token-Datei schreiben
Ein Designsystem speichert Farben als Tokens. Viele Teams erstellen Farben in HSL, weil sie darüber nachdenken können, und veröffentlichen sie in Hex, weil jedes Werkzeug es liest. Rechnen Sie HSL für jedes Token einmal in HEX um, und die veröffentlichte Datei ist etwas, das jeder nutzen kann.
Farben für Werkzeuge erzeugen, die hsl() nicht lesen
E-Mail-Programme, manche Dokumenteditoren, ältere Grafikprogramme und viele Diagrammbibliotheken akzeptieren nur Hex. Was Sie in HSL ausgearbeitet haben, muss umgerechnet werden, bevor sie es nutzen können.
Eine erzeugte Palette prüfen
Ein Skript, das eine Palette durch Drehen des Farbtons erzeugt, liefert eine Liste von hsl()-Werten. Um sie als die Codes zu sehen, die Sie in ein Stylesheet setzen oder einem Designer geben würden, rechnen Sie jeden in Hex um. So erkennen Sie auch Werte, die auf denselben Code runden und sich daher nicht wirklich unterscheiden.
Eine Farbe in einer Nachricht teilen
Ein Hex-Code ist kurz, kopierbar und von fast jedem verstanden, der mit Farbe arbeitet. Ein hsl()-Wert ist länger und außerhalb des Designs weniger vertraut. Wenn Sie jemandem eine Farbe senden, ist Hex die höfliche Form.
So rechnen Sie HSL hier in HEX um
Den HSL-Wert eintippen oder einfügen
Geben Sie die Farbe im ersten Feld in der Form hsl(30, 29%, 28%) ein, oder einfach die drei Zahlen. Der Farbton steht in Grad, Sättigung und Helligkeit in Prozent.
Den Hex-Code ablesen
Die Antwort erscheint sofort, wie in hsl(30, 29%, 28%) = #5C4733. Sie wird mit Großbuchstaben und einem Rautenzeichen geschrieben.
In Ihre Arbeit kopieren
Verwenden Sie den Code in Ihrem Stylesheet, Ihrer Token-Datei oder Nachricht. Für die Gegenrichtung ist HEX in HSL umrechnen einen Klick entfernt.
Woher diese Schreibweisen kommen
Hex und RGB sind dasselbe, zweimal geschrieben
Eine Bildschirmfarbe sind drei Zahlen, wie viel rotes, grünes und blaues Licht ausgesendet werden soll, jede von 0 bis 255, also ein Byte. Hex schreibt diese Bytes einfach im Sechzehnersystem. Um die Zahlen zu sehen, rechnen Sie HEX in RGB um.
HSL und CMYK
HSL wurde erfunden, weil keine der beiden für Menschen lesbar ist: Es gibt den Farbton als Winkel um einen Farbkreis an, mit Sättigung und Helligkeit als Prozentwerten, sodass ein Designer etwas heller machen kann, ohne drei Zahlen neu zu berechnen. CMYK gehört zu einer ganz anderen Welt, Druckfarbe statt Licht. Es ist subtraktiv, aus vier Druckplatten aufgebaut, und kann nicht jede Farbe erreichen, die ein Bildschirm zeigen kann, weil ein Bildschirm Licht aussendet, während Papier es nur reflektiert.
Fallen beim Umrechnen von HSL in HEX
Den ursprünglichen Code zurückerwarten
Sind Sie von einem Hex-Code ausgegangen, haben ihn in HSL umgerechnet, nichts angepasst und zurückgerechnet, erhalten Sie womöglich einen anderen Code, ein oder zwei Schritte entfernt. Bei einer einzelnen Farbe ist das unsichtbar. Entscheiden Sie bei einem Designsystem, welche Form der Master ist, und betrachten Sie die andere als abgeleitet.
Sättigung und Helligkeit verwechseln
Die beiden sind leicht versehentlich vertauscht: hsl(30, 28%, 29%) ist nicht hsl(30, 29%, 28%). Die Reihenfolge ist Farbton, Sättigung, Helligkeit. Sieht die Farbe am Bildschirm nicht so aus, wie Sie erwartet haben, prüfen Sie, dass Sie sie nicht umgekehrt haben.
Vergessen, dass Helligkeit nicht Leuchtkraft ist
Zwei Farben mit derselben Helligkeit können in der Leuchtkraft verschieden aussehen. Gelb bei 50% Helligkeit wirkt viel heller als Blau bei 50%. Wählen Sie Farben für Text und Hintergrund, prüfen Sie ihren Kontrast mit einem ordentlichen Werkzeug und nicht durch den Vergleich von Helligkeitszahlen.
Werte außerhalb des Bereichs verwenden
Sättigung und Helligkeit sind auf 0 bis 100 Prozent begrenzt. Werte außerhalb dieses Bereichs werden begrenzt. Eine Helligkeit von 120% ist nicht heller als Weiß; sie ist Weiß.
Fragen, die man vor dem Umrechnen stellt
Was ist hsl(0, 100%, 50%) in Hex?
#FF0000, reines Rot.
Was ist hsl(0, 0%, 100%) in Hex?
#FFFFFF, Weiß.
Kann ich Dezimalzahlen verwenden?
Ja. hsl(30.5, 28.6%, 27.8%) wird akzeptiert. Das Ergebnis wird auf ganze Bytes gerundet.
Ist die Umrechnung exakt?
Sie liefert die exakten Bytes für die Zahlen, die Sie getippt haben, auf ganze Werte gerundet. Der Rückweg kann einen Schritt daneben landen, weil HSL-Zahlen gerundet wurden.
Wird meine Farbe hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit HEX in HSL umrechnen.
Klug wählen, wenn Sie HSL in HEX umrechnen
Entscheiden, welche Form der Master ist
Entwerfen Sie in HSL, behalten Sie die HSL-Werte als Quelle und veröffentlichen Sie Hex als Ausgabe. Gibt Ihnen die Marke Hex vor, behalten Sie das und nutzen HSL nur für Variationen. Beide als gleichwertige Quellen zu mischen, ist, was den Drift erzeugt.
HSL für Variation, Hex zum Festlegen
Brauchen Sie eine Familie von Tönen, arbeiten Sie in HSL. Müssen Sie eine Farbe festlegen, damit sie in jedem Werkzeug identisch ist, schreiben Sie sie als Hex.
Die getippten Zahlen behalten
Halten Sie die HSL-Werte neben dem Hex in Ihrer Palettennotiz fest. Will später jemand eine blassere Fassung, kann er von Ihren Zahlen ausgehen und nicht von einem Code, der bereits gerundet wurde.
Die sechs Sektoren des Farbkreises
Welcher Kanal hoch ist, welcher niedrig
Die Umrechnung teilt den Kreis in sechs Sektoren von 60 Grad, und in jedem hat ein Kanal sein Maximum, einer sein Minimum, und der dritte ändert sich gleichmäßig. Von 0 bis 60 ist Rot am Maximum, Blau am Minimum, und Grün steigt: Rot wird zu Gelb. Von 60 bis 120 ist Grün am Maximum, und Rot fällt: Gelb wird zu Grün. Von 120 bis 180 bleibt Grün hoch, und Blau steigt: Grün wird zu Cyan. Von 180 bis 240 übernimmt Blau, und Grün fällt. Von 240 bis 300 bleibt Blau hoch, und Rot steigt: Blau wird zu Magenta. Von 300 bis 360 übernimmt wieder Rot, und Blau fällt. Wenn Sie HSL in HEX umrechnen, hilft es zu wissen, in welchem Sektor Ihr Farbton liegt, denn es sagt Ihnen, welches der drei Paare in der Antwort am größten sein wird.
Warum die Antwort eine Familienähnlichkeit hat
Farben mit demselben Farbton und derselben Sättigung, aber unterschiedlicher Helligkeit ergeben Hex-Codes, die wie Verwandte aussehen: dasselbe Muster, welches Paar hoch und welches niedrig ist, nur hoch- oder heruntergerechnet. #5C4733, #7A5F44 und #A38461 gehören alle zur selben Familie, mit Rot am größten, dann Grün, dann Blau. Sie können lernen, das auf einen Blick zu lesen, und es macht Fehler leichter erkennbar.
Eine Helligkeitsleiter bauen
Ein Farbton, neun Stufen
Eine sehr praktische Verwendung der Umrechnung ist, eine Leiter einer einzelnen Farbe von sehr blass bis sehr dunkel zu bauen, die Art von Skala, die Designsysteme mit 50, 100, 200 und so weiter bis 900 beschriften. Wählen Sie einen Farbton und eine Sättigung und lassen Sie die Helligkeit Werte wie 96, 90, 80, 70, 60, 50, 40, 30 und 20 Prozent durchlaufen. Rechnen Sie HSL für jede Stufe in HEX um, und Sie haben neun Codes, die zusammengehören. Die Sättigung an den Extremen leicht zu verringern, einige Punkte bei den blassesten und dunkelsten Stufen, wirkt oft natürlicher, als sie konstant zu halten.
Die Stufen benennen
Geben Sie jeder Stufe einen Namen, der ihre Rolle festhält und nicht ihren Wert: Fläche für die blasseste, Rahmen für die nächste, Text für die dunkelste. Im Code sagt ein Name dem nächsten Leser, wofür die Farbe da ist, und Sie können die Zahl dahinter ändern, ohne die Regeln anzufassen, die sie verwenden.
Helle und dunkle Themes
Die Leiter spiegeln
Ein dunkles Theme ist oft das helle Theme mit umgedrehter Leiter: Die blasseste Stufe, die im hellen Theme der Seitenhintergrund ist, wird im dunklen zur dunkelsten. Haben Sie die Leiter in HSL gebaut, kostet das dunkle Theme nichts außer einem zweiten Satz Umrechnungen. Halten Sie den Farbton fest, was den Markencharakter bewahrt, und passen Sie die Sättigung leicht an, da gesättigte Farben auf dunklen Hintergründen schroff wirken.
Beide Themes prüfen
Testen Sie jedes Paar aus Text und Hintergrund beider Themes auf Kontrast. Eine Farbe, die auf Weiß funktioniert, kann auf Fast-Schwarz versagen, und die Prüfung dauert mit einem Kontrastwerkzeug und den soeben erzeugten Hex-Codes eine Minute.
Wenn Sie nur eine grobe Vorstellung von der Farbe haben
Vom Farbkreis ausgehen, dann verfeinern
Manchmal haben Sie gar keinen Hex-Code, nur eine Vorstellung: ein ruhiges Blau, ein warmes Orange, ein frisches Grün. HSL ist ein guter Ausgangspunkt, denn Sie können einen Farbton aus den Orientierungspunkten des Kreises wählen, eine mäßige Sättigung und eine mittlere Helligkeit setzen und dann HSL in HEX umrechnen, um zu sehen, was Sie haben. Sieht es zu laut aus, senken Sie die Sättigung; wirkt es flach, verschieben Sie die Helligkeit. Jeder Versuch kostet Sekunden, und am Ende haben Sie einen Hex-Code, den Sie direkt in ein Stylesheet setzen können.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Für den Rückweg nutzen Sie HEX in HSL umrechnen. Für die Zahlen hinter dem Code gibt es HEX in RGB umrechnen und RGB in HEX umrechnen, und für den Druck HEX in CMYK umrechnen und CMYK in HEX umrechnen. Für die Größen im selben Stylesheet leistet px in rem umrechnen für Längen, was diese Seite für Farben leistet.
Ein durchgerechnetes Beispiel
Angenommen, Sie haben für den Erfolgszustand einer App ein Grün gewählt: hsl(145, 55%, 38%). Sie tippen es und lesen #2C9658 ab. Sie verwenden diesen Code in der Token-Datei als --success. Für den Hintergrund eines Erfolgshinweises nehmen Sie denselben Farbton, hsl(145, 45%, 94%), und lesen #E9F7EF ab. Für den Rahmen hsl(145, 45%, 78%), das sich als #AEE0C3 liest. Drei Codes, ein Farbton, alle in einer Minute abgeleitet, und jeder ein schlichter Hex-Code, den jedes Werkzeug im Team öffnen kann.
Eine kurze Checkliste
Vor dem Umrechnen
Prüfen Sie die Reihenfolge der drei Zahlen: Farbton, Sättigung, Helligkeit. Entscheiden Sie, welche Form Ihr Master ist.
Beim Umrechnen
Tippen Sie die Werte, lesen Sie das Hex ab und kopieren Sie es mit seinem Rautenzeichen.
Nach dem Umrechnen
Sehen Sie sich die Farbe am Bildschirm im Kontext an und halten Sie die HSL-Werte für später neben dem Code fest.
Häufige Fehler
Sättigung und Helligkeit vertauschen
Die Reihenfolge ist Farbton, Sättigung, Helligkeit.
Das alte Hex zurückerwarten
Es kann einen Schritt daneben landen. Behalten Sie das Original, wenn es darauf ankommt.
Helligkeit statt Kontrast vergleichen
Nutzen Sie für Text und Hintergrund ein Kontrastwerkzeug.
Ihre Farben bleiben auf Ihrem Gerät
Die Berechnung findet lokal statt. Ihre Werte werden von Ihrem eigenen Browser verwendet, und nichts wird irgendwohin gesendet. Hinterher gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, HSL in HEX umzurechnen.
Zusammenfassung
Um HSL hier in HEX umzurechnen, tippen Sie den Farbton in Grad und Sättigung und Helligkeit in Prozent und lesen den Hex-Code sofort ab. Die Umrechnung erhält die Farbe, wie das Auge sie ordnet: ein Farbton auf dem Kreis, wie gesättigt sie ist, wie hell. Die beiden Schreibweisen beschreiben dieselben Farben, doch HSL erreicht sie über eine andere Geometrie, und seine drei Zahlen werden auf ganze Grad und ganze Prozent gerundet, sodass eine nach HSL und zurück geführte Farbe ein oder zwei Schritte von ihrem Ausgangspunkt landen kann. Brauchen Sie die exakten Bytes, behalten Sie das Hex. Nichts wird hochgeladen.