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.