Color Picker: Farbwähler

So nutzt du den Farbwähler

Zieh den Kreis auf dem großen Quadrat, um den Farbton zu wählen. Waagerecht ist die linke Seite grauer und die rechte lebhafter. Senkrecht ist oben heller und unten dunkler. Die bunte Leiste darunter ändert den Farbton, also die Grundfarbe: Rot, Gelb, Grün, Blau und wieder Rot. Bei jeder Bewegung aktualisieren sich die fünf Codes daneben.

Wenn du den Code schon hast, tippe ihn ins HEX-Feld, mit 3, 4, 6 oder 8 Stellen und mit oder ohne #. Der Kreis springt zu dieser Farbe. Zum Kopieren klickst du auf das Symbol neben dem gewünschten Format. Mit der Tastatur bewegen die Pfeiltasten den Kreis um 1 und mit Umschalt um 10.

Die Farbe aus einem Bild wählen

Klicke auf Aus einem Bild wählen, such eine Datei aus (PNG, JPEG, WebP, GIF oder was dein Browser öffnet) und klicke oder zieh über das Bild. Das Pixel unter dem Cursor wird zur aktuellen Farbe, mit allen Codes. So findest du den HEX-Wert des Blaus eines Logos, eines Figma-Screenshots oder eines Referenzfotos.

Zwei Details beeinflussen das Ergebnis. Bei JPEG mischt die Kompression benachbarte Pixel, die Farbe kann also ein oder zwei Punkte vom Original abweichen, und PNG ist besser, wenn es vorliegt. Und in einem Foto ist jedes Pixel ein einzelner Punkt: Die Farbe einer Wand schwankt von Pixel zu Pixel durch Licht und Rauschen. Klicke ein paar Stellen derselben Fläche an und nimm den mittleren Wert. Bilder mit mehr als 1.600 Pixeln auf der langen Seite werden vor der Anzeige verkleinert, was feine Details ebenfalls glättet.

Pipette für die Farbe von jeder Stelle des Bildschirms

Die Schaltfläche Pipette nutzt die EyeDropper-API: Die Seite öffnet die Lupe des Browsers und erhält den HEX-Wert des Pixels, auf das du klickst, auch außerhalb des Tabs, auf einer anderen Website, in einer Design-App oder auf dem Desktop. Laut MDN (Daten geprüft am 5. November 2026) funktioniert sie in Chrome 95, Edge 95 und Opera 81 am Desktop und fehlt in Firefox, Safari und mobilen Browsern. Esc bricht ab.

Wo die API fehlt, erscheint die Schaltfläche gar nicht, und dir bleiben die beiden anderen Wege: das Farbfeld und das Bild. Eine Abkürzung für jeden Browser: Mach einen Screenshot von dem, was du messen willst, und öffne die Datei über Aus einem Bild wählen.

Die fünf Farbformate

Alle beschreiben dieselbe Farbe. Der Unterschied liegt darin, was sich mit dem jeweiligen Format leicht anpassen lässt.

HSL und HSV wirken wie Geschwister, verhalten sich aber anders. Bei HSV ist eine Helligkeit von 100 % die lebhafteste Farbe und 0 % ist Schwarz. Bei HSL ist eine Helligkeit von 50 % die reine Farbe, 100 % ist Weiß und 0 % ist Schwarz. Deshalb steht dasselbe Blau als hsl(229 100% 66%) und als hsv(229, 68%, 100%) da.

Das CMYK hier ist die direkte mathematische Umrechnung aus RGB. Eine echte Druckerei arbeitet mit einem Farbprofil (etwa FOGRA39 oder SWOP), und das Ergebnis ändert sich mit Papier und Farbe. Nimm den Wert als Ausgangspunkt und stimme ihn mit der Druckerei ab.

Einen Farbwähler im eigenen Code nutzen

Wenn du einen Farbwähler in einer eigenen Seite brauchst, bringt HTML schon einen mit. Das input type=color öffnet den Farbwähler des Systems und liefert den Wert als HEX in Kleinbuchstaben, im Format #rrggbb und ohne Transparenz. Das Ereignis input feuert bei jeder Bewegung, change erst, wenn die Person den Wähler schließt.

<input type="color" id="cor" value="#5271ff" />

<script>
  const input = document.getElementById("cor");
  input.addEventListener("input", () => {
    document.body.style.backgroundColor = input.value; // "#5271ff"
  });
</script>

Um eine Farbe von außerhalb der Seite zu holen, reichen mit EyeDropper wenige Zeilen. open() muss aus einem Klick aufgerufen werden und lehnt das Promise ab, wenn die Person Esc drückt, daher das try/catch:

if ("EyeDropper" in window) {
  button.addEventListener("click", async () => {
    try {
      const { sRGBHex } = await new EyeDropper().open();
      console.log(sRGBHex); // "#5271ff"
    } catch {
      // a pessoa apertou Esc
    }
  });
}

Die CSS-Syntax all dieser Formate steht in der W3C-Spezifikation CSS Color 4.

Zum Umrechnen und für mehr

Du brauchst den Wert in anderer Schreibweise, mit Transparenz oder mit erklärter Rechnung? Nutze den HEX-zu-RGB-Konverter oder den RGB-zu-HEX-Konverter. Beide öffnen sich mit der Farbe, die du hier gewählt hast.