Farbstudio
Paletten, Verläufe, Räder und alle Wege zur perfekten Farbe.
KI-Paletten-Generator
Beschreibe eine Stimmung und erhalte passende Paletten — angetrieben von einem echten neuronalen Netz, das vollständig in deinem Browser läuft. Keine Server, keine Wartezeit, keine Daten verlassen dein Gerät.
KI · NeuronalKI-Styleguide
Beschreibe deine Marke und erhalte ein vollständiges Designsystem — Palette, Schriftpaarung, Typografie-Skala, Abstände, Radien und Schatten — vom neuronalen Netz abgestimmt und zu einem kopierfertigen CSS-Block zusammengesetzt.
KI · DesignsystemFarbkonverter
Konvertieren Sie zwischen HEX, RGB, HSL, CMYK und OKLCH mit sofortiger bidirektionaler Konvertierung.
Konverter · Alle FormateFarbharmonien
Erzeuge komplementäre, triadische, analoge und geteilt-komplementäre Paletten aus jeder Grundfarbe. Klicke auf ein Farbfeld, um den Hex-Code zu kopieren.
Farbe · TheorieKI-Farbbenennung
Gib einen beliebigen Hex-Farbwert ein und finde die nächsten Namen — CSS-Standardfarben, chinesische Traditionsfarben, japanisches Wagairo und 12 weitere Kulturen. Perzeptive Farbwissenschaft findet die echte Übereinstimmung, und das KI-Modell schlägt verwandte Palettenthemen vor.
KI · FarbwissenschaftFarbkreis
Interaktives Farbrad zum Erkunden von Farbtönen, Sättigungen und Farbbeziehungen. Klicken Sie, um Farben auszuwählen und zu sperren.
Interaktiv · VisuellVerlaufsgenerator
Entwerfen Sie wunderschöne lineare und radiale Verläufe mit der Canvas-Vorschau in Echtzeit. CSS-Code sofort kopieren.
Farbverlauf · CSS-ExportFarbverlauf-Voreinstellungen
Durchsuchen und kopieren Sie 15 schöne Farbverlaufsvoreinstellungen.
Voreinstellungen · Ein KlickBildpalette
Extrahieren Sie mithilfe der intelligenten Farbquantisierung wunderschöne Farbpaletten aus jedem Bild.
Extraktion · SmartPalettengenerator
Erstellen Sie harmonische Farbschemata mit monochromatischen, komplementären, analogen und triadischen Modi. Echtzeitvorschau mit CSS-Export.
Farbe · InteraktivTints-&-Shades-Generator
Erzeugen Sie eine vollständige Tint-&-Shade-Skala aus jeder Farbe – 20 Stufen mit HEX- und SCSS-Export.
Tints und Shades, FarbskalaEffekte & Tiefe
Schatten, Glas und Radius — die subtilen Details, die UI real wirken lassen.
Blob-Maker
Erzeuge sanfte organische Formen für Hintergründe, Avatare und Bereichstrenner. Mit einem Klick zufällig generieren, Krümmung feinjustieren und border-radius- oder SVG-Code kopieren.
CSS · OrganischAbgerundete Ecken
Visueller Randradius-Editor mit Echtzeitvorschau. Kopieren Sie CSS-Code mit individueller Eckensteuerung.
CSS · Visueller EditorSchattengenerator
Interaktiver Box-Shadow-Builder mit mehreren Ebenen, Canvas-Vorschau in Echtzeit und CSS-Ausgabe.
CSS · LayeredCSS-Button-Generator
Designen Sie in Sekunden schöne Buttons – 6 Stile, eigene Farben, Radius und Abstände, mit kopierfertigem CSS.
Button-Generator, CSS-Button, Button-DesignCSS-Filter-Generator
Erstelle visuelle Effekte mit CSS filter() — Weichzeichnung, Helligkeit, Kontrast, Farbton-Rotation, Sepia und mehr. Live-Vorschau auf einem Beispielbild, kopiere die komplette Filterkette sofort.
CSS · Bild-EffekteGlassmorphism-Generator
Erstelle Milchglas-Karten mit Hintergrundunschärfe, Transparenz und feinen Rändern. Echtzeit-Vorschau und CSS zum Kopieren.
UI · MilchglasVerlaufstext-Generator
Lassen Sie Text mit Verlaufsfüllungen und Animation hervorstechen – Winkel und Farben einstellen, CSS sofort kopieren.
VerlaufstextTextschatten-Generator
Gestalte mehrschichtige Textschatten mit Echtzeit-Vorschau. Passe Versatz, Unschärfe, Farbe und Deckkraft an — kopiere das CSS sofort.
CSS · TypografiePraktisches Werkzeugset
Prüfungen, Konvertierungen und Systeme für zugängliche, konsistente Designs.
KI-CSS-Snippets
Beschreibe den gewünschten Effekt — einen leuchtenden Button, einen Lade-Spinner, eine Glas-Karte — und das neuronale Netz findet das passende CSS-Snippet. Live gerendert ansehen, fertigen Code kopieren.
KI · CodebibliothekFarbenblind-Simulator
Simuliert, wie Farben für farbenblinde Benutzer aussehen.
Barrierefreiheit · SimulationKontrastprüfer
Überprüfen Sie die WCAG AA/AAA-Konformität für Text und Hintergrundfarben. Erhalten Sie sofort Bewertungen zur Barrierefreiheit.
Zugänglichkeit · AA/AAACubic-Bezier-Generator
Gestalte eigene CSS-Easing-Kurven mit Live-Vorschau und Animation. Ziehe Kontrollpunkte, wähle Presets und kopiere die cubic-bezier()-Funktion sofort.
CSS · BewegungPX zu REM Umrechner
Wandle Pixel sofort in REM um und zurück, mit anpassbarer Basis-Schriftgröße und vollständiger Umrechnungstabelle. Unverzichtbar für barrierefreies, skalierbares CSS.
CSS · EinheitenCSS-Transformations-Generator
Visualisiere und generiere CSS-Transformationen — drehen, skalieren, verschieben und neigen mit interaktiver Live-Vorschau. Kopiere die vollständige transform-Eigenschaft sofort.
CSS · AnimationUI-Farbsystem
Generieren Sie komplette Design-Token-Paletten aus einer einzigen Ausgangsfarbe. Export nach Tailwind, CSS oder SCSS.
Design-Token · RückenwindLayout & Raster
Raster und Proportionen — das strukturelle Rückgrat jeder Oberfläche.
Seitenverhältnis-Rechner
Berechne und skaliere jedes Seitenverhältnis — 16:9, 4:3, 1:1, 9:16 und benutzerdefiniert. Ändere die Abmessungen unter Beibehaltung der Proportionen, mit gängigen Auflösungsvoreinstellungen.
Utility · VerhältnisCSS Grid Generator
Erstellen Sie visuell CSS Grid-Layouts mit Echtzeitvorschau.
CSS · Visueller EditorGoldener-Schnitt-Rechner
Berechne Goldener-Schnitt-Maße (1:1.618) für Layouts, Typografie und Logos. Erhalte sofort größere und kleinere Goldene Werte, mit visueller Vorschau.
Layout · ProportionSVG-Wellen-Generator
Erstellen Sie sanfte SVG-Wellen-Trenner für Ihre Website – Amplitude, Wellenlänge und Ebenen einstellen, SVG kopieren.
SVG-Welle, Wellen-TrennerTypografie-Atelier
Schriftpaarungen und Skalen — die Stimme deines Designs.
KI-Schriftpaarung
Beschreibe dein Projekt und erhalte professionelle Google-Fonts-Paarungen, abgestimmt von einem echten neuronalen Netz in deinem Browser. Live gerendert ansehen, fertiges CSS kopieren.
KI · SchriftenClamp-Rechner
Erzeuge flüssige Typografie mit CSS clamp(). Setze Mindest-, Vorzugs- und Maximalgröße — erhalte die perfekte clamp()-Formel und eine visuelle Skalen-Vorschau.
CSS · Flüssige TypografieSchriftarten-Kombination
Entdecken Sie harmonische Schriftartenkombinationen für Überschriften und Fließtext aus kuratierten Sammlungen.
Typografie · Über 300 SchriftartenTypografie-Skalen-Generator
Erzeuge eine harmonische modulare Typografie-Skala mit Goldenem Schnitt, großer Terz und anderen klassischen Verhältnissen. Visuelle Größen-Vorschau und komplettes CSS kopieren.
Typografie · Skala14 Sprachen
Jedes Werkzeug, jedes Etikett, jede Anleitung – vollständig übersetzt.
Barrierefreiheit zuerst
Jede Palette enthält WCAG-Kontrastwerte. Gestalten Sie von Anfang an inklusiv.
Entwicklerfreundlicher Export
CSS, Tailwind, SCSS, JSON – kopieren Sie das Format, das Ihr Projekt benötigt.