Color Converter

HEX RGB HSL conversion

HEX RGB HSL conversion Läuft lokal in Ihrem Browser

#2563eb

HEX

#2563eb

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

About the

Der Farbkonverter übersetzt eine einzelne Farbe zwischen HEX, RGB, HSL und HSV und zeigt das WCAG-Kontrastverhältnis gegenüber Schwarz und Weiß an, sodass Sie sofort erkennen können, ob Text in dieser Farbe lesbar ist. HEX und RGB sind die Formate, die Sie zwischen Werkzeugen kopieren, aber HSL ist das Format, das tatsächlich für Designarbeiten nützlich ist: Es trennt Farbton von Helligkeit, sodass Sie einen Farbton oder eine Schattierung erzeugen können, die den gleichen Farbton beibehält, anstatt in Richtung Grau zu driften, wie es bei naiver RGB-Mathematik der Fall ist. Achtstellige Hexadezimal- und RGBA-Werte enthalten einen Alphakanal, und der Konverter verarbeitet diese ebenfalls.

Where people use the

Einen Marken-Hex-Wert in die RGB-Syntax umwandeln, die ein Design-Tool erwartet.
Mit HSL einen einheitlichen Farbsatz aus einem Markenfarbton erzeugen.
Prüfen, ob eine Linkfarbe auf dunklem Hintergrund lesbar ist.
Zuordnung einer aus einem Screenshot ausgewählten Farbe zum nächstgelegenen Hexadezimalwert.

How to use the

1
Geben Sie die Farbe in einem beliebigen Format ein
Fügen Sie einen Hexadezimalwert wie 2f6fed oder eine RGB- oder HSL-Funktion ein oder verwenden Sie den Picker. Die anderen Formate werden während der Eingabe aktualisiert.
2
Lesen Sie alle Darstellungen auf einmal
Hex, RGB, HSL und HSV werden zusammen angezeigt, wobei der Alphakanal herausgetrennt ist.
3
Überprüfen Sie die Kontrastverhältnisse
Die Verhältnisse zwischen Schwarz und Weiß geben Aufschluss darüber, ob die Farbe als Textfarbe oder Hintergrundfarbe verwendbar ist. Fließtext benötigt 4,5 zu 1, großer Text und Schnittstellenränder benötigen 3 zu 1.
4
Kopieren Sie die Form, die Ihr Code benötigt
Jedes Feld verfügt über eine eigene Schaltfläche zum Kopieren, sodass Sie genau die Syntax erhalten, die Ihr Stylesheet erwartet, und nicht manuell neu formatieren müssen.

Tipps und Best Practices

Passen Sie die Helligkeit in HSL an, anstatt Weiß oder Schwarz in RGB hinzuzufügen. Der Farbton bleibt erhalten.
Testen Sie den Kontrast bei der kleinsten Größe, in der der Text tatsächlich verwendet wird, nicht bei der Überschriftengröße.
Behalten Sie eine dokumentierte Palette von fünf oder sechs Werten bei, anstatt für jede Komponente einen neuen Wert zu erfinden.

Häufig gestellte Fragen

Wie wird eine Hex-Farbe in RGB konvertiert?

Jedes Hexadezimalziffernpaar ist ein Kanal, gelesen als Basis 16. In 2f6fed ist 2f 47 Rot, 6f ist 111 Grün und ed ist 237 Blau. Eine dreistellige Abkürzung wie f0a verdoppelt jede Ziffer, sodass daraus ff00aa wird.

Warum ist HSL-Helligkeit nicht dasselbe wie wahrgenommene Helligkeit?

Denn das Auge reagiert weitaus empfindlicher auf Grün als auf Blau. Reines Blau und reines Gelb können einen gleichen Helligkeitswert haben, während Gelb viel heller erscheint. Aus diesem Grund muss der Kontrast mit einer Luminanzformel gemessen werden und nicht anhand der HSL-Zahl beurteilt werden.

Was bedeutet das vierte Ziffernpaar in einer Hexadezimalfarbe?

Alpha, von 00 vollständig transparent bis ff vollständig undurchsichtig. Achtstellige Hexadezimalzahlen werden in allen aktuellen Browsern unterstützt und sind das Hexadezimaläquivalent von RGBA.

Ist die CMYK-Konvertierung für den Druck korrekt?

Nein, und das kann kein Browser-Tool sein. CMYK hängt von der Tinte, dem Papier und dem Druckerprofil ab. Nutzen Sie diesen Wert als Ausgangspunkt und konvertieren Sie ihn über das ICC-Profil Ihres Drucklieferanten für alles, was wichtig ist.

Wie wähle ich lesbaren Text für einen farbigen Hintergrund aus?

Vergleichen Sie das Kontrastverhältnis zwischen der Textfarbe und dem Hintergrund. Wenn weder Schwarz noch Weiß 4,5 zu 1 erreichen, ist der Hintergrund zu gesättigt für den Fließtext und muss abgedunkelt oder aufgehellt werden, bevor er hinter dem Text verwendet wird.

Warum sieht das gleiche Hex auf zwei Bildschirmen unterschiedlich aus?

Denn Displays unterscheiden sich in Farbumfang, Kalibrierung und Helligkeit. Ein Wide-Gamut-Bildschirm zeigt gesättigte Farben, die ein Standard-sRGB-Panel nicht wiedergeben kann. Arbeiten Sie in sRGB, es sei denn, Sie haben einen bestimmten Grund, dies nicht zu tun.