Was ist ein Farbwähler?

Mit einem Farbwähler kannst du eine Farbe nach Augenmaß auswählen, statt Zahlen einzugeben. Die meisten Design-Apps sind gleich aufgebaut: Ein Farbtonregler wählt die Grundfarbe aus dem Regenbogen aus, und ein danebenliegendes Quadrat legt fest, wie stark dieser Farbton ausgeprägt ist (Sättigung, von links nach rechts) und wie hell er ist (von oben nach unten). Dieser Aufbau entspricht dem HSV-Farbmodell, und jede Farbe, die ein Bildschirm anzeigen kann, hat darin einen Platz.

Beschreibung des Tools

Ziehe über das Quadrat und den Farbtonregler, um eine Farbe zu finden, oder gib eine Farbe ein, die du bereits hast, beziehungsweise füge sie in HEX, RGB, HSL oder einem anderen Format ein. In Chrome und Edge wählt die Pipettenschaltfläche eine Farbe an einer beliebigen Stelle auf deinem Bildschirm aus, auch außerhalb des Browsers. Lege die Deckkraft für durchscheinende Farben fest und kopiere das Ergebnis im gewünschten Format: HEX für CSS und die meisten Design-Tools, RGB und HSL für CSS, HSV für Design-Apps, OKLCH für modernes CSS und CMYK als Ausgangspunkt für den Druck.

Funktionen

  • Quadrat für Sättigung und Helligkeit mit Farbtonregler, bedienbar per Maus, Touch oder Tastatur
  • Bildschirmpipette in Chrome und Edge
  • Farben in HEX, RGB, HSL, HWB, CMYK und anderen Formaten eingeben oder einfügen
  • Deckkraft, angezeigt auf einem Transparenzraster
  • HEX-, RGB-, HSL-, HSV-, OKLCH- und CMYK-Werte, jeweils direkt kopierbar
  • Weitere Formate wie HWB, LAB, LCH und XYZ in der Formatliste der ausgewählten Farbe
  • Läuft in deinem Browser

Funktionsweise

Das Tool speichert die Farbe als Farbton, Sättigung und Wert, damit der Farbton an seiner Position bleibt, wenn du durch Ziehen Weiß, Schwarz oder Grau auswählst. Die anderen Formate werden daraus berechnet: HEX und RGB werden auf ganze Zahlen von 0 bis 255 gerundet, HSL und HSV auf ganze Grad- und Prozentwerte, und OKLCH wird über den sRGB-Farbraum umgerechnet. Liegt die Deckkraft unter 100 %, erhält HEX ein viertes Ziffernpaar und die CSS-Formate einen Alphawert. CMYK hat keinen Alphawert und wird ohne Druckerprofil einfach umgerechnet.

Tipps

  • Die eigene Deckkraft einer eingefügten Farbe, wie bei rgba(), wird nicht übernommen: Lege sie im Feld „Deckkraft“ fest.
  • Klicke auf das Quadrat oder den Regler und bewege die Auswahl mit den Pfeiltasten in Schritten von 1 % oder mit der Umschalttaste in Schritten von 10 %.
  • Für Farben in einem Foto oder einer Screenshot-Datei verwende den Bildfarbwähler, der das Bild selbst ausliest.
  • Frage deine Druckerei nach den zu verwendenden CMYK-Werten, da dieselbe Farbe auf verschiedenen Druckmaschinen und Papieren unterschiedlich gedruckt werden kann.