Farbkonverter

Geben Sie einen Farbwert im HEX-, RGB- oder HSL-Format ein und sehen Sie die sofortige Konvertierung in alle anderen Formate. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser.

Geben Sie HEX (#rrggbb), RGB (rgb(r,g,b)) oder HSL (hsl(h,s%,l%)) ein – oder verwenden Sie den Farbwähler.
Kopiert!

Kontrast gegen einfache Hintergründe

Auf Weiß
Auf Schwarz

Über Farbformate

  • HEX - #rrggbb, das gängigste CSS-Farbformat.
  • RGB - rgb(r, g, b), jeder Kanal 0–255.
  • HSL - hsl(h, s%, l%), Farbton 0–360°, Sättigung und Helligkeit 0–100%.

Angenommen wird alles, was der Browser versteht, auch ein Name wie rebeccapurple, ein achtstelliger Hexwert mit Alpha und die durch Leerzeichen getrennte Form mit Schrägstrich vor dem Alpha, die aktuelles CSS nutzt. Die Kontrastwerte folgen der WCAG-Formel für relative Leuchtdichte, ein Verhältnis von 4.5 ist also die Schwelle für normalen Fließtext auf Stufe AA und 7 die Schwelle auf AAA. Berechnet wird gegen die deckende Farbe, denn eine durchscheinende hat keinen festen Kontrast, solange nicht feststeht, was dahinter liegt.

Verwandte Werkzeuge

CSS-Minifizierer / -Formatierer Bild zu Base64 QR-Code-Generator

Kämpft das Markup gegen Sie?

Escapte Entities, verstümmelte Kodierungen und Inhalte, die im CMS anders aussehen als auf der Seite, heißen meist, dass irgendetwas in der Kette rät. Wir bauen Frontends und den Publishing-Weg dahinter, damit Besucher sehen, was Sie geschrieben haben.

Sprechen Sie mit uns über Ihre Website

Häufig gestellte Fragen

Welche Farbformate kann ich einfügen?
Hex mit drei, vier, sechs oder acht Stellen, rgb und rgba, hsl und hsla, hwb und jeden CSS-Farbnamen. Sowohl die Kommaform als auch die moderne, durch Leerzeichen getrennte Form mit Schrägstrich vor dem Alpha werden angenommen, Sie können also direkt aus einem Stylesheet einfügen.
Wie wird Transparenz behandelt?
Ein Alphakanal übersteht die Umwandlung, ein achtstelliger Hexwert kommt also als rgba zurück und die Vorschau zeigt ein Schachbrett dahinter. Alpha wird nur dann in die Ausgabe geschrieben, wenn es tatsächlich unter voller Deckkraft liegt, sofern Sie es nicht immer verlangen.
Was bedeuten die Kontrastwerte?
Es ist das WCAG-Kontrastverhältnis zwischen dieser Farbe und einem einfachen weißen oder schwarzen Hintergrund. Normaler Fließtext braucht 4.5 für Stufe AA und 7 für AAA, große Schrift hat eine niedrigere Hürde. Unter 3 ist für die meisten Menschen in jeder Größe schwer zu lesen.
Warum wird der Kontrast ohne Alpha berechnet?
Weil eine durchscheinende Farbe keinen festen Kontrast hat. Was ein Leser tatsächlich sieht, hängt davon ab, was dahinter liegt, deshalb rechnen die Werte mit der deckenden Farbe. Ist Ihr Text wirklich durchscheinend, ermitteln Sie erst die gemischte Farbe und prüfen Sie diese.
Was ist der Unterschied zwischen HSL und HWB?
Beide gehen vom selben Farbtonwinkel aus. HSL beschreibt eine Farbe über Sättigung und Helligkeit, das Paar, das die meisten Werkzeuge zeigen. HWB beschreibt sie darüber, wie viel Weiß und wie viel Schwarz beigemischt sind, was dem Mischen von Farbe näher kommt und beim Aufbau einer Tonleiter leichter zu überblicken ist.