Starte mit einer Farbe und erzeuge komplementäre, analoge, triadische und weitere Harmonien — dann als CSS, Tailwind v4, SVG oder PNG exportieren.
Farblehre-Guide
Der Kreis ordnet Farbtöne kreisförmig, damit Beziehungen räumlich werden. Abstand bedeutet Kontrast, Nähe bedeutet Ruhe. Alles unten ist interaktiv — verändere den Kreis und diese Ideen klicken sofort.
Tipp: Teile jedes Ergebnis — die URL enthält immer Basisfarbe, Harmonie und Helligkeit.
Ein Farbton reicht nie für Interfaces. Mische ihn mit Schwarz für Schattierungen (Überschriften, Hover), mit Weiß für Tönungen (Hintergründe, Modals) und mit Grau für Töne (gedeckter Text, Rahmen).
Indigo von Schatten zu Tönung. Dieselbe Logik steuert jede Palette oben.
Im klassischen RYB-Kreis sind Rot, Gelb und Blau primär; gemischt ergeben sie Orange, Grün und Violett. Auf Screens mischen wir Licht (RGB) — dieses Tool rechnet daher in HSL/HSV: derselbe Kreis, abgestimmt auf Pixel.
Twelve stops around the disc; every other color contains a trace of a primary.
Ease Colors ist ein kostenloser Farbkreis online für Designer und Entwickler, die verlässliche Farben brauchen, ohne den Browser zu verlassen. Wähle eine Basisfarbe auf dem interaktiven Farbkreis-Wähler, sieh sechs Harmonien auf einmal und kopiere produktionsreife HEX-, RGB-, HSL- oder OKLCH-Codes. Nichts wird hochgeladen, kein Konto nötig, und jedes Ergebnis erhält eine teilbare URL, die deine exakte Basisfarbe, Harmonie und Helligkeit wiederherstellt. Eine eingebaute Abstufungsrampe dehnt jede Basisfarbe vom Tint bis zum Shade, und die gesamte Seite bleibt tastaturbedienbar — mit sichtbarem Fokus auf jedem Schritt.
Der Farbkreis ist ein kreisförmiges Farbdiagramm, in dem Farbtöne so angeordnet sind, dass Beziehungen räumlich werden: Nachbarfarben wirken ruhig, Gegenfarben erzeugen Spannung. Der klassische Primärfarbkreis aus dem Kunstunterricht mischt rote, gelbe und blaue Farbe, während der RGB-Farbkreis auf deinem Bildschirm Licht mischt. Dieses Tool berechnet jede Harmonie im HSV/HSL-Farbraum — abgestimmt auf Pixel statt Pigment. Ziehe einen Punkt auf der Scheibe für den Farbton, nach außen für die Sättigung, und drehe am äußeren Helligkeitsring, um einen Ton vom hellen Hintergrund bis zum dunklen Text zu tragen. Weil die Scheibe immer mit voller Leuchtkraft gezeichnet wird, bleiben die Markierungen verteilt und ziehbar — selbst bei fast schwarzen oder fast weißen Paletten bricht die Geometrie an den Extremen nie zusammen.
Dieser Farbkreis online ist zugleich ein vollwertiger Online-Farbwähler und ein Farb-Tool:
Auf der Suche nach Richtungen? Drücke Shuffle in der Farbpaletten-Galerie für eine zufällige Ziehung aus über 400 kuratierten Sets.
Simuliere vor dem Release Farbenblindheit — Protanopie, Deuteranopie, Tritanopie und Achromatopsie — und halte Text lesbar dank kontrastgewählter Feldetiketten auf jedem Streifen.
Jeder Farbwähler auf dieser Seite spricht vier Formate. Das HEX-Feld nimmt jeden Hex-Farbcode wie #EDEA37, der RGB-Wähler liest Tripel wie rgb(99, 102, 241), und HSL plus OKLCH liefern die wahrnehmungsgetreue Gleichabständigkeit jenseits von RGB. Front-end-Teams erhalten einen einsatzbereiten HTML-Farbwähler- und CSS-Farbwähler-Workflow: exportiere CSS-Variablen, Tailwind-v4-Theme-Token, ein Tailwind-v3-Konfigobjekt, Figma-JSON oder nur die Codes. Die eingebaute Bildschirmpipette (EyeDropper) sampled jeden Pixel deines Monitors, und die Punkte auf dem Farbwählerrad bleiben bei jeder Helligkeit ziehbar. Dieser Online-Farbwähler ist gratis, mit Alpha-fähigen Exporten für jeden RGBA-Anwendungsfall. Der Custom-Modus friert jedes generierte Set in eine handeditierbare Liste ein: helle ein Feld auf oder dunkle es ab, ziehe zum Umsortieren, füge eine gemischte Mitte ein oder erweitere ein Ende — jede Änderung landet sofort in der teilbaren URL.
Fotografen und Markendesigner greifen zum Bild-Farbwähler, um Paletten aus der echten Welt zu borgen. Lade ein Foto hoch — oder füge eine Bild-URL ein — und der Farbwähler aus Bild zeigt eine Lupe mit Pixelraster und Fadenkreuz, um exakt den Pixel zu lesen, auf den du zeigst — selbst bei 800 % Zoom. Fixiere die Farbe, kopiere sie als HEX, RGB, HSL oder OKLCH und sende sie mit einem Klick ans Farbrad. Stelle die extrahierte Palette von zwei bis zehn Farben ein, lade den Streifen als PNG herunter oder lege ihn in den Browser-Tresor für später. Jedes Bild, das du öffnest, bleibt auf deinem Gerät — nichts wird hochgeladen.
Wenn ein Farbfeld nicht reicht, baut der Farbpaletten-Generator in Sekunden eine fertige Palette aus Bilddaten. Er bewertet Pixel nach Häufigkeit und Sättigung, filtert Fast-Duplikate und ordnet die Gewinner nach Farbton — zwei bis zehn Farben zum Umsortieren, Erweitern und Löschen. Porträtretuscheure schätzen die eigenen Hautton-Sets neben den Kollektionen in Pastell, Blau und Grün. Sichere Favoriten im Browser-Tresor, lade jede Farbpalette als PNG oder SVG herunter und exportiere Token fürs Handoff. Ziehbare Knöpfe reiten auf dem Bild an ihren Sample-Punkten — eine Farbe neu zu picken wird zum Ziehen statt Raten.
Ein komplementärer Farbkreis paart Töne im 180°-Abstand für maximale Spannung — Orange gegen Blau, Violett gegen Gelb. Der Komplementärstreifen markiert deine Basisfarbe mit einem schwarzen Punkt, damit du exakt siehst, welches Feld für Buttons und Links reserviert bleibt, während der dominante Ton das Layout führt. Geteilte, triadische, tetradische und quadratische Drehungen stehen daneben im Harmonie-Panel als sanftere oder mutigere Alternativen.
Zwölf saisonale Farbanalyse-Systeme leben in der Galerie — je siebzehn Paletten. Warme, gedeckte Briefings starten mit der Sanfter-Herbst-Palette, kühle und gedeckte greifen zur Sanfter-Sommer-Palette. Hochwarme Herbst-Paletten dienen Herbstkampagnen und Food-Marken, und die Tiefer-Winter-Palette liefert Juwelenleuchten auf Fast-Schwarz für Luxus und Abend. Helle, warme Designs schöpfen aus der Heller-Frühling-Palette, luftiges Minimal aus der Kühler-Sommer-Palette und opulentes Dunkel aus der Tiefer-Herbst-Palette. Eisiger Kontrast gehört zur Kalter-Winter-Palette, strahlende Wärme zur Warmer-Frühling-Palette, weiche Mitten zur Echter-Sommer-Palette und leiser Luxus zur neutralen Palette. Breitere Sommer-, Winter-, Frühlings- und Herbststimmungen runden 400+ Sets ab — jedes mit Ein-Klick-Kopie für HEX, RGB, HSL und OKLCH.
Wenn du über Adobe color wheel, Adobe color picker, Canva color wheel oder Google color picker hier gelandet bist, kennst du die Aufgabe: aus einer Markenfarbe ein balanciertes Set machen. Ease Colors deckt dasselbe Terrain ab — Harmonien, HEX/RGB/HSL/OKLCH-Codes, Bild-Sampling und Palettenexport — gratis im Browser, mit teilbaren URLs und ohne Konto zwischen dir und den Farbfeldern. Tastatur zuerst, Screenreader-Labels und Reduced-Motion-Modus inklusive.
Öffne den Farbkreis, teste den Farbwähler aus Bild oder stöbere durch über 400 Farbpaletten. Deine nächste Palette ist einen Zug entfernt.
Klicke ein Farbfeld an. Stelle vor dem Kopieren das Format HEX, RGB, HSL oder OKLCH um.
Drücke „Link kopieren“. Die URL kodiert Basisfarbe, Harmonie und Helligkeit.
Ja. Jedes HEX, Token und jeder Export gehört dir — ohne Namensnennung.
Der Farbkreis ist ein Kreisdiagramm, das Farbtöne so anordnet, dass Beziehungen räumlich werden: Nachbarfarben beruhigen, Gegenfarben erzeugen Spannung. Der Kunstunterricht lehrt einen Rot-Gelb-Blau-Kreis zum Farbenmischen; Bildschirme nutzen einen RGB-Farbkreis, der Licht mischt. Designer nutzen ihn, um Basisfarben zu wählen, Harmonien zu bauen und Kontrast zu prüfen, bevor eine Palette je ein Layout erreicht.
Starte mit einer Basisfarbe — tippe einen HEX-Code, öffne den Systempicker oder sample deinen Bildschirm. Wähle eine Harmonie wie analog, komplementär oder triadisch und feintune die Helligkeit mit dem äußeren Ring, bis Hintergrund-, Text- und Akzenttöne stehen. Kopiere jedes Farbfeld als HEX, RGB, HSL oder OKLCH und füge die Codes in CSS, Tailwind oder Figma ein.
Sein Hauptzweck: Farben ohne Raten kombinieren. Statt Paare nach Augenmaß zu bilden, liest du Geometrie: Abstand bedeutet Kontrast, Nachbarschaft bedeutet Ruhe. Das gibt jeder Oberfläche eine klare Hierarchie — ein dominanter Ton, wenige Unterstützer, ein reservierter Akzent — sodass Buttons, Links und Headings landen, wo das Auge sie erwartet.
Die Designliteratur listet meist acht: monochromatisch (ein Ton, viele Helligkeiten), analog (Nachbarn), komplementär (Gegenpole), geteilt-komplementär (eine Basis plus zwei Nachbarn ihres Gegenpols), triadisch (Dreieck), tetradisch oder rechteckig (zwei Komplementärpaare), quadratisch (vier Ecken) und achromatisch oder neutral (Schwarz, Weiß, Grau). Dieses Tool deckt sechs davon direkt ab, plus einen Custom-Modus für handeditierte Listen mit zwei bis acht Farben.
Ziehe einen Punkt auf der Scheibe: Der Winkel setzt den Farbton, der Abstand zur Mitte die Sättigung. Ziehe am äußeren Ring für die Helligkeit, ohne Ton und Sättigung anzufassen. Du kannst auch einen exakten HEX-Wert tippen, die System-Farbpalette öffnen oder einen beliebigen Monitorpixel mit der Bildschirmpipette wählen — alle Wege führen zur selben teilbaren Basisfarbe.
Ein Farbwähler macht aus einer visuellen Wahl einen exakten, wiederverwendbaren Wert. Er liest jede Farbe als HEX-, RGB-, HSL- oder OKLCH-Code, sodass Designer und Entwickler dieselbe Sprache sprechen: Was du anklickst, ist bitidentisch mit dem, was in CSS, Tailwind-Token oder Figma-Stilen landet — kein Schätzen von Tönen nach Augenmaß mehr.
Die Haupttypen sind Rad- oder Scheibenwähler (Ton plus Sättigung auf einen Blick), Slider-Wähler (RGB- oder HSL-Kanäle), HEX-Felder (direkte Werte), Pipetten- oder Bildschirmwähler (samplen deinen Monitor), Bildwähler (Lupe auf Foto) und Palettenbibliotheken (kuratierte Sets wie die 400+-Galerie hier). Diese Seite vereint alle sechs in einem Workflow.
Ein Farbcode ist ein Textwert, der genau eine Farbe beschreibt. HEX schreibt ihn als sechs Hexadezimalziffern (#EDEA37); RGB listet Rot-, Grün- und Blaukanal; HSL listet Ton, Sättigung, Helligkeit; OKLCH ist ein neueres perzeptuelles Format, in dem gleiche Zahlenschritte gleich unterschiedlich aussehen. Alle vier beschreiben dasselbe Farbfeld — das Format ändert nur, wie du es liest und editierst.
Wähle eine Farbe mit Rad, Slider, HEX-Feld oder Bildschirmpipette und kopiere sie in dem Format, das dein Projekt braucht — HEX fürs Web, RGB oder RGBA für App-Code, HSL für schnelle Tweaks, OKLCH für perzeptuelle Gleichmäßigkeit. Füge den Wert in Stylesheet, Tailwind-Config oder Designtool ein und behalte den Share-Link, damit die exakte Farbe später einen Klick entfernt ist.
Eine Farbpalette hält alle Flächen eines Produkts in derselben Bildsprache. Sie vergibt Rollen — Hintergrund, Text, Akzente, Zustände — damit Interfaces kohärent wirken statt aus Zufallsfeldern montiert. Eine gute Palette baut Kontrast und Hierarchie von vornherein ein: weniger Lesbarkeits-Fixes und eine stärkere, wiedererkennbare Marke.
Gängige Arten sind monochromatische, analoge und komplementäre Paletten aus Radgeometrie; Pastell- und Neonpaletten nach Energie; saisonale Paletten nach Hautunterton (von Soft Autumn bis neutral); Markenpaletten fixiert auf Corporate-Farben; und extrahierte Paletten aus Fotos gesampelt. Die Galerie hier hostet alle — 400+ Sets in 60+ Kategorien.
Starte mit einer Basisfarbe zur Stimmung — warm und gedeckt, kühl und luftig oder dunkel und dramatisch. Erweitere sie mit einer Harmonie und prüfe das Ergebnis so, wie Nutzer es treffen: Fließtext-Kontrast, Button-Akzente und Farbenblind-Simulation für Protanopie, Deuteranopie, Tritanopie. Übersteht sie alle drei, teile den Link und shippe sie.