Kostenloser Farbwähler

Online-Farbwähler: Der vollständige Leitfaden

Der Volade-Farbwähler ist ein alles-in-einem-Web-Werkzeug, das eine Bildschirm-Pipette, einen fortgeschrittenen Farbeditor, einen Palettengenerator, einen Verlaufsersteller, einen WCAG-Barrierefreiheitsprüfer, einen Farbenblindheits-Simulator, einen Mischer und einen Entwickler-Export kombiniert — alles in einer einzigen Oberfläche, 100 % lokal, ohne Anmeldung.

Im Gegensatz zu klassischen Editoren, die auf HEX/RGB/HSL beschränkt sind, unterstützt Volade 16 Farbräume darunter LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ und HWB. Jedes Format wird in Echtzeit mit einem Sofort-Kopierbutton angezeigt, was es zum vollständigsten Werkzeug für Designer, Entwickler und Drucker macht.

Die Bildschirm-Pipette: Pixelgenaue Präzision

Die Bildschirm-Pipette verwendet die EyeDropper-API moderner Browser, um jede auf Ihrem Bildschirm sichtbare Farbe zu erfassen. Klicken Sie irgendwo — auf ein Bild, eine Website, ein Dokument — und die Farbe wird sofort erfasst. Das hochauflösende Vergrößerungsglas ermöglicht es Ihnen, auf den richtigen Pixel zu zielen, und die Tastaturnavigation (Pfeiltasten) bietet absolute Präzision. Die Bereichsabtastung (1×1, 3×3, 5×5, 11×11) glättet JPEG-Kompressionsartefakte und ermittelt die Durchschnittsfarbe eines Bereichs.

Die ausgewählte Farbe erscheint in der Historie der zuletzt verwendeten Farben, und der Wechsel zur vorherigen Farbe erfolgt sofort. Für fortgeschrittene Nutzer zeigt der Präzisionsmodus die genauen Pixelkoordinaten und Kanalwerte in Echtzeit an.

Ein Farbeditor ohne Kompromisse

Der Editor zeigt 16 Farbformate gleichzeitig an: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ und Linear RGB. Jeder Wert ist direkt bearbeitbar: Ändern Sie den HSL-Wert, und alle anderen Formate aktualisieren sich in Echtzeit. Das Farbrad bietet eine intuitive visuelle Steuerung, während numerische Schieberegler eine präzise Anpassung ermöglichen.

Alpha/Transparenz wird nativ unterstützt: Stellen Sie die Deckkraft von 0 auf 100 % mit dem dedizierten Schieberegler ein und sehen Sie sofort die Auswirkung auf alle Formate. Die Änderungshistorie zeichnet jede Änderung auf, mit Rückgängig/Zurückkehren, um jederzeit zum vorherigen Zustand zurückzukehren.

Smart Color Intelligence: über die einfache Auswahl hinaus

Aus einer einzigen Farbe generiert das Werkzeug automatisch alle klassischen Harmonien: Komplementär, Analog, Triadisch, Tetradisch, Split-Komplementär und Monochromatisch. Aber es geht weiter: Schattierungen (dunkler), Aufhellungen (heller), Trübungen (entsättigt), Warm- und Kühl-Varianten werden automatisch erzeugt.

Der Modus Palette generieren verwandelt jede Farbe in ein vollständiges Design-System: Primär, Sekundär, Akzent, Hintergrund, Oberfläche, Text, Gedämpft, Rahmen, Erfolg, Warnung, Fehler, Info — jeweils mit RGB-, OKLCH- und HEX-Werten.

Bild → Palette: Farben aus einem Foto extrahieren

Legen Sie ein beliebiges Bild ab (Foto, Illustration, Screenshot), und das Werkzeug analysiert die Pixel, um dessen Palette zu extrahieren. Fünf Extraktionsmodi stehen zur Verfügung: Dominant (am häufigsten vorkommende Farben), Leuchtend (am gesättigtsten), Gedämpft (entsättigt), Ausgewogen (visuell harmonisch) und Markenfarbe (für Markenidentitäten geeignete Farben).

