Rechne Farbwerte zwischen HEX, RGB, HSL und CMYK um und prüfe barrierefreie Kontrastverhältnisse nach WCAG 2.1.
Prüfung nach den internationalen Barrierefreiheits-Richtlinien WCAG 2.1.
Rechne Farbwerte zwischen HEX, RGB, HSL und CMYK um und prüfe barrierefreie Kontrastverhältnisse nach WCAG 2.1. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Dieses Tool rechnet Farben in Echtzeit zwischen HEX, RGB, HSL und CMYK um. Wähle eine Farbe mit dem Farbwähler oder tippe in ein beliebiges Feld – die anderen drei aktualisieren sich sofort, jedes mit eigenem Kopier-Button. So wird das Bernstein-Orange #F59E0B zu rgb(245, 158, 11), hsl(38, 92%, 50%) und cmyk(0%, 36%, 96%, 4%). Das HEX-Feld akzeptiert auch die dreistellige Kurzform wie #F90, die zu #FF9900 erweitert wird.
Jedes Format hat seinen Zweck. HEX ist der Standard in Webcode und Designprogrammen; RGB entspricht dem roten, grünen und blauen Licht des Bildschirms; HSL beschreibt Farbton, Sättigung und Helligkeit – für eine hellere oder dunklere Variante derselben Farbe änderst du nur L, was in CSS sehr praktisch ist; CMYK steht für die vier Druckfarben. Gib RGB, HSL oder CMYK als kommagetrennte ganze Zahlen ein, etwa rgb(255, 153, 0), hsl(36, 100%, 50%) oder cmyk(0%, 40%, 100%, 0%). Transparenz (Alpha) wird nicht unterstützt.
Beachte, dass CMYK hier mit einer einfachen Formel aus RGB berechnet wird, ohne ICC-Farbprofil. Die tatsächliche Druckfarbe hängt von Papier, Farbe und Druckmaschine ab; verlass dich vor dem Druck auf die Farbmuster oder das Profil deiner Druckerei. HSL-Werte werden auf ganze Zahlen gerundet, deshalb kann die Rückrechnung von HSL in HEX einen Kanal gelegentlich um eine Stufe verschieben – das ist normales Runden, kein Fehler.
Im Tab Kontrastprüfer wählst du Text- und Hintergrundfarbe. Das Tool berechnet das Kontrastverhältnis nach WCAG 2.1 und zeigt, ob es für normalen Text (AA 4.5:1, AAA 7:1), großen Text (AA 3:1, AAA 4.5:1) und UI-Komponenten (3:1) reicht, dazu eine Live-Vorschau. Beispiel: Grau #767676 auf Weiß ergibt 4.54:1 und besteht AA knapp, #777777 kommt nur auf 4.47:1 und fällt durch. Für eine ausführlichere Analyse mit Farbvorschlägen nutze den Farbkontrast-Analyzer auf dieser Website.
Je zwei der sechs Hex-Ziffern stehen für einen Kanal im 16er-System. Bei #F59E0B sind F5 = 245 (Rot), 9E = 158 (Grün) und 0B = 11 (Blau), also rgb(245, 158, 11). Füge den HEX-Code ins Tool ein, und RGB, HSL sowie CMYK werden automatisch berechnet.
Bildschirme erzeugen RGB-Licht, Drucker nutzen CMYK-Farben, die Licht absorbieren; beide decken unterschiedliche Farbräume ab, und leuchtende Blau-, Grün- und Orangetöne lassen sich oft nicht exakt drucken. Die CMYK-Werte hier sind eine rein mathematische Umrechnung ohne Papier- und Farbeigenschaften – lass dir einen Andruck mit den Einstellungen deiner Druckerei machen.
WCAG definiert großen Text als mindestens 18 pt (etwa 24 px) in normaler Stärke oder mindestens 14 pt (etwa 18,66 px) fett. Großer Text braucht 3:1 für AA, Fließtext 4.5:1. UI-Komponenten wie Button-Rahmen, Eingabefeld-Umrisse und Icons benötigen mindestens 3:1 zu angrenzenden Farben.
Derzeit nicht. Das Tool verarbeitet rgb(r, g, b), hsl(h, s%, l%) und cmyk(c%, m%, y%, k%) ohne Alpha sowie HEX mit 3 oder 6 Stellen. Um eine halbtransparente Farbe zu prüfen, ermittle zuerst die deckende Farbe, die auf dem Hintergrund entsteht, und teste diese.
Kategorie ansehen: Design & Farben
Gestalte Box-Shadows und moderne Milchglas-Effekte mit sofortigem Kopieren des generierten CSS-Codes.
Prüfe Kontrastverhältnisse zwischen Text und Hintergrund mit AA/AAA-Bewertung und Farbfehlsichtigkeits-Filter.
Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas.
Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path().
