Farbwähler
Color Picker ist ein kostenloses Online-Tool, mit dem Sie jede Farbe visuell auswählen und ihre genauen Werte in den Formaten HEX, RGB, HSL, HSV und CMYK erhalten können. Verwenden Sie die intuitive Sättigungs-/Helligkeitsbox in Kombination mit dem Farbtonregler, um die perfekte Farbe zu finden, oder geben Sie einen bekannten Wert ein, um ihn angezeigt zu bekommen. Das Tool zeigt Echtzeitvorschauen der ausgewählten Farbe an, zeigt komplementäre und analoge Farben und führt einen Verlauf der zuletzt ausgewählten Farben. Perfekt für Designer, Entwickler und alle, die präzise Farbwerte für Webdesign, digitale Kunst, UI-Entwicklung oder jedes kreative Projekt benötigen.
Was ist
Der Farbwähler bietet eine interaktive Oberfläche zur visuellen Auswahl von Farben, ohne dass Sie spezifische Zahlenwerte kennen müssen. Es ist das digitale Äquivalent zu einem physischen Farbkreis oder einer Farbmustertabelle. Die Oberfläche des Farbwählers besteht aus: - Einem 2D-Sättigungs-/Helligkeitsfeld: Die horizontale Achse steuert die Sättigung (grau bis reine Farbe), die vertikale Achse die Helligkeit (schwarz bis volle Farbe) - Einem Farbtonschieber: Ein vertikaler oder horizontaler Streifen, der das gesamte Spektrum (0–360 Grad) anzeigt - Einem Deckkraft-/Alphaschieber: Steuert die Transparenz von 0 (unsichtbar) bis 1 (vollständig deckend) - Eingabefeldern: Direkte Eingabe von HEX-, RGB-, HSL- oder anderen Werten mit automatischer Umrechnung - Farbvorschau: Ein großes Farbfeld, das die aktuell ausgewählte Farbe vor verschiedenen Hintergründen zeigt Verwendung der einzelnen Komponenten: - Klicken oder ziehen Sie im Sättigungs-/Helligkeitsfeld, um die Intensität und Helligkeit der Farbe zu wählen - Ziehen Sie den Farbtonschieber, um die Grundfarbe (Rot, Orange, Gelb, Grün, Blau, Lila) auszuwählen - Stellen Sie den Alpharegler für halbtransparente Farben ein - Geben Sie einen Hex-Code direkt in das HEX-Eingabefeld ein, um einen genauen Wert zu erhalten - Klicken Sie auf einen beliebigen Wert, um ihn in die Zwischenablage zu kopieren Angezeigte Farbbeziehungen: - Komplementärfarbe (gegenüberliegend im Farbkreis) - Split-komplementäre Farben - Analoge Farben (benachbarte Farbtöne) - Triadische Farben (gleichmäßig verteilt) Verlaufsfunktion: Das Tool speichert automatisch die letzten 10 ausgewählten Farben im Browser-Speicher, sodass Sie frühere Auswahlen erneut aufrufen können, ohne sie neu auswählen zu müssen. Dies ist besonders nützlich, wenn Sie mehrere Farben über verschiedene Sitzungen hinweg vergleichen möchten.
Wie zu verwenden
- Verwenden Sie das 2D-Sättigungs-/Werte-Feld, um Ihre Farbe auszuwählen. Bewegen Sie sich horizontal, um die Sättigung anzupassen (von gedämpftem Grau zu lebendiger Farbe) und vertikal, um die Helligkeit anzupassen (von dunkel zu hell). Ein Fadenkreuz-Indikator zeigt Ihre aktuelle Position an.
- Ziehen Sie den Farbton-Schieberegler (Regenbogenstreifen rechts), um den Basisfarbton auszuwählen. Dadurch ändert sich die gesamte Farbfamilie, die im Sättigungs-/Wertfeld angezeigt wird. Klicken Sie direkt auf einen beliebigen Farbton, um sofort dorthin zu springen.
- Feinjustieren Sie die ausgewählte Farbe mit den Eingabefeldern. Geben Sie direkt einen Hex-Code ein, wenn Sie ihn genau kennen, oder passen Sie einzelne RGB-/HSL-Werte mit den Zahleneingaben und Pfeiltasten für präzise Steuerung an.
- Passen Sie den Alpha-/Transparenzregler an, wenn Sie eine halbtransparente Farbe benötigen. Der karierte Hintergrund hinter der Vorschau zeigt die Transparenz visuell an. Die RGBA- und 8-stelligen HEX-Ausgaben werden aktualisiert, um den Alphawert widerzuspiegeln.
- Sehen Sie automatisch generierte Komplementär-, Analog- und Triadenfarben unterhalb des Farbwählers an. Klicken Sie auf eine beliebige generierte Farbe, um sie als aktive Farbe zum Bearbeiten oder Kopieren auszuwählen.
- Wählen Sie Ihre Farbe aus dem Verlauf, wenn Sie kürzlich eine verwendet haben. Die letzten 10 Farben werden im Browser-Speicher gespeichert, um einen einfachen Zugriff zu ermöglichen. Klicken Sie auf ein beliebiges Verlaufsfarbfeld, um es erneut auszuwählen.
- Kopieren Sie den ausgewählten Farbwert in Ihrem bevorzugten Format mit den Kopierschaltflächen neben jedem Format (HEXA, RGB, HSL). Der kopierte Wert gelangt direkt in Ihre Zwischenablage zum Einfügen in CSS, Design-Tools oder Code.
Beispiele
Eingabe: Bildschirmposition: x=450, y=320
Prozess: Pixel lesen → RGB-Extraktion → HEX-Konvertierung
Ergebnis: HEX: #2563EB | RGB(37, 99, 235)
Eingabe: Natürliche Farbe: Wählen Sie Himmelblau aus dem Bild
Prozess: Bildabtastung → Durchschnittliche Pixelfarbe
Ergebnis: HEX: #87CEEB | RGB(135, 206, 235)
Verwandte Suchen
Leute suchen auch nach: Farbwähler, Farbauswahl, Farbkreis, Farbauswähler.
FarbwählerFarbauswahlFarbkreisFarbauswähler
Häufig gestellte Fragen
Wie wähle ich eine bestimmte Hex-Farbe aus, die ich bereits kenne?
Geben Sie einfach den Hex-Code in das HEX-Eingabefeld ein oder fügen Sie ihn ein. Er wird sofort analysiert und im Farbwähler angezeigt. Verwenden Sie für 8-stellige Hex-Codes (mit Alpha) die RGBA-Eingabe oder geben Sie den Code inklusive des Alpha-Anteils ein (#RRGGBBAA). Der Farbwähler aktualisiert automatisch alle anderen Formatwerte und die visuelle Auswahl.
Kann ich den Farbwähler mit meiner Designsoftware wie Figma oder Sketch verwenden?
Ja. Wählen Sie mit dem Werkzeug eine Farbe aus und kopieren Sie den Hex- oder RGBA-Wert. Fügen Sie ihn dann direkt in Figma, Sketch, Adobe XD oder eine andere Designsoftware ein, die Hex-/RGB-Werte akzeptiert. Fügen Sie ihn für Sketch in das Hex-Feld des Farbwählers ein. Für Figma fügen Sie ihn in die Hex-Eingabe des Designpanels ein. RGB- und HSL-Werte können ebenfalls verwendet werden, wenn Ihr Workflow diese Formate bevorzugt.
Was ist der HSV und wie unterscheidet er sich von HSL?
HSV (Farbton, Sättigung, Wert) und HSL (Farbton, Sättigung, Helligkeit) sind beide zylindrische Farbmodelle, unterscheiden sich jedoch darin, wie sie die Helligkeit definieren. Bei HSV steuert der Wert (Value), wie hell die Farbe bei voller Sättigung ist. Bei HSL steuert die Helligkeit (Lightness) den Mittelpunkt zwischen Schwarz und Weiß. Reine Farbtöne erscheinen bei HSV bei V=100%, bei HSL jedoch bei L=50%. HSL ist im Allgemeinen intuitiver für das Erstellen von hellen Tönungen (L erhöhen) oder dunklen Schattierungen (L verringern). Das Werkzeug zeigt beide an, um Kompatibilität mit verschiedenen Workflows zu gewährleisten.
Funktioniert der Farbwähler mit Bildschirmfarben (Pipette)?
Das Werkzeug funktioniert mit der systemeigenen Pipette, wenn Ihr Browser die EyeDropper-API unterstützt. Klicken Sie auf das Pipettensymbol und Ihr Cursor verwandelt sich in eine Lupe – klicken Sie auf ein beliebiges Pixel auf Ihrem Bildschirm, um seine Farbe zu erfassen. So werden Farben aus jeder Anwendung, Webseite oder jedem Desktop-Element erfasst. Wenn Ihr Browser die EyeDropper-API nicht unterstützt, können Sie Drittanbieter-Programme zur Bildschirmfarbauswahl verwenden und den Hex-Wert manuell eingeben.
Warum sehen meine Farben auf dem Bildschirm anders aus als im Druck?
Auf dem Bildschirm angezeigte Farben verwenden RGB (Rot, Grün, Blau), während der Druck CMYK (Cyan, Magenta, Gelb, Schwarz) verwendet. Diese Farbräume haben unterschiedliche Gamuts – einige helle Bildschirmfarben haben kein genaues CMYK-Äquivalent. Das Werkzeug gibt CMYK-Werte als Referenz an, aber für genaue Druckfarben verwenden Sie die Pantone-Farbsystemwerte oder konsultieren Sie die Farbprofile Ihres Druckers. Bildschirmhelligkeit, Monitorkalibrierung und Umgebungsbeleuchtung beeinflussen ebenfalls, wie Farben auf verschiedenen Geräten erscheinen.