Farbumrechner: HEX, RGB, HSL, HSV, CMYK
Farben zwischen HEX, RGB, HSL, HSV und CMYK umrechnen, Kontrast prüfen und Paletten erstellen.
CSS
color: #2563eb;color: rgb(37, 99, 235);color: hsl(221, 83%, 53%);
WCAG-Kontrast
Berechnet mit der deckenden Farbe als Textfarbe.
Verhältnis: 5.17:1
- AA Text: Bestanden
- AA großer Text: Bestanden
- AAA Text: Nicht bestanden
- AAA großer Text: Bestanden
Verhältnis: 4.06:1
- AA Text: Nicht bestanden
- AA großer Text: Bestanden
- AAA Text: Nicht bestanden
- AAA großer Text: Nicht bestanden
Palette
Klicken Sie auf ein Farbfeld, um es auszuwählen.
Hellere und dunklere Abstufungen
Komplementärfarbe
Analoge Farben
So verwenden Sie das Tool
Wählen Sie eine Farbe mit der Farbauswahl oder geben Sie sie in ein beliebiges Feld ein: Alle anderen Formate werden sofort aktualisiert. HEX-Codes mit 3, 4, 6 oder 8 Stellen (zum Beispiel #f80 oder #ff880080) werden ebenso akzeptiert wie die Schreibweisen rgb(), rgba(), hsl(), hsla(), hsv() und cmyk(). Mit dem Regler stellen Sie die Deckkraft (Alpha) ein.
Die Schaltfläche neben jedem Feld kopiert dessen Wert, und im CSS-Bereich finden Sie fertige color:-Zeilen.
Kontrast und Barrierefreiheit
Das Tool berechnet das WCAG-Kontrastverhältnis zwischen der gewählten Farbe und Weiß sowie Schwarz. Für normalen Text verlangt Stufe AA mindestens 4,5:1 und AAA 7:1. Großer Text (etwa 24 px oder 19 px fett) benötigt 3:1 bzw. 4,5:1.
Der Kontrast wird ohne Transparenz berechnet, also mit der vollständig deckenden Farbe.
Palette, CMYK und Datenschutz
Die Palette zeigt hellere und dunklere Abstufungen (mit Weiß oder Schwarz gemischt), die Komplementärfarbe (gegenüberliegend im Farbkreis) und benachbarte Farben. Mit einem Klick auf ein Farbfeld machen Sie es zur aktuellen Farbe.
CMYK wird hier mit einer einfachen mathematischen Formel berechnet, gedruckte Ergebnisse können daher abweichen: Exakte Druckfarben hängen vom Drucker und vom Farbprofil ab. Alle Berechnungen laufen in Ihrem Browser, es werden keine Daten versendet.