Skip to content
user@convertitive:~$convertitive

Farbauswahl

Einmal wählen, jedes Format erhalten. Plus live WCAG-Kontrast gegen Weiß und Schwarz.

Das Werkzeug unten zeigt die gewählte Farbe und berechnet ihre Darstellung in drei Formaten: Hex, rgb() und hsl(). Neben jedem Format befindet sich eine Schaltfläche zum sofortigen Kopieren. Darunter wird der live berechnete WCAG-Kontrast gegen reines Weiß und reines Schwarz angezeigt — praktisch zur schnellen Überprüfung von Text- und Hintergrundkombinationen. Für eine ausführliche Erklärung der verschiedenen CSS-Farbformate lohnt sich ein Blick in unsere Dokumentation.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Farbe auswählen

    Klicken Sie auf die Farbvorschau, um den Systemfarbwähler zu öffnen, oder geben Sie einen Hex- oder RGB-Wert direkt ein.

  2. Das benötigte Format kopieren

    Hex für Speicherung und Design-Dateien. rgb() für Code, der Kanäle berechnet. hsl() für Design-Token-Farbton-Rotationen.

  3. Kontrast prüfen

    Die beiden Kontrastbadges zeigen das WCAG-Verhältnis gegen reines Weiß und reines Schwarz. Damit lassen sich Textfarbkombinationen auf Barrierefreiheit überprüfen.

Frequently asked questions

Warum drei Formate?
Jedes Format hat seinen Zweck. Hex ist das universelle Speicherformat, das in jedes Werkzeug übernommen werden kann. rgb() ist das Format, das programmatischer Code erzeugt und verarbeitet. hsl() ermöglicht es Designern, Helligkeit oder Sättigung unabhängig anzupassen — ideal für Design-Token-Varianten wie Hover-Zustände und Theme-Anpassungen.
Was misst die WCAG-Kontrastprüfung?
Das Verhältnis zwischen der relativen Leuchtdichte zweier Farben auf einer Skala von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). WCAG 2.1 AA erfordert 4,5:1 für Fließtext und 3:1 für großen Text und UI-Komponenten. Die Formel ist in WCAG 2.1 §1.4.3 definiert.
Unterstützt die Farbauswahl OKLCH?
Noch nicht — Hex, RGB und HSL decken 95 % der praktischen Anwendungsfälle ab. Für OKLCH und die breitere Diskussion zu wahrnehmungsgleichmäßigen Farbräumen empfehlen wir unseren Leitfaden zu CSS-Farbformaten. OKLCH-Werte können in einem CSS-Präprozessor eingegeben werden; moderne Browser konvertieren intern.
Warum hat Hex manchmal 4 statt 6 Stellen?
Drei- und vierstellige Hex-Werte (z. B. #F60, #F60A) sind Kurzformen, bei denen jede Stelle verdoppelt wird. #F60 entspricht #FF6600. Die vierstellige Form enthält den Alphakanal. Moderner Code verwendet in der Regel die vollständige 6- bzw. 8-stellige Form für mehr Klarheit; beide Formen sind gültiges CSS.
Speichert die Farbauswahl meinen Verlauf?
Nein. Alles läuft im Browser; es werden keine Daten an einen Server gesendet oder seitenübergreifend gespeichert.

Verwandte Werkzeuge