Color Picker

Farbwähler
HEX
R
G
B
A
Stopps
Bild hochladen
1background: #FF930F;
2background: linear-gradient(90deg, rgba(255, 147, 15, 1) 0%,rgba(255, 249, 91, 1) 100%)

Trendfarben

Farben wählen und ohne Umwege arbeiten

Wir haben Color Picker 2025 gebaut, weil uns schwere Apps und komplizierte Farbtools genervt haben. Als Frontend-Entwickler und Illustratoren brauchten wir etwas, womit wir schnell eine Farbe aufnehmen, kurz anpassen und weitermachen können. Aus einem internen Tool wurde rasch ein Favorit unter Kollegen – also haben wir es poliert und für alle ins Web gebracht. Keine Accounts, keine Lernkurve – Seite öffnen, Ton wählen und HEX-, RGB-, HSL- oder HSV-Codes kopieren.

Warum mögen Menschen unseren Color Picker?

Wenn Sie je vor einem Design saßen und sich gefragt haben, wie Sie den exakten Ton treffen, werden Sie die Schlichtheit von Color Picker schätzen. Die Oberfläche ist bewusst minimal gehalten:

  • Klicken – und die Farbe ist da – tippen Sie irgendwo in die Palette, und das Tool liefert sofort die nötigen Werte. Probe aus Foto oder Screenshot? Datei auf die Seite ziehen und die Pipette nutzen.
  • Verläufe leicht gemacht – seidig weiche Übergänge erzeugen, indem Sie Stopps in der Leiste hinzufügen und verschieben. Zwischen linear und radial wechseln, Winkel und Transparenz feinjustieren und CSS kopieren.
  • Keine Limits, keine Kosten – Color Picker läuft in jedem modernen Browser auf Desktop, Tablet oder Smartphone. Nichts zu installieren und kostenlos.
  • Erweiterungen bei Bedarf – unsere optionalen Chrome- und Edge-Erweiterungen bringen die Pipette direkt in den Browser, damit Sie Farben von jeder Seite aufnehmen und Ihre Historie mitnehmen können.

Was steckt drin

Pipette

Farben direkt aus hochgeladenen Bildern oder von allem auf dem Bildschirm aufnehmen; Datei auf die Seite ziehen und auf einen Pixel klicken, um seine Werte in mehreren Formaten zu sehen.

Format-Konvertierungen

Sofort zwischen HEX, RGB, HSL und HSV wechseln und Codes in CSS, Design-Programme oder Paletten-Tools kopieren.

Verlaufsgenerator

Lineare oder radiale Verläufe erstellen, indem Sie Stopps hinzufügen und verschieben, Winkel und Transparenz anpassen und das finale CSS kopieren.

Farbhistorie

Jede gewählte Farbe bleibt gespeichert, damit Sie später zurückkehren oder sie erneut verwenden können.

Browser-Erweiterungen

Optionale Erweiterungen für Chrome und Edge, um Farben von jeder Seite aufzunehmen und das Tool direkt aus der Toolbar zu öffnen.

Universeller Zugriff

Läuft in jedem modernen Browser; die Erweiterungen unterstützen mehrere Sprachen und werden regelmäßig aktualisiert.

Kostenlos und privat

Der Dienst ist kostenlos, und wir handeln nicht mit Ihren Daten.

Wofür ist es gut

Menschen nutzen Color Picker auf unterschiedliche Weise:

  • Designer und Produktteams greifen dazu, wenn sie Interfaces oder Markenpaletten skizzieren. Kombinationen erkunden und benötigtes CSS für Verläufe kopieren geht schnell.
  • Illustratoren und Künstler nutzen die Pipette, um sich von Fotos und Gemälden inspirieren zu lassen. Das Verlaufstool hilft, weiches Shading und Farbübergänge zu planen.
  • Frontend-Entwickler verlassen sich darauf, um konsistente Farbwerte über Projekte hinweg zu erzeugen. Die Erweiterung macht das Sampling aus bestehenden Sites mühelos.
  • Alle, die Barrierefreiheit prüfen können Farben in verschiedenen Modellen ansehen und die Transparenz anpassen, bis die Kontrastvorgaben erfüllt sind.

Erste Schritte

Ein Handbuch ist nicht nötig – hier eine kurze Übersicht:

  • Farbe wählen – klicken Sie irgendwo in die Palette. Sofort sehen Sie HEX-, RGB- und HSV-Werte. Feintuning per Regler für Farbton, Sättigung, Helligkeit und Transparenz.
  • Aus Bild aufnehmen – ziehen Sie eine Bilddatei auf die Seite oder wählen Sie eine aus. Klicken Sie auf das gewünschte Pixel, und die Farbcodes erscheinen.
  • Verlauf bauen – klicken Sie in die Verlaufsleiste, um Stopps hinzuzufügen und zu verschieben; wechseln Sie zwischen linear und radial. Winkel und Transparenz anpassen, bis es passt.
  • Kopieren und wiederverwenden – Ihre Farben und Verläufe werden automatisch gespeichert. Kopieren Sie Codes oder CSS und fügen Sie sie in Ihr Projekt ein – oder teilen Sie sie mit dem Team.

Color Picker online verwenden

CSS Gradient Generator

Erweiterungen für Chrome und Edge

Gefällt Ihnen die Idee, Farben direkt von einer Webseite zu „pflücken“? Color Picker – Eye Dropper für Chrome und Eyedropper – Color Picker für Edge machen genau das möglich. Sie fügen dem Browser eine kleine Schaltfläche hinzu, mit der Sie über ein Element fahren und dessen Farbton aufnehmen können. Sie können außerdem Bilder im Popup hochladen, Farben zu Verläufen kombinieren und CSS kopieren. Die Erweiterungen unterstützen mehrere Sprachen und werden regelmäßig aktualisiert.

Ein Community-Tool, dem Sie vertrauen können

Wir haben Color Picker entwickelt, weil wir ein einfaches Tool wollten, das „einfach funktioniert“. Es ist weiterhin ein Community-Projekt und wird immer kostenlos bleiben. Wir sammeln oder verkaufen Ihre Daten nicht. Wenn Sie es nützlich finden, helfen die Installation der Erweiterung oder das Teilen der Website dabei, dass mehr Menschen es entdecken.

Wie wir mit Daten umgehen, erfahren Sie auf unseren Seiten: Datenschutzrichtlinie , Nutzungsbedingungen.

👍 Color Picker | Farbwähler & Verläufe | Farbe aus Bild