Die Extraktion liefert zwischen 5 und 15 Farben, jede mit ihrem potenziellen Rolletag (Dominant, Akzent, Dunkel, Hell). Es ist ein bedeutender Beschleuniger für Designer, die ein Design-System aus einem bestehenden Foto extrahieren müssen.

WCAG-Barrierefreiheitsprüfung

Der Bereich Barrierefreiheit vergleicht zwei Farben (Vordergrund vs. Hintergrund) und zeigt das genaue Kontrastverhältnis mit WCAG-AA- und AAA-Badges für normalen Text, großen Text und UI-Komponenten. Ist das Verhältnis unzureichend, schlägt der Auto-Fix-Button automatisch die nächste konforme Farbe vor.

Es ist ein unverzichtbares Werkzeug für Entwickler, die die vorgeschriebenen Barrierefreiheitsstandards (RGAA, EN 301 549, ADA, Section 508) einhalten müssen.

Farbenblindheits-Simulator: Für alle gestalten

Etwa 350 Millionen Menschen weltweit sind farbenblind. Der Simulator zeigt Ihre Farben so, wie sie von allen acht Arten von Farbenblindheit wahrgenommen werden: Protanopie, Deuteranopie, Tritanopie, Achromatopsie und ihre mäßigen Varianten. Es ist der einzige Weg zu überprüfen, ob Ihre Oberfläche wirklich barrierefrei ist.

Verlaufsgenerator mit fortgeschrittener Interpolation

Erstellen Sie lineare, radiale und konische Verläufe mit bis zu 10 Farbverlaufspunkten. RGB-Interpolation erzeugt klassische Verläufe; HSL bietet sanftere Übergänge; LAB und OKLCH erzeugen wahrnehmungsgleichmäßige Verläufe ohne sichtbare Streifen. Der CSS-Code wird automatisch generiert und ist mit einem Klick kopierbar.

Farbmischer: Farben mischen

Mischen Sie zwei Farben mit einem konfigurierbaren Verhältnis (von 0/100 bis 100/0) in vier Modi: RGB (additives Mischen), HSL (Farbtonrotation), LAB (Wahrnehmungsraum) und OKLCH (am natürlichsten). Es ist das ideale Werkzeug zum Erstellen von Zwischentönen, Schatten und individuellen Schattierungen.

ΔE-Farbdifferenz: Professionelle Präzision

Für Designer und Druckprofis ist die Berechnung der Farbdifferenz (Delta E) unverzichtbar. Das Werkzeug zeigt ΔE76, ΔE94 und ΔE2000 mit einer textlichen Interpretation: Unmerklich (ΔE < 1), Mit Aufwand wahrnehmbar (1–2), Verschieden (2–10), Sehr verschieden (10–50) und Hoher Kontrast (50+).

Color Playground: Testen Sie in realen Bedingungen

Der Playground zeigt Ihre Farbe auf echten Interface-Komponenten: Buttons, Karten, Badges, Eingabefelder, Warnungen, Links und Text. Sie sehen sofort, ob Ihre Farbe als Hintergrund-, Button- oder Textfarbe funktioniert — mit Barrierefreiheits-Scores in Echtzeit.

Entwickler-Export: 10 Code-Formate

Generieren Sie Code in Ihrer Sprache: CSS Variables, SCSS, Tailwind-Konfiguration, JSON-Design-Tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) und Vue. Jeder Export umfasst Varianten (50–950) und Rollen (Primär, Sekundär, Akzent usw.).

Für wen ist es gedacht?

UI/UX-Designer, die Paletten und Design-Systeme erstellen; Front-End-Entwickler, die Farben in CSS, Tailwind oder SCSS integrieren; Grafikdesigner, die Farbpaletten aus Fotos extrahieren; Barrierefreiheitsteams, die WCAG-Kontraste prüfen; Druckprofis, die ΔE berechnen; und jede Kreativperson, die Farben professionell erkunden möchte.