Design-Tools

Praktische Tools für Frontend- und visuelle Designarbeit – mit CSS zum Kopieren und Barrierefreiheitsprüfungen auf Grundlage der WCAG-Kontrastformel.

7 Tools

Tools in dieser Kategorie

FarbumrechnerFarben zwischen HEX, RGB, HSL, HWB, OKLCH und vereinfachtem CMYK umwandeln. Fügen Sie eine CSS-Farbe ein oder verwenden Sie die Farbauswahl und kopieren Sie anschließend das gewünschte Format. Läuft in Ihrem Browser.
KontrastprüferPrüfen Sie das WCAG-2.2-Kontrastverhältnis von Text und Hintergrund, sehen Sie die AA- und AAA-Ergebnisse für Text und UI-Elemente und finden Sie die nächstgelegene Farbe, die die Anforderungen erfüllt.
CSS-Farbverlauf-GeneratorErstellen Sie lineare, radiale und konische CSS-Farbverläufe mit 2 bis 6 Farbstopps. Legen Sie Winkel und Positionen fest, sehen Sie sich die Live-Vorschau an und kopieren Sie das CSS für den Hintergrund.
Box-Shadow-GeneratorGestalten Sie mehrschichtige CSS-Box-Schatten mit Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und inset. Vorschau auf beliebigem Hintergrund anzeigen und das box-shadow-CSS kopieren.
Farbpaletten-GeneratorErstellen Sie aus einer Farbe komplementäre, analoge, triadische, tetradische, geteilt-komplementäre Paletten sowie Farbskalen. Sperren Sie Farben und kopieren Sie HEX, CSS oder JSON.
PX-zu-REM-UmrechnerRechnen Sie px mit beliebiger Root-Schriftgröße (Standard: 16px) in rem oder em und zurück um. Mit Tabelle gängiger Größen und Umrechnung von px-Werten in vollständigen CSS-Snippets.
Seitenverhältnis-RechnerBerechnen Sie die fehlende Breite oder Höhe für jedes Seitenverhältnis, vereinfachen Sie Maße wie 1920×1080 zu 16:9, sehen Sie eine Vorschau der Form und kopieren Sie die CSS-Regel aspect-ratio.