HEX in HSL umrechnen Hexadecimal ↔ Hue Saturation Lightness Kostenlos Online Sicher
Geben Sie einen Wert in HEX ein und lesen Sie ihn sofort in HSL 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 HEX in HSL umrechnet
Ein Hex-Code wie #5A4632 ist ein gutes Mittel, eine Farbe zu speichern, und ein schlechtes, über eine nachzudenken. Nichts in den Ziffern sagt Ihnen, dass die Farbe ein Braun ist, wie hell sie ist oder wie eine etwas blassere Fassung aussähe. HSL wurde erfunden, um das zu beheben. Es beschreibt eine Farbe so, wie Menschen über sie zu sprechen pflegen: welcher Farbton sie ist, wie lebhaft sie ist und wie hell sie ist. HEX in HSL umzurechnen heißt, eine Farbe aus der Form, die Ihnen ein Designwerkzeug in die Hand gibt, in die Form zu übersetzen, mit der Sie denken können: hsl(30, 29%, 28%) ist ein dunkles, gedämpftes Orangebraun, und Sie sehen sofort, dass eine Erhöhung der letzten Zahl es blasser macht.
Das ist der eigentliche Grund, warum Designer und Frontend-Entwickler die Umrechnung nutzen. Sie haben eine Markenfarbe in Hex und brauchen eine Familie verwandter Farben: eine hellere für einen Hover-Zustand, eine dunklere für eine gedrückte Schaltfläche, eine sehr blasse für eine Hintergrundtönung, eine entsättigte für ein deaktiviertes Bedienelement. In Hex ist jede davon eine neue Suche nach drei Ziffernpaaren. In HSL ist jede die Änderung einer einzigen Zahl. Die Farbe ist dieselbe Farbe, durch eine nützlichere Linse gesehen.
Diese Seite rechnet in Ihrem Browser um, und nichts wird hochgeladen. Weiter unten finden Sie, wie die drei Zahlen von HSL aus den Hex-Ziffern berechnet werden, was die Umrechnung erhält und wo sie rundet, was Farbton, Sättigung und Helligkeit in der Praxis bedeuten, wie Designer HSL nutzen, um Paletten und Zustände zu bauen, und die Fallen, in die Menschen tappen, die zum ersten Mal HEX in HSL umrechnen.
Was HSL beschreibt
Farbton: die Position auf dem Farbkreis
Der Farbton ist ein Winkel von 0 bis 360 Grad um einen Farbkreis. Rot sitzt bei 0, Gelb bei 60, Grün bei 120, Cyan bei 180, Blau bei 240 und Magenta bei 300; bei 360 sind Sie wieder bei Rot. Ein Farbton von 30 liegt zwischen Rot und Gelb, also bei Orange. Die Zahl sagt, in welcher Farbfamilie Sie sind, und nichts darüber, wie hell oder blass sie ist.
Sättigung: wie lebhaft
Die Sättigung ist ein Prozentwert. Bei 100% ist die Farbe so rein, wie der Farbton es erlaubt; bei 0% hat sie alle Farbe verloren und ist ein Grau. Eine Sättigung von 29%, wie bei unserem Beispielbraun, ist eine gedämpfte, erdige Farbe. Die Sättigung zu senken ist der schnellste Weg, eine laute Farbe ruhiger zu machen, ohne ihren Charakter zu ändern.
Helligkeit: wie blass oder dunkel
Auch die Helligkeit ist ein Prozentwert. Bei 0% ist die Farbe Schwarz, gleich welcher Farbton und welche Sättigung; bei 100% ist sie Weiß; bei 50% ist sie die volle, normale Farbe. Unser Braun mit 28% liegt auf der dunklen Seite. Die Zahl zu erhöhen ergibt eine blassere Fassung derselben Farbe und sie zu senken eine dunklere, genau die Änderung, die Designer am häufigsten wollen.
Warum es leichter ist als Hex
In Hex heißt eine Farbe blasser zu machen, alle drei Paare um unterschiedliche Beträge zu erhöhen, damit der Farbton nicht abdriftet, was nach Augenmaß nahezu unmöglich ist. In HSL heißt es, eine einzige Zahl zu ändern und die beiden anderen in Ruhe zu lassen.
Wie die Umrechnung funktioniert
Von drei Bytes zu einem Winkel und zwei Prozentwerten
Der Umrechner liest zuerst die Hex-Ziffern als Rot-, Grün- und Blauwert, jeweils von 0 bis 255, und skaliert sie auf Werte zwischen 0 und 1. Er findet den größten und den kleinsten der drei. Die Helligkeit ist der Mittelwert der beiden. Die Sättigung hängt davon ab, wie weit sie auseinanderliegen, im Verhältnis zur Helligkeit. Der Farbton hängt davon ab, welcher Kanal der größte ist und wie sich die anderen beiden verhalten. Sind alle drei gleich, ist die Farbe ein Grau, die Sättigung null, und der Farbton hat keine Bedeutung; der Umrechner zeigt dafür dann 0.
Das Beispiel
Für #5A4632 sind die Bytes 90, 70 und 50. Rot ist mit 0,353 am größten, Blau mit 0,196 am kleinsten. Die Helligkeit ist die Hälfte ihrer Summe, 0,275, etwa 28%. Die Spanne beträgt 0,157, also ist die Sättigung 0,157 geteilt durch die Summe 0,549, etwa 29%. Rot ist der größte Kanal und Grün liegt dazwischen, was den Farbton bei 30 Grad ansetzt. Das Ergebnis ist hsl(30, 29%, 28%).
Ganze Zahlen
Die drei Zahlen werden beim Aufschreiben auf ganze Grad und ganze Prozent gerundet. Das ist die Form, die Menschen verwenden und die CSS im Alltag erwartet, doch es bedeutet, dass an der letzten Stelle Information verloren geht, wie der nächste Abschnitt erklärt.
Was die Umrechnung erhält und was nicht
Sie erhält die Farbe, wie das Auge sie ordnet
Das Ergebnis ist die Farbe, wie das Auge sie ordnet: ein Farbton auf dem Kreis, wie gesättigt sie ist, wie hell. Darum lohnt sich HSL. Sie können eine Farbe blasser oder einen Ton dunkler machen, indem Sie eine Zahl ändern, was in Hex nahezu unmöglich ist.
Sie kann nicht dieselben Bytes zurückversprechen
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. Brauchen Sie die exakten Bytes zurück, behalten Sie das Hex. Rechnen Sie HEX in HSL um, um mit einer Farbe zu arbeiten, und behalten Sie das Hex als Master.
Grautöne haben keinen Farbton
Sind die drei Bytes gleich, gibt es über den Farbton nichts zu sagen. Der Umrechner liefert einen Farbton von 0 und eine Sättigung von 0%, und die Helligkeit allein beschreibt das Grau. Deuten Sie in die 0 nichts hinein.
HSL in der Praxis nutzen
Eine Familie von Tönen aufbauen
Nehmen Sie die Grundfarbe hsl(30, 29%, 28%). Ein hellerer Ton für Hover ist hsl(30, 29%, 34%). Eine sehr blasse Tönung für einen Hintergrund ist hsl(30, 29%, 94%). Ein dunklerer Ton für gedrückte Zustände ist hsl(30, 29%, 22%). Farbton und Sättigung bleiben stehen, die Farben gehören also offensichtlich zusammen. Dasselbe in Hex zu tun, bräuchte mehrere Versuche und sähe immer noch leicht daneben aus.
Theming und Dunkelmodus
Ein Theme braucht oft dieselbe Palette in einer hellen und einer dunklen Fassung. Mit HSL behalten Sie den Farbton und passen Helligkeit und Sättigung an: Hintergründe aufhellen und Text abdunkeln für das helle Theme, und umgekehrt für das dunkle. Den Farbton als benutzerdefinierte Eigenschaft zu definieren und nur die Helligkeit zu variieren, ist ein verbreiteter und ordentlicher Weg.
Paletten erzeugen
Um Farben zu finden, die zu einer Grundfarbe passen, drehen Sie den Farbton. Dreißig Grad zu beiden Seiten ergeben analoge Farben, 180 ergibt die Komplementärfarbe, und 120 oder 240 ergeben ein Dreieck. Halten Sie Sättigung und Helligkeit fest, ändern Sie den Farbton, und die Farben haben eine einheitliche Anmutung. Es ist ein schneller Weg, eine Palette zu beginnen, die nicht zufällig aussieht.
Barrierefreier Kontrast
Die Helligkeit ist der Hauptregler für den Kontrast. Ist Text auf einem farbigen Hintergrund schwer lesbar, besteht die Lösung meist darin, den Helligkeitsunterschied zwischen beiden zu vergrößern, und HSL macht daraus die Anpassung einer Zahl auf jeder Seite.
So rechnen Sie HEX hier in HSL um
Den Hex-Code eintippen oder einfügen
Geben Sie die Farbe im ersten Feld ein, mit oder ohne Rautenzeichen. Drei- und sechsstellige Formen werden akzeptiert, und auch die achtstellige Form mit Transparenz wird gelesen.
Den HSL-Wert ablesen
Die Antwort erscheint sofort, wie in #5A4632 = hsl(30, 29%, 28%). Die drei Zahlen sind der Farbton in Grad sowie Sättigung und Helligkeit in Prozent.
In Ihr Stylesheet kopieren
Verwenden Sie das Ergebnis, wie es ist, in einer Regel wie color: hsl(30, 29%, 28%). Um die Farbe anzupassen, ändern Sie die letzte Zahl. Das Werkzeug für die Gegenrichtung ist HSL in HEX umrechnen.
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 HEX in HSL
Einen perfekten Hin-und-zurück-Weg erwarten
Wegen der Rundung kann das Zurückrechnen einen Code ergeben, der ein oder zwei Schritte vom Original entfernt ist. Bei einer einzelnen Farbe ist das unsichtbar. Bei einem Designsystem, in dem viele Farben hin und her umgerechnet werden, kann es sich aufsummieren. Behalten Sie das Hex als Quelle.
Annehmen, gleiche Helligkeit bedeute gleiche Leuchtkraft
Zwei Farben mit derselben HSL-Helligkeit können in der Leuchtkraft ganz verschieden aussehen: Ein Gelb bei 50% wirkt weit heller als ein Blau bei 50%. Die HSL-Helligkeit ist eine bequeme Zahl, kein Maß für wahrgenommene Helligkeit. Für Kontrastprüfungen nutzen Sie ein ordentliches Kontrastwerkzeug.
Die Prozentzeichen vergessen
In CSS tragen Sättigung und Helligkeit in hsl() Prozentzeichen, und der Farbton ist eine schlichte Zahl oder eine Zahl mit deg. Die Zeichen wegzulassen ist ein klassischer Fehler.
Zu viel in ein Grau hineinlesen
Ein Grau hat keinen Farbton. Zeigt der Umrechner dafür 0, heißt das nicht, dass es rötlich ist.
Fragen, die man vor dem Umrechnen stellt
Was ist #FF0000 in HSL?
hsl(0, 100%, 50%), reines Rot.
Was ist #FFFFFF in HSL?
hsl(0, 0%, 100%), Weiß. Der Farbton ist für Weiß bedeutungslos, und der Umrechner zeigt 0.
Wird HSL überall unterstützt?
Alle aktuellen Browser verstehen hsl() und hsla(). Es ist seit vielen Jahren in CSS.
Ist die Umrechnung exakt?
Sie ist exakt in dem Sinn, dass sie dieselbe Farbe beschreibt, doch die Zahlen werden auf ganze Grad und Prozent gerundet, sodass der Rückweg einen Schritt daneben landen kann.
Wird meine Farbe hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit HSL in HEX umrechnen.
Klug wählen, wenn Sie HEX in HSL umrechnen
HSL zum Arbeiten, Hex zum Speichern
Halten Sie die Masterpalette in Hex, wo sie eindeutig ist, und nutzen Sie HSL, wenn Sie Variationen erzeugen wollen. Hin-und-zurück-Wege verlieren etwas; der Master nicht.
Neuere Farbräume erwägen
CSS bietet inzwischen oklch() und ähnliche Schreibweisen, in denen gleiche Helligkeit wirklich gleich aussieht. Sie lohnen sich zum Lernen für neue Designsysteme. HSL bleibt die Schreibweise, die fast jeder versteht und jedes Werkzeug unterstützt.
Benutzerdefinierte Eigenschaften verwenden
Definieren Sie --hue, --sat und --light und bauen Sie Farben daraus: hsl(var(--hue) var(--sat) var(--light)). Ein Theme ändert sich dann durch das Bearbeiten weniger Zahlen.
HSL mit Zuversicht lesen und schreiben
Einige Orientierungspunkte zum Merken
Einige Zahlen machen HSL leichter lesbar. Farbtöne bei Vielfachen von 60 sind die reinen Farben: 0 Rot, 60 Gelb, 120 Grün, 180 Cyan, 240 Blau, 300 Magenta. Eine Helligkeit von 50 bei einer Sättigung von 100 ergibt die reinste Fassung jedes Farbtons, und eine Helligkeit von 95 oder mehr ist eine so blasse Tönung, dass sie als Hintergrund taugt. Wenn Sie HEX in HSL umrechnen und einen Farbton nahe einem dieser Orientierungspunkte sehen, können Sie die Farbfamilie auf einen Blick benennen.
Zwischen Familien wechseln
180 zu einem Farbton zu addieren ergibt die gegenüberliegende Farbe auf dem Kreis, die Komplementärfarbe und meist den stärksten Kontrast. 30 zu addieren oder zu subtrahieren ergibt einen Nachbarn, der bequem neben dem Original sitzt. Designer nutzen diese Schritte, um Akzente zu wählen, die zu einer Markenfarbe passen, ohne zu raten.
Die umgerechneten Werte festhalten
Wenn Sie für eine Palette HEX in HSL umrechnen, schreiben Sie die Ergebnisse in eine Tabelle, mit dem ursprünglichen Hex daneben. Die Tabelle zeigt, wie die Farben zueinander stehen, und weicht ein Farbton oder eine Helligkeit von den anderen ab, ist die Auffälligkeit sofort sichtbar. Sie gibt Ihrem Team zudem eine gemeinsame Referenz.
Auf echten Bildschirmen testen
Farben, die auf einem kalibrierten Monitor ausgewogen aussehen, können auf einem Handy in der Sonne oder einem billigen Laptop anders aussehen. Prüfen Sie die fertige Palette auf mindestens zwei Geräten und passen Sie die Helligkeit etwas an, wenn die blassen Tönungen auf einem davon verschwinden.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Für den Rückweg nutzen Sie HSL in HEX 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 leisten px in rem umrechnen und px in em umrechnen für Längen, was diese Seite für Farben leistet.
Ein durchgerechnetes Beispiel
Angenommen, Ihre Markenfarbe ist #1E7A5C. Sie rechnen HEX in HSL um und lesen hsl(160, 61%, 30%) ab. Für einen Hover-Zustand schreiben Sie hsl(160, 61%, 36%), etwas heller. Für einen gedrückten Zustand hsl(160, 61%, 24%). Für einen sehr blassen Hintergrund hinter einem Hinweis hsl(160, 40%, 95%). Für eine deaktivierte Schaltfläche hsl(160, 12%, 60%), derselbe Farbton mit dem Großteil der Farbe herausgenommen. Fünf Farben, ein Farbton, in einer Minute geschrieben, und alle sehen aus, als gehörten sie zusammen. Ändert sich die Markenfarbe, ändern Sie die Farbtonzahl einmal.
Eine kurze Checkliste
Vor dem Umrechnen
Entscheiden Sie, was Sie mit der Farbe tun wollen: sie variieren, sie in ein Theme setzen oder sie nur ablesen.
Beim Umrechnen
Fügen Sie das Hex ein, lesen Sie den HSL-Wert ab und notieren Sie die drei Zahlen.
Nach dem Umrechnen
Erzeugen Sie die Variationen, indem Sie jeweils eine Zahl ändern, und sehen Sie sie sich auf dem echten Hintergrund an.
Häufige Fehler
Die gerundeten Zahlen für exakt halten
Es sind ganze Zahlen. Behalten Sie das Hex als Master.
Helligkeit mit Leuchtkraft gleichsetzen
Zwei Farben bei gleicher Helligkeit können sich stark darin unterscheiden, wie hell sie aussehen.
Die Prozentzeichen weglassen
Sättigung und Helligkeit brauchen sie in CSS.
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, HEX in HSL umzurechnen.
Zusammenfassung
Um HEX hier in HSL umzurechnen, tippen oder fügen Sie den Hex-Code ein und lesen den HSL-Wert 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. Darum lohnt sich HSL, denn Sie können eine Farbe blasser oder einen Ton dunkler machen, indem Sie eine Zahl ändern, was in Hex nahezu unmöglich ist. Beide 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 zurück, behalten Sie das Hex. Nichts wird hochgeladen.