Zum Inhalt springen

HEX · RGB · HSL · HSV · CMYK

Farbumrechner

Die Farbe #0060fd ist rgb(0, 96, 253), hsl(217, 100%, 50%) und cmyk(100%, 62%, 0%, 1%). Gib eine beliebige CSS-Farbe ein oder nutz die Farbauswahl, um deine eigene umzurechnen.

Die Kacheln aktualisieren sich beim Tippen. Ist der Text keine Farbe, erscheint ein Fehler, und die letzte gültige Farbe bleibt auf dem Bildschirm.

Scanned by NortonTM Safe Web

Auf einen Blick

Preis
Ohne Kosten
Konto
Nicht nötig
Upload
Entfällt – du tippst eine Farbe, nichts wird irgendwohin gesendet
Eingabe
HEX (3, 4, 6 oder 8 Ziffern), rgb(), hsl(), hwb(), 148 CSS-Farbnamen und transparent
Ausgabe
HEX, RGB, HSL, HSV, CMYK und der nächste CSS-Farbname
CMYK
Mathematische Umrechnung, kein Druckprofil

Gängige Farben in jedem Modell

Diese Zeilen wurden vom selben Code erzeugt wie der Umrechner. HSL, HSV und CMYK sind auf ganze Zahlen gerundet.

Eine Farbe in sechs Schreibweisen
EingegebenHEXRGBHSLHSVCMYK
#0060fd#0060fdrgb(0, 96, 253)hsl(217, 100%, 50%)hsv(217, 100%, 99%)cmyk(100%, 62%, 0%, 1%)
red#ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)cmyk(0%, 100%, 100%, 0%)
white#ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)hsv(0, 0%, 100%)cmyk(0%, 0%, 0%, 0%)
black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)hsv(0, 0%, 0%)cmyk(0%, 0%, 0%, 100%)
grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)hsv(0, 0%, 50%)cmyk(0%, 0%, 0%, 50%)
transparent#00000000rgba(0, 0, 0, 0)hsla(0, 0%, 0%, 0)hsv(0, 0%, 0%)cmyk(0%, 0%, 0%, 100%)

So rechnest du eine Farbe um

1

Farbe eingeben

Gib einen HEX-Code mit 3, 4, 6 oder 8 Ziffern ein, einen rgb()-, hsl()- oder hwb()-Wert oder einen der 148 CSS-Farbnamen. Du kannst auch auf das Farbfeld klicken und die Farbe mit der Farbauswahl deines Browsers wählen.

2

Die anderen Modelle ablesen

Das Farbfeld zeigt die Farbe über einem Schachbrettmuster, sodass Transparenz sichtbar ist. Die Kacheln zeigen dieselbe Farbe als HEX, RGB, HSL, HSV und CMYK sowie den nächsten CSS-Farbnamen.

3

Kopieren, was du brauchst

Drück bei einer Kachel auf Kopieren, um den Wert in die Zwischenablage zu legen, bereit zum Einfügen in ein Stylesheet, ein Design-Tool oder ein Dokument.

Wie die Farbmodelle zusammenhängen

RGB beschreibt eine Farbe als die Mengen an rotem, grünem und blauem Licht, die ein Bildschirm addiert, jeweils von 0 bis 255; #0060fd ist 0 Rot, 96 Grün und 253 Blau. HEX sind dieselben drei Zahlen zur Basis 16 geschrieben, also wird aus 96 die 60 und aus 253 fd. HSL und HSV beschreiben dieselbe Farbe als Farbtonwinkel von 0 bis 360 Grad auf dem Farbkreis plus zwei Prozentwerte: Sättigung und Helligkeit (HSL) bzw. Hellwert (HSV). #0060fd hat in beiden den Farbton 217. CMYK beschreibt Druckfarbe: Cyan, Magenta, Gelb und Schwarz werden vom weißen Papier abgezogen.

Das hier gezeigte CMYK ist die einfache mathematische Umrechnung: Schwarz ist 1 minus das Größte von R, G und B, und Cyan, Magenta und Gelb sind der Rest. Es ist kein Druckprofil, ein Drucker oder ein Designprogramm mit ICC-Profilen liefert für dieselbe Farbe also andere CMYK-Zahlen. HSL-Werte werden als ganze Zahlen angezeigt, daher kann das Zurückrechnen eines gerundeten Werts einen Kanal um ein paar Einheiten verschieben: hsl(217, 100%, 50%) ist #0062ff, nicht #0060fd. Der nächste CSS-Name ist das Schlüsselwort mit dem kleinsten CIE76-Farbabstand im L*a*b*-Raum. Alles läuft in deinem Browser, und nichts wird irgendwohin gesendet.

Fragen zum Farbumrechner

Wie rechne ich HEX in RGB um?

Teile die sechs Ziffern in drei Paare und lies jedes Paar als Zahl zur Basis 16. #0060fd ist 00, 60 und fd, also 0, 96 und 253, die Farbe ist somit rgb(0, 96, 253). Füg den HEX-Code in das Feld ein, und die RGB-Kachel zeigt das Ergebnis.

Was bedeuten die letzten beiden Ziffern eines 8-stelligen HEX-Codes?

Sie sind der Alphakanal, die Deckkraft, von 00 (völlig transparent) bis ff (völlig deckend). #0060fd80 ist dasselbe Blau bei 128 von 255, etwa 50.2% Deckkraft, und wird daher als rgba(0, 96, 253, 0.502) angezeigt. Ein 4-stelliger Code wie #06f8 funktioniert genauso, wobei jede Ziffer verdoppelt wird.

Was ist der Unterschied zwischen HSL und HSV?

Beide nutzen Farbton und Sättigung, aber der dritte Wert unterscheidet sich. In HSL ist eine Helligkeit von 50% die reine Farbe, 0% ist Schwarz und 100% Weiß. In HSV ist ein Hellwert von 100% die hellste Version der Farbe, und Weiß braucht eine Sättigung von 0%. Dasselbe Blau ist hsl(217, 100%, 50%) und hsv(217, 100%, 99%).

Kann ich das CMYK-Ergebnis für den Druck verwenden?

Nutz es nur als Ausgangspunkt. Diese Seite verwendet die einfache Formel zwischen RGB und CMYK, die nichts von Druckfarben, Papier oder dem Profil eines Druckers weiß. Eine Druckerei oder ein Designprogramm mit Farbprofil rechnet dieselbe RGB-Farbe in andere CMYK-Zahlen um.

Welche Farbformate kann ich eingeben?

HEX mit oder ohne #, mit 3, 4, 6 oder 8 Ziffern; rgb() und rgba() mit Kommas oder Leerzeichen, Zahlen oder Prozentwerten und optionalem Alpha nach einem Schrägstrich; hsl(), hsla() und hwb() mit einem Winkel in deg, rad, grad oder turn; die 148 CSS-Farbnamen wie rebeccapurple; und transparent.

Warum passt der nächste Farbname nicht genau?

CSS kennt nur 148 Farbnamen, die meisten Farben haben also keinen eigenen Namen. Die Seite wählt den Namen, dessen Farbe am ähnlichsten aussieht, gemessen als CIE76-Farbabstand im L*a*b*-Raum; für #0060fd ist das mediumslateblue. Ist die Farbe genau eine benannte, etwa #ff0000, sagt die Seite, dass sie genau übereinstimmt.