Farbkonverter

Was ist ein Farbkonverter?

Ein Farbkonverter uebersetzt Farbwerte zwischen verschiedenen Farbmodellen wie HEX, RGB, HSL, HSV und CMYK. Designer und Entwickler arbeiten oft mit mehreren Formaten gleichzeitig.

Jedes Farbmodell repraesentiert Farben anders. RGB mischt Rot, Gruen und Blau fuer Bildschirme. CMYK mischt Cyan, Magenta, Gelb und Schwarz fuer den Druck. HSL beschreibt Farbton, Saettigung und Helligkeit intuitiv.

Farbmodelle erklaert

• HEX — eine 6-stellige Hexadezimaldarstellung von RGB (#FF5733). Am haeufigsten in CSS und Webdesign verwendet.
• RGB — Rot, Gruen, Blau je 0-255. Additives Farbmischen fuer Bildschirme. rgb(255, 87, 51) ist ein lebhaftes Orange.
• HSL — Farbton (0-360 Grad), Saettigung (0-100 %) und Helligkeit (0-100 %). Am intuitivsten fuer die Farbauswahl durch Menschen.
• HSV/HSB — Farbton, Saettigung, Helligkeit. Aehnlich wie HSL, aber in Grafikprogrammen wie Photoshop bevorzugt.
• CMYK — subtraktive Farbmischung fuer den Druck. Werte 0-100 % fuer jeden Kanal.

So verwenden Sie dieses Tool

Geben Sie einen Farbwert in einem beliebigen Format ein — HEX, RGB, HSL, HSV oder CMYK — und alle anderen Werte werden sofort berechnet. Verwenden Sie den Farbwaehler fuer die visuelle Auswahl.

Farben in der Webentwicklung

CSS unterstuetzt HEX, RGB, RGBA, HSL, HSLA und benannte Farben. Moderne Browser unterstuetzen auch die neueren CSS-Farbraeume wie oklch und display-p3 fuer lebhaftere Farben ausserhalb des sRGB-Gamuts.

Rechenbeispiel

Die Hex-Farbe #2563EB zerfällt in Rot = 0x25 = 37, Grün = 0x63 = 99, Blau = 0xEB = 235, also rgb(37, 99, 235). In HSL umgerechnet ergibt das etwa hsl(217, 83%, 53%) — ein gesättigtes Blau. Zum Aufhellen erhöhen Sie den L-Wert; für eine Palette drehen Sie den H-Wert in 30°-Schritten und halten S und L konstant.

Häufige Fehler

Ein häufiger Fehler ist, Hex und RGB als unterschiedliche Farben zu sehen — es sind dieselben Werte in anderer Schreibweise. Man ignoriert auch den Kontrast: hellgrauer Text auf Weiß mag elegant wirken, scheitert aber an den WCAG-Verhältnissen. Zudem entsprechen sich RGB und CMYK nicht eins zu eins, sodass eine leuchtende Bildschirmfarbe matter druckt; prüfen Sie einen Softproof, statt dem Monitor zu vertrauen.

Haeufig gestellte Fragen

Welches Farbformat sollte ich in CSS verwenden?

HSL ist am lesbarsten und einfachsten anzupassen (Helligkeit oder Saettigung aendern). HEX ist am kompaktesten. RGB ist am besten geeignet, wenn Sie mit Design-Tools arbeiten, die RGB-Werte ausgeben.

Warum sieht die gleiche Farbe auf verschiedenen Bildschirmen anders aus?

Monitore haben verschiedene Farbgamuts, Kalibrierungen und Panel-Technologien. Ein #FF0000 (reines Rot) sieht auf einem sRGB-Monitor anders aus als auf einem Display-P3-Bildschirm. Kalibrieren Sie Ihren Monitor fuer Farbgenauigkeit.

Was ist der Unterschied zwischen HEX, RGB und HSL?

Alle drei beschreiben dieselben Bildschirmfarben. HEX und RGB geben Rot-, Grün- und Blauanteile an (in Basis 16 oder 10), während HSL Farbton, Sättigung und Helligkeit nutzt, was zum Anpassen oder Erzeugen von Paletten intuitiver ist.