In diesem Artikel
Farbformate erklärt
Farben werden im digitalen Design und in der Webentwicklung in mehreren Formaten dargestellt, die für unterschiedliche Kontexte geeignet sind. HEX (#ff5733) ist kompakt und universell fürs Web. RGB (255, 87, 51) ist intuitiv beim Mischen von Farben. HSL (14°, 100 %, 60 %) ist am besten lesbar, um Farbton, Sättigung und Helligkeit anzupassen.
Verschiedene Werkzeuge verwenden verschiedene Farbformate – Design-Software bevorzugt oft HSL, HTML/CSS nutzt HEX und RGB, JavaScript-Farbbibliotheken können verschiedene Formate verwenden und das Druckdesign nutzt CMYK. Eine genaue Umwandlung zwischen ihnen erfordert mathematische Formeln.
So funktioniert die Farbumwandlung
Der Konverter wendet präzise mathematische Transformationen zwischen Farbräumen an.
- HEX-Parsing – dekodiert 3-stellige und 6-stellige Hex-Codes, mit oder ohne Alphakanal
- RGB-Normalisierung – verarbeitet Ganzzahlwerte von 0 bis 255 und Fließkomma-Darstellungen von 0 bis 1
- HSL-Berechnung – wandelt in und aus Farbton (0–360°), Sättigung (0–100 %) und Helligkeit (0–100 %) um
Kostenlos testen – keine Registrierung erforderlich
Farbe umwandeln →Wann eine Farbumwandlung sinnvoll ist
Eine Farbumwandlung ist immer dann nötig, wenn Farben zwischen verschiedenen Werkzeugen, Formaten oder Kontexten wechseln.
- Vom Design zum Code – HSL-Farbwerte aus Figma/Sketch für die CSS-Umsetzung in HEX umwandeln
- Markenkonsistenz – überprüfen, ob Farbwerte über verschiedene Design-Werkzeuge und Code-Umsetzungen hinweg übereinstimmen
- Barrierefreiheit – Kontrastverhältnisse berechnen (die die relative Luminanz aus RGB-Werten verwenden), um WCAG-konform zu sein
Häufig gestellte Fragen
Was ist der Unterschied zwischen RGB und RGBA?
RGBA fügt RGB einen Alphakanal hinzu, der die Deckkraft von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) oder in manchen Kontexten von 0 bis 255 darstellt. Ebenso fügt HEXA zwei Hex-Ziffern für den Alphawert hinzu (z. B. #FF5733FF für vollständig undurchsichtig oder #FF573380 für 50 % Deckkraft). Alphawerte ermöglichen transparente und halbtransparente Farben.
Warum liefert das Hin- und Zurückumwandeln einer Farbe nicht immer exakt denselben Wert?
Die Umwandlung zwischen Farbräumen beinhaltet Fließkommaarithmetik und Rundungen. Hin-und-zurück-Umwandlungen (RGB → HSL → RGB) können in der letzten Stelle kleine Rundungsfehler aufweisen. Das ist normal und der Unterschied ist für das menschliche Auge nicht wahrnehmbar. Für präzisionskritische Arbeiten solltest du Farben stets in einem einzigen kanonischen Format speichern.
Was ist der Unterschied zwischen HSL und HSV/HSB?
HSL (Farbton, Sättigung, Helligkeit / Lightness) und HSV/HSB (Farbton, Sättigung, Value/Brightness) sind unterschiedliche zylindrische Farbmodelle. In HSL ist reines Weiß bei L=100 % unabhängig von der Sättigung; in HSV ist reines Weiß bei S=0 %, V=100 %. HSL ist für Webdesign intuitiver, HSV wird häufig in den Bedienelementen von Farbwählern verwendet.