Design und CSS
Farben, Gradienten, Schatten und Einheiten mit Live-Vorschau.
Diese Werkzeuge erzeugen CSS, das du kopieren und einsetzen kannst, und zeigen dabei das Ergebnis, während du an den Werten drehst. Farbformate umrechnen, Paletten aus einem Ausgangston bauen, Kontrast gegen die Barrierefreiheitsstufen prüfen, Gradienten und Schatten zusammenstellen, zwischen px, rem, em und Prozent umrechnen und Übergänge mit Kurven abstimmen. Die Vorschau ist der Punkt: CSS aus einer Zahlentabelle zu schreiben, ohne es zu sehen, ist der langsame Weg zu einem falschen Ergebnis.
Werkzeuge in dieser Kategorie
23Über diese Werkzeuge
Farbformate beschreiben dieselbe Farbe unterschiedlich
HEX ist kompakt und überall lesbar, RGB rechnet leicht in Code, HSL entspricht der Art, wie Menschen über Farbe denken — Ton, Sättigung, Helligkeit — und OKLCH ist so gebaut, dass gleiche Zahlenschritte auch gleich große wahrgenommene Schritte ergeben. Deshalb wirkt eine in HSL aufgehellte Palette oft ungleichmäßig, während dieselbe Reihe in OKLCH sauber gestaffelt aussieht.
Kontrast ist eine Zahl, keine Meinung
Text braucht mindestens ein Verhältnis von 4,5:1 gegen seinen Hintergrund für die Stufe AA, große Überschriften kommen mit 3:1 aus, und AAA verlangt 7:1. Das lässt sich nicht mit dem Auge beurteilen, weil helle Farben viel heller wirken, als sie messbar sind, und weil dein Bildschirm heller ist als das Telefon deiner Leser. Die Prüfung gibt dir die Zahl, bevor jemand deine Seite nicht lesen kann.
Schatten und Gradienten sind schnell zu viel
Ein glaubwürdiger Schatten hat wenig Deckkraft, eine kleine Verschiebung und eine Weichzeichnung, die etwa der Verschiebung entspricht — mehrere leichte Ebenen wirken echter als eine harte. Bei Gradienten entstehen die typischen grauen Zonen dadurch, dass zwei gesättigte Töne durch den unbunten Mittelpunkt hindurch gemischt werden. Beides sieht man in der Vorschau in einer Sekunde und in einer Wertetabelle nie.