Farb- und Design-Werkzeuge

Konvertieren Sie Farbformate, erstellen Sie Paletten und Farbverläufe und prüfen Sie den WCAG-Kontrast mit sofortiger Vorschau.

Tools in dieser Kategorie

HEX, RGB und HSL sind unterschiedliche Schreibweisen derselben Farbe, keine unterschiedlichen Farben -- die Umrechnung zwischen ihnen bringt aber Rundung mit sich, und das hat praktische Folgen. Dieser Leitfaden erklärt, was sich beim Umwandeln einer Farbe wirklich ändert und wann welche Darstellung sinnvoll ist.

HEX, RGB und HSL

HEX (#RRGGBB) kodiert die drei Farbkanäle (Rot, Grün, Blau) hexadezimal; RGB drückt dieselben drei Kanäle als Zahlen von 0 bis 255 aus; HSL beschreibt Farbe über Farbton (die Tonlage im Farbkreis, 0-360°), Sättigung und Helligkeit -- ein intuitiveres Format, um eine Farbe in CSS aufzuhellen, abzudunkeln oder zu entsättigen. Es sind drei Darstellungen desselben zugrunde liegenden Farbmodells, keine eigenständigen Farbräume: Die Umrechnung zwischen ihnen ändert nicht, um welche Farbe es sich handelt, nur wie sie geschrieben wird.

Umrechnung, Rundung und Gleichwertigkeit

Unterstützt wird hier HEX mit 3 oder 6 Ziffern (#RGB oder #RRGGBB); ein 8-stelliger HEX-Wert mit Transparenzkanal wird nicht unterstützt. Die Umwandlung von HEX in HSL und zurück in HEX liefert nicht immer exakt denselben Code: Farbton, Sättigung und Helligkeit werden bei der Anzeige auf ganze Zahlen gerundet, und diese Zwischenrundung kann den resultierenden HEX-Wert im Vergleich zum Original verschieben -- das ist kein Fehler, sondern eine Folge der Anzeige gerundeter Werte in einem Zwischenschritt; die Verschiebung ist nicht auf eine Einheit pro Kanal begrenzt, weshalb sich eine Prüfung des Ergebnisses lohnt, statt sie als minimal vorauszusetzen. Bei der Umwandlung von RGB in HEX wird ebenfalls jeder Kanal vor der Umrechnung in Hexadezimal gerundet.

Transparenz

Keines der Konvertierungstools dieser Kategorie unterstützt einen Alpha-Kanal (Transparenz) im ein- oder ausgehenden HEX-Wert: Wer mit Transparenz arbeiten muss, muss den Alpha-Wert separat hinzufügen, wenn das Ergebnis in CSS verwendet wird (etwa mit rgba() oder der 4./8. Ziffer eines 4- oder 8-stelligen HEX-Werts, den dieses Tool nicht erzeugt).

Das richtige Format nach Einsatzzweck wählen

HEX ist kompakt und in Grafikdesign und Code üblich; RGB ist nützlich, wenn die drei numerischen Kanäle einzeln bearbeitet werden müssen; HSL ist am praktischsten, um eine Farbe manuell anzupassen -- Helligkeit erhöhen, um sie aufzuhellen, Sättigung senken, um sie zu entsättigen -- weil sich diese Anpassungen direkt auf einen der drei Werte abbilden, was bei HEX oder RGB nicht gleich direkt möglich ist. Der Farbwähler lässt Sie eine Farbe visuell auswählen und erhalten sofort ihren Wert in allen drei Formaten.

Online-Farbwähler

Kontrast, Paletten und Bearbeitung

Der Kontrast-Checker berechnet das Kontrastverhältnis zwischen zwei Farben nach der WCAG-2.x-Formel für relative Leuchtdichte und vergleicht es mit den Standard-WCAG-Schwellenwerten (AA normaler Text ab 4,5:1, AA großer Text ab 3:1, AAA normaler Text ab 7:1, AAA großer Text ab 4,5:1). Dass sich zwei Farben "unterschiedlich anfühlen", ist nicht dasselbe wie diese Schwellenwerte zu erreichen: Zwei Farben können sich visuell unterscheiden und trotzdem nicht genug Kontrast für Barrierefreiheit bieten -- deshalb berechnet dieses Tool ein numerisches Verhältnis statt sich auf einen visuellen Eindruck zu verlassen. Der Paletten-Generator erzeugt harmonische Farben, indem er den Farbton der Basisfarbe in gleichen Schritten dreht und dabei Sättigung und Helligkeit beibehält -- er erzeugt eine farblich verwandte Palette, prüft aber nicht, ob diese Farben untereinander genug Kontrast für Text und Hintergrund haben: Dafür ist der separate Kontrast-Checker da. Die Generatoren für CSS-Verlauf, Box-Shadow und Border-Radius wandeln keine Farben um: Sie erstellen direkt CSS-Code aus den gewählten Werten (Farben, Winkel, Unschärfe, Radius), mit Live-Vorschau.

Farbkontrast prüfen (WCAG)

Farbpaletten-Generator

CSS-Verlauf-Generator

CSS-Box-Shadow-Generator

Generator für abgerundete Ecken

Datenschutz und Grenzen

Alle 10 Tools dieser Kategorie rechnen in Ihrem Browser: Keine Farbe, Palette oder Kontrastwert wird an einen Server gesendet. Beachten Sie die Rundung bei mehreren aneinandergereihten Umwandlungen (etwa HEX zu HSL und zurück zu HEX) und dass diese Tools bei HEX keinen Alpha-Kanal verarbeiten.

Häufige Fragen

Sind HEX, RGB und HSL unterschiedliche Farben?

Nein. Es sind drei unterschiedliche Schreibweisen derselben Farbe. Die Umrechnung zwischen ihnen ändert nicht die Farbe, nur ihre Darstellung.

Ergibt die Umwandlung von HEX in HSL und zurück in HEX immer denselben Code?

Nicht immer. Farbton, Sättigung und Helligkeit werden bei der Anzeige auf ganze Zahlen gerundet, und diese Rundung kann den resultierenden HEX-Wert im Vergleich zum Original um einen je nach Farbe unterschiedlichen Betrag verschieben, nicht immer begrenzt auf eine Einheit pro Kanal.

Unterstützen diese Tools einen HEX-Wert mit Transparenzkanal (8 Ziffern)?

Nein. Sie unterstützen nur 3- oder 6-stellige HEX-Werte ohne Alpha-Kanal; Transparenz muss separat hinzugefügt werden, wenn das Ergebnis in CSS verwendet wird.

Bedeutet es, dass zwei Farben genug Kontrast für Barrierefreiheit haben, wenn sie unterschiedlich aussehen?

Nicht zwangsläufig. Der Kontrast-Checker berechnet ein numerisches Verhältnis nach der WCAG-Formel und vergleicht es mit konkreten Schwellenwerten; ein wahrnehmbarer visueller Unterschied garantiert nicht, dass diese Schwellenwerte erreicht werden.

Prüft der Paletten-Generator, ob die erzeugten Farben guten Kontrast zueinander haben?

Nein. Er erzeugt harmonische Farben durch Drehen des Farbtons der Basisfarbe, ohne Kontrast oder Lesbarkeit zu bewerten; dafür ist der separate Kontrast-Checker zuständig.

Wandeln die Generatoren für Verlauf, Box-Shadow und Border-Radius Farben um?

Nein. Sie erstellen CSS-Code aus den gewählten Werten (Farben, Winkel, Unschärfe, Radius); sie führen keine Umwandlung zwischen Farbformaten durch.