Farbwerkzeuge
Generieren, analysieren und exportieren Sie Farbpaletten für Ihre Projekte.
Farbwähler
Wählen Sie Farben direkt aus einem Bild und lesen Sie exakte HEX-, RGB-, HSL- und HSV-Werte aus. Zoomen Sie auf einen Pixel und greifen Sie jeden Ton ab.
Farben extrahieren
Extrahieren Sie die Hauptfarben aus einem Foto oder Motiv als saubere HEX-, RGB- und HSL-Muster. Bauen Sie eine fertige Palette und kopieren Sie jeden Code.
Palettengenerator
Erzeugen Sie eine vollständige, ausgewogene Farbpalette aus jedem Bild mit passenden HEX-, RGB- und HSL-Codes. Feintunen Sie jedes Muster und exportieren Sie es.
Dominante Farben
Erkennen Sie die dominanten Farben eines Bildes, sortiert nach Pixelanteil, mit HEX-, RGB- und HSL-Codes. Extrahieren Sie die echten Haupttöne aus Fotos.
Ähnliche Farben
Finden Sie ähnliche Farben zu Ihrer Auswahl über die perzeptuelle Distanz in HEX, RGB und HSL. Entdecken Sie nahe Töne und Nachbarn für eine feine Palette.
Farbe konvertieren
Rechnen Sie jede Farbe zwischen HEX, RGB, HSL, HSV, CMYK, OKLCH und LAB in Echtzeit um. Fügen Sie einen Wert ein, lesen Sie alle Formate und kopieren den Code.
Farbkontrast-Prüfer
Prüfen Sie das Kontrastverhältnis zwischen Text und Hintergrund nach WCAG AA und AAA. Sehen Sie das exakte Verhältnis, das Ergebnis und lesbarere Farbvorschläge.
Palette exportieren
Exportieren Sie Ihre Palette als CSS-Variablen, SCSS, JSON, ASE und Tailwind-Tokens. Kopieren Sie produktionsfertigen Code für jedes Muster in jedes Projekt.
Farbvorschau
Sehen Sie, wie Ihre gewählten Farben in einem echten Interface wirken, bevor Sie sich festlegen. Testen Sie HEX- und RGB-Töne an UI-Elementen im echten Kontext.
Farben herunterladen
Laden Sie Ihre fertige Palette als sauberes PNG- oder SVG-Musterblatt mit HEX-Codes herunter. Speichern Sie jeden Ton als teilbares Bild für Decks und Mockups.
Farben teilen
Teilen Sie jede Farbpalette über einen eindeutigen Link, der jeden HEX- und RGB-Wert trägt. Senden Sie Muster an Kollegen und Kunden, die genau Ihr Set öffnen.
Farbharmonien
Erkunden Sie komplementäre, triadische, analoge und geteilte Harmonien aus einer Grundfarbe. Bauen Sie ausgewogene Schemata mit HEX-, RGB- und HSL-Codes auf.
CSS-Verlauf-Generator
Erzeugen Sie lineare, radiale und konische CSS-Verläufe mit freien Farbstopps und Winkeln. Sehen Sie die Vorschau und kopieren Sie sauberen Hintergrund-Code.
Mesh-Verlauf-Generator
Erstellen Sie weiche, mehrfarbige Mesh-Verläufe mit sanften Punkten und Tiefe. Justieren Sie jeden Farbknoten und exportieren Sie fertige CSS-Hintergründe.
Animierter-Verlauf-Generator
Erstellen Sie animierte CSS-Verlaufshintergründe mit wechselnden Farben und regelbarem Tempo. Sehen Sie die Bewegung und kopieren Sie den Keyframe-Code direkt.
Farbenblindheit-Simulator
Simulieren Sie, wie Ihre Farben bei Protanopie, Deuteranopie und Tritanopie wirken. Testen Sie eine Palette auf Barrierefreiheit und beheben Sie ähnliche Paare.
Textlesbarkeit
Testen Sie die Textlesbarkeit über Paare aus Vordergrund- und Hintergrundfarbe mit Vorschau. Prüfen Sie den Kontrast, erkennen Sie schwere Paare und wählen klar.
WCAG-Analysator
Analysieren Sie eine ganze Palette auf WCAG-Kontrastkonformität über jedes Farbpaar. Sehen Sie AA- und AAA-Ergebnisse und beheben Sie schwache Kombinationen.
Glasmorphismus-Generator
Erzeugen Sie Glasmorphismus-Karten mit regelbarer Unschärfe, Transparenz und Tönung. Sehen Sie den Glaseffekt und kopieren Sie backdrop-filter-CSS für Ihr Layout.
Neumorphismus-Generator
Erstellen Sie weiche Soft-UI-Elemente mit hellen und dunklen Schatten und runder Tiefe. Justieren Sie Abstand und Unschärfe und kopieren Sie box-shadow-CSS.
Farbige-Schatten-Generator
Erzeugen Sie farbige CSS-Schatten mit eigener Tönung, Unschärfe, Ausbreitung und Versatz. Sehen Sie getönte Schimmer in der Vorschau und kopieren sauberes CSS.
Duotone-Generator
Wenden Sie einen starken Duotone-Effekt an, der Schatten und Lichter eines Bildes auf zwei Farben abbildet. Wählen Sie ein HEX-Paar, prüfen und laden Sie es.
Bildfarbfilter
Wenden Sie Farbfilter, Tönungen und Überlagerungen auf jedes Bild mit regelbaren Mischmodi an. Sehen Sie Farbton und Deckkraft und laden Sie das umgefärbte Bild.
Farb-Moodboard-Ersteller
Bauen Sie visuelle Moodboards, die Ihre Palettenmuster mit Bildern und Stimmung verbinden. Ordnen Sie Farben an, testen Sie Paare und exportieren das Board.
Farbmischer
Mischen und kombinieren Sie zwei Farben zu neuen Tönen mit präzisen HEX-, RGB- und HSL-Codes. Passen Sie das Verhältnis an und kopieren Sie jeden Zwischenschritt.
Tönungen und Schattierungen
Erzeugen Sie eine ganze Skala aus Tönungen und Schattierungen einer Grundfarbe in gleichmäßigen Stufen. Erhalten Sie hellere und dunklere Varianten in HEX, RGB.
Zufällige Palette
Erzeugen Sie zufällige Farbpaletten sofort, um frische Design-Ideen zu wecken. Sperren Sie gute Töne, würfeln Sie den Rest neu und kopieren Sie die HEX-Codes.
Palette aus Stichwort
Erzeugen Sie Farbpaletten aus jedem Stichwort, jeder Stimmung oder jedem Thema. Machen Sie aus Ozean oder Sonnenuntergang passende HEX-, RGB- und HSL-Muster.
Tailwind-Palettengenerator
Erzeugen Sie eine eigene Tailwind-CSS-Farbpalette mit den vollen Stufen von 50 bis 950. Kopieren Sie die fertige Config für tailwind.config direkt in Ihren Build.
CSS-Variablen-Generator
Exportieren Sie Ihre Palette als CSS Custom Properties mit klaren, nutzbaren Namen. Kopieren Sie einen fertigen :root-Block aus Farb-Tokens ins Stylesheet.
shadcn/ui-Theme-Generator
Erzeugen Sie ein vollständiges shadcn/ui-Theme mit passenden hellen und dunklen Farb-Tokens in HSL. Kopieren Sie die CSS-Variablen Ihrer Komponenten ins Projekt.
SCSS-Variablen-Generator
Exportieren Sie Ihre Palette als SCSS- und Sass-Variablen mit klarer, semantischer Benennung. Kopieren Sie ein fertiges Partial aus Farb-Tokens in Ihr Stylesheet.
Farbtemperatur-Analyse
Analysieren Sie die Balance aus warmen und kühlen Tönen einer Farbe oder Palette auf einer Skala. Sehen Sie, ob Töne warm oder kühl neigen, und verfeinern sie.
Farbstimmung
Erkunden Sie die Emotionen und Psychologie hinter Farben, um Töne gezielt zu wählen. Sehen Sie, wie jeder Ton wirkt, und bauen Sie Paletten mit klarem Gefühl.
Markenfarben-Extraktor
Suchen Sie im Katalog nach einer Marke, sehen Sie die hinterlegten Farben und kopieren Sie die verfügbaren HEX-Codes direkt.
Farbtrends
Entdecken Sie angesagte Farben und beliebte Paletten, um Ihre Designs aktuell zu halten. Durchstöbern Sie Töne des Moments mit HEX-Codes und übernehmen Sie sie.
Verlaufskarte
Wenden Sie Verlaufskarten an, die Bildtöne von den Schatten bis zu den Lichtern umfärben. Wählen Sie eine Farbrampe, sehen Sie den Look und laden das Ergebnis.
Farbüberlagerung
Legen Sie Farbüberlagerungen mit regelbaren Mischmodi, Farbton und Deckkraft über jedes Bild. Sehen Sie Multiplizieren, Negativ und mehr und laden Sie das Bild.
Monochrome Palette
Erstellen Sie monochrome Farbschemata aus einem Farbton mit abgestuften Tönungen. Bauen Sie stimmige Paletten und kopieren Sie jede HEX- und RGB-Variante.
Komplementärschema
Erzeugen Sie komplementäre Farbschemata aus gegenüberliegenden Seiten des Farbkreises. Paaren Sie eine Grundfarbe mit ihrem Kontrast in HEX-, RGB- und HSL-Codes.
UI-Vorschau
Sehen Sie Ihre Palette an realistischen UI-Komponenten wie Buttons, Karten und Formularen. Prüfen Sie, wie HEX- und RGB-Töne wirken, bevor Sie es bauen.
Social-Media-Vorschau
Sehen Sie Ihre Farbpalette an Social-Media-Post-Mockups vor dem Posten. Prüfen Sie, wie Töne im Feed wirken, und wählen Sie ein Schema, das klar auffällt.