Prüfen Sie jedes Vorder- und Hintergrundpaar nach WCAG 2.1. Sie erhalten das Kontrastverhältnis, Bestanden/Nicht bestanden für AA und AAA in beiden Textgrößen sowie einen Korrekturvorschlag.
Konvertieren Sie jede Farbe gleichzeitig zwischen HEX, RGB, HSL, CMYK, LAB, OKLCH, HWB, HSB, LCH, XYZ und LUV. Alle Formate stehen nebeneinander und lassen sich per Klick kopieren.
Erstellen Sie eine Palette aus jeder Grundfarbe mit sechs Harmonieregeln: komplementär, analog, triadisch, tetradisch, geteilt-komplementär und monochromatisch. Als CSS, Tailwind oder JSON kopieren.
Sehen Sie jede Farbe oder Palette so, wie sie bei acht Arten von Farbsehschwäche erscheint, darunter Protanopie, Deuteranopie und Tritanopie, und erkennen Sie ununterscheidbare Paare.
Holen Sie die dominanten Farben aus jedem Foto, Screenshot oder Artwork. Bild hochladen oder einfügen und eine fertige Palette mit HEX-, RGB- und HSL-Werten erhalten. Nichts wird an einen Server gesendet.
Fügen Sie einen HEX-, RGB- oder HSL-Wert ein und finden Sie die nächstgelegene Tailwind-CSS-Klasse in der gesamten v4-Palette, mit exaktem Abstand und benachbarten Abstufungen zum Vergleich.
Fügen Sie einen beliebigen CSS-Farbwert ein — benannt, HEX, rgb(), hsl(), oklch(), color-mix() — und erhalten Sie alle anderen CSS-Formate zurück, mit erhaltenem Alpha und moderner wie klassischer Syntax.
Wählen Sie eine beliebige Farbe und erhalten Sie sofort ihren Wert in HEX, RGB, HSL, CMYK und sieben weiteren Formaten. Zum Kopieren anklicken.
Erstellen Sie CSS-Verläufe in einem interaktiven Editor. Bauen Sie lineare, radiale und konische Verläufe mit eigenen Farbstopps und Winkeln.
Erzeugen Sie dunklere und hellere Varianten jeder Farbe. Alle Abstufungen kommen mit kopierfertigen HEX-Codes.
Erzeugen Sie zufällige Farben, optional eingeschränkt auf pastellig, kräftig, warm oder kühl. HEX-, RGB- und HSL-Werte erscheinen sofort.
Mischen Sie zwei oder mehr Farben mit einstellbaren Verhältnissen. Sehen Sie das Mischergebnis in HEX, RGB, HSL und mehr.
Geben Sie eine HEX- oder RGB-Farbe ein und finden Sie die nächstgelegene benannte Farbe aus einer Datenbank von über 500 Farbnamen.
Prüfen Sie die WCAG-Kontrastverhältnisse jedes Farbpaars Ihrer Palette und finden Sie heraus, welche Kombinationen AA und AAA erfüllen.
Geben Sie eine Hintergrundfarbe ein und erhalten Sie die Textfarben, die die WCAG-Anforderungen an Barrierefreiheit erfüllen.
Erzeugen Sie aus einer einzigen Markenfarbe eine vollständige Tailwind-CSS-Palette (50–950) mit wahrnehmungsbezogen gleichmäßigen Abstufungen.
Erzeugen Sie gleichmäßig abgestufte Farbskalen zwischen zwei Farben und vergleichen Sie die Interpolation in sRGB, HSL und LAB.
Wandeln Sie Ihre Farbpalette in Design-Tokens um. Export als CSS-Custom-Properties, SCSS-Variablen, Tailwind-Konfiguration oder JSON-Tokens.
Extrahieren Sie CSS-Verläufe aus Bildern. Laden Sie ein Bild hoch und erhalten Sie den nächstgelegenen linearen oder radialen CSS-Verlauf mit Farbstopps.
Erstellen Sie CSS-Boxschatten in einem interaktiven Editor. Passen Sie Versatz, Weichzeichnung, Ausbreitung und Farbe an und stapeln Sie mehrere Schatten.
Erstellen Sie CSS-Textschatten mit Vorschau. Passen Sie Versatz, Weichzeichnung und Farbe an, um Ihrer Typografie Tiefe zu geben.
Erstellen Sie CSS-border-radius-Werte mit Einzelsteuerung je Ecke und Vorschau. Elliptische Radien und komplexe Formen werden unterstützt.
Sehen Sie sich Kombinationen aus Google Fonts für Überschriften und Fließtext an und finden Sie die passende Paarung mit eigenen Farben und Größen.