Über diese Farbformate
HEX und RGB sind die Standardformate für Bildschirme und CSS - HEX ist kompakt (#3B82F6), RGB ist explizit bei jedem Kanal (0-255). HSL (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Wert/Helligkeit) beschreiben Farbe eher so, wie Menschen darüber denken - einfacher, um einen Ton oder eine Variante desselben Farbtons auszuwählen. CMYK (Cyan, Magenta, Gelb, Schwarz) ist für den Druck gedacht, wo Farbe durch Mischen von Tinte statt durch Lichtemission entsteht.
Was dieses Tool macht
Der Farbkonverter zeigt eine Farbe gleichzeitig in fünf Schreibweisen: HEX, RGB, HSL, HSV und CMYK. Tippen Sie einen Hex-Code, geben Sie RGB-Werte ein, ziehen Sie die Regler oder wählen Sie eine der 148 benannten CSS-Farben, und alle Formate aktualisieren sich sofort.
Jede Zeile hat eine eigene Kopieren-Schaltfläche und steht in CSS-tauglicher Syntax, etwa rgb(59, 130, 246) oder hsl(217, 91%, 60%). Die Umrechnung läuft vollständig in Ihrem Browser.
Wann Sie es verwenden
- Eine Markenfarbe aus einer Designdatei in HEX in CSS-, Android- oder iOS-Code übernehmen, der RGB oder HSL erwartet.
- Einen helleren oder dunkleren Ton desselben Farbtons erzeugen, indem man in HSL nur die Helligkeit ändert.
- Mit dem Farbkontrast-Prüfer prüfen, ob Text auf einer Farbe lesbar bleibt.
- Eine Farbpalette für ein Designsystem aufbauen und jede Farbe in allen Schreibweisen dokumentieren, die Entwickler brauchen könnten.
Beispiel
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Fragen zu diesem Tool
Warum nähert CMYK Druckfarben nur an?
Bildschirme mischen Licht, Drucker mischen Tinte, und jeder Drucker und jedes Papier verhält sich anders. Die CMYK-Werte sind eine mathematische Umrechnung; fragen Sie Ihre Druckerei nach einem profilbasierten Wert, wenn es auf exakte Farben ankommt.
Was ist der Unterschied zwischen HSL und HSV?
Beide beginnen mit Farbton und Sättigung. HSL nutzt die Helligkeit (Lightness), bei der 100 % immer Weiß ist, HSV den Hellwert (Value), bei dem 100 % die kräftigste Version der Farbe ist. Designwerkzeuge nutzen oft HSV, CSS verwendet HSL.
Wird Transparenz unterstützt?
Deckkraft gehört hier nicht zu den fünf Formaten. In CSS ergänzen Sie sie als vierten Wert, etwa rgb(59 130 246 / 50%), oder als zwei zusätzliche Hex-Ziffern, #3B82F680.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.