Farb-Konverter

So verwenden Sie den Farb-Konverter

1. 1. Geben Sie eine Farbe ein. Fügen Sie sie in einer der Schreibweisen ein oder tippen Sie sie, die das Feld akzeptiert – #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) oder ein CSS-Name wie rebeccapurple. Eine nackte Angabe 51 102 153 wird als RGB gelesen.
2. 2. Oder nutzen Sie die Farbauswahl. Die Farbauswahl setzt die Farbe und behält eine bereits eingegebene Transparenz bei.
3. 3. Kopieren Sie, was Sie brauchen. Jede Schreibweise hat eine eigene Kopierschaltfläche, und CSS kopieren liefert Ihnen die Werte HEX, RGB, HSL und OKLCH als Custom Properties für ein Stylesheet.
4. 4. Prüfen Sie den Namen. Das Werkzeug zeigt das CSS-Schlüsselwort, wenn Ihre Farbe genau eines ist (rebeccapurple ist #663399), und das nächstgelegene Schlüsselwort, wenn nicht.

So funktionieren die Umrechnungen

Alles wird über sRGB umgerechnet, den Farbraum, in dem ein Browser zeichnet. Ein HEX-Code ist einfach RGB im Sechzehnersystem: #336699 ist Rot 0x33 = 51, Grün 0x66 = 102, Blau 0x99 = 153. Die anderen Schreibweisen ordnen dieselben drei Zahlen neu an.

• HSL beschreibt eine Farbe durch Farbton (ein Winkel auf dem Farbkreis, 0–360°), Sättigung und Helligkeit. Mit dem größten Kanal max und dem kleinsten min (jeweils durch 255 geteilt) ist die Helligkeit (max + min) ÷ 2, und die Sättigung ist (max − min) ÷ (1 − |2L − 1|). Der Farbton ergibt sich daraus, welcher Kanal der größte ist.
• HSV (auch HSB genannt) behält denselben Farbton bei, misst aber den Wert als max und die Sättigung als (max − min) ÷ max. Es ist das Modell, das die meisten Farbauswahlen zeichnen.
• HWB beschreibt Weißanteil (min) und Schwarzanteil (1 − max) über einem reinen Farbton; es ist leichter nachzuvollziehen als HSL, wenn Sie eine Tönung oder Schattierung wollen. Ergeben Weiß- und Schwarzanteil zusammen 100 %, ist das Ergebnis ein Grau.
• CMYK wird als einfache Gerätumrechnung angezeigt: K = 1 − max, dann ist jeder der Werte C, M und Y gleich (1 − Kanal − K) ÷ (1 − K). Es fließen keine Farben, kein Papier und kein Profil ein.
• OKLCH beschreibt Helligkeit, Chroma und Farbton im OKLab-Raum von Björn Ottosson, den CSS Color 4 als oklch() unterstützt. Gleiche Schritte in L wirken viel näher an gleichen Helligkeitsstufen als in RGB oder HSL.

Warum CMYK hier keine Druckfarbe ist

Bildschirme addieren Licht in Rot, Grün und Blau; Drucker bringen Cyan-, Magenta-, Gelb- und Schwarztinte auf Papier auf. Die beiden Farbräume unterscheiden sich, und die Farbe auf der Seite hängt vom Papier, der Presse und dem ICC-Profil ab, das sie beschreibt. Eine Formel, die nur von RGB ausgeht, kann davon nichts wissen. Daher ist das CMYK oben eine Schreibweise, keine Vorhersage: Reines Bildschirmblau #0000ff wird zu 100 % Cyan und 100 % Magenta, was als stumpferes Violett gedruckt wird. Für ein Poster oder eine gedruckte Abbildung geben Sie Ihrem Drucker die Vorlage in RGB und fragen nach seinem Profil, oder konvertieren Sie mit diesem Profil in einem Gestaltungsprogramm.

Rundung, Begrenzung und Transparenz

• Rundung. HEX und rgb() enthalten ganze Zahlen von 0 bis 255; eine als hsl(210 50% 41%) eingegebene Farbe wird daher auf den nächsten 8-Bit-Wert gerundet. Rechnen Sie diesen Wert zurück, erhalten Sie ein leicht anderes HSL – das 8-Bit-Raster ist gröber als das von HSL.
• Kanäle außerhalb des Bereichs. Werte außerhalb des Bereichs werden wie in Browsern begrenzt: rgb(300 0 0) ist #ff0000, und ein negativer Kanal wird zu 0.
• Farbtonangaben. deg, grad, rad und turn werden akzeptiert, und der Farbton läuft um: −150° entspricht 210°.
• Alpha. #rrggbbaa, #rgba und / 50% funktionieren alle. Der Alphawert wird im 8-stelligen HEX mit 8 Bit gespeichert: 50 % wird zu 80 und liest sich zurück als 50,2 %.

Häufig gestellte Fragen

Wie wandle ich HEX in RGB um?

Teilen Sie die sechs Ziffern in drei Paare und lesen Sie jedes Paar als Zahl im Sechzehnersystem: #336699 sind 33, 66 und 99, also 51, 102 und 153. Fügen Sie den HEX-Code in das Feld ein, und der RGB-Wert erscheint sofort, zusammen mit HSL, HWB, HSV, CMYK und OKLCH.

Was ist der Unterschied zwischen HSL und HSV?

Beide verwenden denselben Farbtonwinkel. HSL setzt Weiß bei jeder Sättigung auf volle Helligkeit, daher ist die Mitte die reine Farbe; HSV setzt die reine Farbe auf vollen Wert und volle Sättigung, und Weiß auf null Sättigung. HSL ist das, was CSS als hsl() unterstützt, während HSV (oder HSB) das ist, was die meisten Farbauswahlen anzeigen.

Ist der CMYK-Wert für den Druck genau?

Nein. Er ist die einfache Umrechnung aus RGB ohne Farbe, Papier oder ICC-Profil; er beschreibt dieselben Zahlen anders, statt vorherzusagen, was eine Presse druckt. Farben außerhalb des Druckfarbraums, etwa leuchtende Bildschirmblau- und -grüntöne, werden stumpfer gedruckt. Verwenden Sie für alles Wichtige das Profil Ihres Druckers.

Was bedeutet der nächstgelegene CSS-Name?

CSS definiert 148 Farbschlüsselwörter. Ist Ihre Farbe genau eines davon, zeigt das Werkzeug es ohne Einschränkung. Andernfalls zeigt es das Schlüsselwort, das im OKLab-Raum am nächsten liegt – einem Raum, dessen Abstände dem wahrgenommenen Unterschied entsprechen. Das ist nützlich, um eine Farbe in einem Kommentar zu benennen, aber kein Ersatz für den Code.

Warum ändert sich mein HSL-Wert nach einer Hin- und Rückumrechnung leicht?

HEX und RGB speichern jeden Kanal als einen von 256 Werten, und HSL bildet sich nicht eins zu eins auf dieses Raster ab. Eine in HSL eingegebene Farbe wird auf den nächsten RGB-Wert gerundet, und das angezeigte HSL wird aus dem gerundeten Wert berechnet. Ausgehend von einem HEX-Code ist jede Umrechnung bis zur angezeigten Genauigkeit exakt.

Werden meine Farbdaten irgendwohin gesendet?

Nein. Die Umrechnung ist reine Arithmetik in Ihrem Browser; was Sie eingeben, wird weder hochgeladen noch gespeichert.