Selbststarter

Color Picker

Farbe aus Bild herausfinden – HEX, RGB, HSL, OKLCH und Tailwind-Code mit einem Klick. 100% clientseitig.

Bild hierher ziehen oder klicken zum Auswählen

PNG, JPG, WebP, GIF, SVG werden unterstützt

Tipp: Bild aus Zwischenablage mit Cmd+V / Strg+V einfügen

Aktuelle Farbe

Lade ein Bild und klicke auf einen Pixel, um die Farbe auszulesen.

Gespeicherte Farben

Bleibt in dieser Browser-Session erhalten. Pin eine Farbe über den Button oben.

Das Wichtigste auf einen Blick

  • Lade ein Bild hoch oder füge eine URL ein – Klick auf Pixel zeigt sofort den Farbcode.
  • Output in 5 Formaten: HEX, RGB, HSL, OKLCH und passende Tailwind-CSS-Klasse.
  • Auto-Palette extrahiert die 5–8 dominantesten Farben aus dem Bild automatisch.
  • 100% clientseitig – dein Bild wird nicht hochgeladen oder gespeichert.
  • Speichere Lieblingsfarben in der aktuellen Session zum schnellen Wiederfinden.

Ein Color Picker liest Farben aus Bildern aus. Du lädst ein Foto, einen Screenshot oder ein Logo hoch, klickst auf den gewünschten Pixel und bekommst sofort den Farbcode in deinem Wunschformat. Genutzt wird das ständig: bei der Brand-Recherche („welches Blau nutzt diese Webseite?“), beim Reverse-Engineering von Konkurrenz-Designs, beim Ableiten einer Farbpalette aus einem Inspirations-Foto oder beim Übernehmen einer exakten Farbe aus einem Mockup ins eigene CSS. Dabei sind heute mehrere Formate relevant: HEX (Standard im Web), RGB (Bildschirm-nah), HSL (intuitiv für Designer) und seit 2023 zunehmend OKLCH (perceptually uniform, ideal für Light/Dark-Themes).

Was unser Tool besonders macht: Dein Bild verlässt nie den Browser – die komplette Verarbeitung läuft clientseitig per Canvas-API. Ein Klick auf einen Pixel liefert sofort fünf Format-Outputs (HEX, RGB, HSL, OKLCH und die nächstgelegene Tailwind-Klasse), jeweils mit Copy-Button. Eine automatische Auto-Palette extrahiert die acht dominantesten Farben des Bilds via Histogramm-Quantization – perfekt als Startpunkt für Brand-Paletten oder Themenfarben. Lieblingsfarben pinnst du in der aktuellen Browser-Session, Drag&Drop, File-Picker, URL und Clipboard-Paste sind alle als Eingabe verfügbar.

Hintergrund & Anwendungen

Farbformate im Überblick

  • HEX: Sechsstelliger Code wie #2596be – Standard in CSS und Webdesign.
  • RGB: Rot, Grün, Blau (0–255) – Grundlage für digitale Bildschirme.
  • HSL: Hue, Saturation, Lightness – intuitiv für Designer (z. B. Helligkeit anpassen).
  • OKLCH: Modernes Format, perceptually uniform – seit 2023 in CSS unterstützt.

Wann brauche ich einen Color Picker?

  • Brand-Recherche: Welche Farben nutzt eine Webseite oder ein Logo wirklich?
  • Foto-Inspiration: Farbpalette aus einem Foto für ein neues Design ableiten.
  • Webdesign: Exakte Farbe aus einem Mockup oder Referenz-Bild in CSS übernehmen.
  • Reverse-Engineering: Farben einer Konkurrenz-Webseite identifizieren und vergleichen.

Auto-Palette

  • Wie es funktioniert: Algorithmus sampelt das Bild und extrahiert die häufigsten Farb-Cluster (Histogramm-Quantization).
  • Anzahl: Bis zu 8 dominante Farben werden zurückgegeben, sortiert nach Häufigkeit.
  • Sortierung: Häufigste Farbe zuerst – große Flächen dominieren das Ergebnis.
  • Use-Case: Schneller Start für Brand-Paletten, Themenfarben oder Mood-Boards.

Privacy und Performance

  • Clientseitig: Bild wird im Browser per Canvas verarbeitet, nie hochgeladen.
  • Schnell: Auch große Bilder werden in Millisekunden gesampelt – kein Backend nötig.
  • Offline-fähig: Sobald die Seite einmal geladen ist, funktioniert das Tool auch ohne Internet.
  • Keine Anmeldung: Kostenlos und ohne Account nutzbar.

Wie der Color Picker funktioniert

Der technische Ablauf vom Bild zur Farbe in deinem Code – komplett im Browser.

  1. 1Bild wird in ein HTML5-Canvas-Element geladen.
  2. 2Beim Klick wird die Pixel-Position relativ zum Canvas berechnet.
  3. 3Die Canvas-API liefert die RGBA-Werte des angeklickten Pixels.
  4. 4RGB wird in alle weiteren Formate konvertiert: HEX, HSL, OKLCH, Tailwind.
  5. 5Auto-Palette: Histogramm-Quantization fasst alle Pixel in Farb-Buckets zusammen.
  6. 6Top-Buckets werden als dominante Farben sortiert nach Häufigkeit zurückgegeben.
  7. 7Output ist in einem Klick kopierbar, alle Formate gleichzeitig sichtbar.

Farbformate im Vergleich

Wann nutzt du welches Format?

FormatBeispielVerwendungVorteile
HEX#2596beCSS, HTMLKurz, weit verbreitet, einfach zu kopieren.
RGBrgb(37, 150, 190)CSS, JavaScriptKlar verständlich, gut für Animationen.
HSLhsl(196, 67%, 44%)CSS, Designer-WorkflowIntuitiv für Helligkeit/Sättigung anpassen.
OKLCHoklch(0.65 0.12 234)Modernes CSSPerceptually uniform, seit 2023 in CSS.
Tailwindbg-sky-600 (Annäherung)Tailwind-ProjekteDirekte Klasse zum Einsetzen.

Häufig gestellte Fragen

Anleitung

  1. 1

    Bild laden

    Drag&Drop ins Tool, Datei-Auswahl per Klick, URL eingeben oder mit Cmd+V / Strg+V einfügen.

  2. 2

    Pixel anklicken

    Klick auf die gewünschte Stelle im Bild – die Lupe beim Hover hilft bei präziser Auswahl.

  3. 3

    Format wählen

    HEX, RGB, HSL, OKLCH oder die nächstgelegene Tailwind-Klasse mit einem Klick kopieren.

  4. 4

    Auto-Palette nutzen

    Die automatisch extrahierten Top-Farben des Bilds als Startpunkt für deine Palette übernehmen.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

  • #design
  • #css
  • #farben
  • #tools
  • #webdesign