Design und Farbe

Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.

Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.

Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.

Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.

Berechnet die fehlende Abmessung für ein Zielverhältnis und listet die Standardgrößen auf, die dazu passen.

Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.

Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.

Legt ein Raster visuell mit benannten Bereichen an und gibt das grid-template-CSS aus.

Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.

Setzt einen Screenshot in einen Smartphone-, Tablet-, Laptop- oder Browser-Rahmen mit Hintergrund und Schatten.

Schaltet jede Flex-Eigenschaft an einem Live-Beispiel um und zeigt das CSS und was jede Eigenschaft geändert hat.

Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.

Wandelt TTF und OTF im Browser in WOFF um und zurück und gibt die passende @font-face-Regel aus; WOFF2 braucht Brotli und wird mit Verweis auf Desktop-Werkzeuge abgelehnt.

Schlägt Paare aus Überschrift- und Fließtextschrift aus System-Font-Stacks vor, mit Vorschau in Ihrem eigenen Text – koreanisch wie lateinisch –, und liefert das CSS.

Reduziert eine TrueType-Schrift auf die Glyphen, die Ihr Text tatsächlich verwendet, und kann das Ergebnis als WOFF verpacken – der Unterschied zwischen einer 4-MB- und einer 90-KB-Webschrift für Koreanisch.

Findet zu jeder Farbe den nächstgelegenen Eintrag der Tailwind-Palette und zeigt den wahrnehmbaren Abstand.

Setzt ein 1200×630-Teilbild aus Titel, Untertitel, Markenzeile und optionalem Logo auf einer gewählten Vorlage zusammen und schreibt die passenden Meta-Tags dazu.

Bearbeitet ein SVG neben seinem Live-Rendering und erklärt die Datei: viewBox und Skalierung, Transformationen, jeden Pfadbefehl, vererbte Füllung, verschwendete Bytes und was in einem <img>, einer Data-URI oder inline bricht.

Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.

Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.

Formt jede Ecke unabhängig, einschließlich der Zwei-Wert-Squircle-Syntax, und gibt das CSS aus.

Stapelt Blur-, Helligkeits-, Sättigungs-, Farbton- und Drop-Shadow-Filter auf einem Beispiel und gibt das CSS aus.

Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.

Bearbeitet eine cubic-bezier- oder Feder-Kurve gegen eine animierte Vorschau und gibt die CSS-Timing-Funktion aus.

Öffnet eine Schriftdatei und zeigt Glyphenabdeckung je Block, Anzahl koreanischer Silben, Strichstärke, variable Achsen, Einbettungsrechte und Lizenz-Namenseinträge.

Wandelt RGB mit der einfachen Formel in CMYK um (ohne ICC- oder Papierprofil) und markiert gesättigte Farben, die eine Vierfarbdruckmaschine abstumpfen wird.

Wandelt Pfaddaten zwischen absoluten und relativen Befehlen um, verschiebt, skaliert, dreht und kehrt sie um und zeigt die Bounding-Box mit Live-Vorschau.

Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.

Baut aus Basisgröße und Verhältnis eine modulare Schrift- und Abstandsskala, exportiert als CSS oder Tokens.