16 Tools / 3 Kategorien
Farb-Tools, gedruckt scharf.
Eine Druckerei für den Browser. Paletten, Verläufe, Schatten und Easings — gemischt in einem Tab, kopierbar als CSS, Tailwind oder SCSS. Nichts verlässt die Seite.
Die Tools
Jeder Chip unten ist ein funktionierendes Tool. Tinte wählen. Mischen. Kopieren. Einsetzen.
01 · Farb-Tools
8 ToolsErzeuge komplementäre, analoge, triadische und weitere Farbharmonien aus jeder Grundfarbe. Exportiere als CSS-Variablen, Tailwind-Konfiguration, SCSS oder JSON.
Füge einen beliebigen Farbwert ein und sieh ihn sofort in HEX, RGB, RGBA, HSL, HSLA und HSV. Kopiere jedes Format mit einem Klick.
Prüfe Vordergrund- und Hintergrundfarbpaare gegen WCAG 2.1 AA- und AAA-Anforderungen für normalen und großen Text.
Mische zwei Farben in beliebigem Verhältnis im RGB- oder HSL-Raum und kopiere sofort die resultierenden Hex-, RGB- und HSL-Werte.
Ziehe ein beliebiges Bild hinein und extrahiere die dominanten Farben mit Median-Cut-Quantisierung. Exportiere als CSS-Variablen, Tailwind-Konfiguration, SCSS oder JSON.
Sieh deine Palette durch sieben Arten von Farbsehschwäche. Erkenne Paare, die für die ~8 % Nutzer mit Rot-Grün-Verwechslung kollidieren.
Finde die nächstliegende benannte CSS-Farbe zu jedem Hex mittels perzeptueller Lab-Distanz oder schlage den exakten Hex hinter jedem CSS-Schlüsselwort nach.
Erstelle aus jeder Markenfarbe eine tonale Skala (50–950) und sieh die WCAG-AA/AAA-Kontrastbewertungen jedes Farbtons gegen Weiß, Schwarz und die übrigen Stufen.
02 · CSS-Generatoren
7 ToolsErstelle lineare, radiale und konische CSS-Verläufe mit mehreren Farbstopps, Winkelkontrolle und Echtzeitvorschau.
Stapele mehrere Box-Schatten mit voller Kontrolle über Offset, Blur, Spread, Farbe und Inset. Kopiere das CSS sofort.
Stapele Text-Shadow-Ebenen für Schlagschatten, Neon-Glühen, 3D-Schrift, Letterpress und lange Schatten. Live-Vorschau auf echtem Text, CSS sofort kopieren.
Kombiniere Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Opacity, Saturate und Sepia zu einem einzigen CSS-Filter mit Live-Vorschau auf Bild oder Text.
Ziehe die beiden Kontrollpunkte, um eigene cubic-bezier()-Easing-Kurven zu gestalten. Vergleiche mit ease, ease-in, ease-out und sieh die Timing-Kurve eine Live-Animation antreiben.
Passe alle vier Ecken unabhängig an oder nutze die 8-Werte-Elliptensyntax. Sieh die Form live aktualisieren.
Zeichne eigene Clip-Path-Polygone mit einem interaktiven Editor oder starte mit Presets wie Dreiecken, Sechsecken und Pfeilen.