Was ist Farbwähler?

Wähle eine beliebige Farbe visuell aus und erhalte die Hex-, RGB- und HSL-Werte. Klicke oder ziehe, um den richtigen Farbton zu finden, und kopiere den Code.

Ziehe im Sättigungs/Helligkeits-Quadrat, um den Ton zu ändern, schiebe den Hue-Balken, um die Farbfamilie zu wechseln. Das Tool gibt Hex-, RGB- und HSL-Werte aus, die du mit einem Klick kopierst. Tippst du einen Hex-Wert ins Feld, springt der Punkt genau dorthin — praktisch, um eine bestehende Markenfarbe nachzubessern statt von einem zufälligen Ton zu starten.

Anleitung

1. Klicke auf den Farbbereich oder ziehe den Selector, um deine Farbe zu finden
2. Feinjustierung mit dem Farbtonregler und optionaler Deckkraftsteuerung
3. Kopiere den Hex-, RGB- oder HSL-Wert mit einem Klick

Wann verwenden

• Akzentfarben für ein Website-CSS auswählen, ohne ein Design-Programm zu öffnen.
• Einen Hex-Wert aus dem Markenhandbuch in HSL für ein Design-System umrechnen.
• Eine kleine Palette benachbarter Töne aufbauen, indem du den Hue-Slider verschiebst.

Ergebnis

Wähle ein warmes Orange: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

Häufige Fragen

Was ist der Unterschied zwischen HSL und HSB (HSV)?

HSL geht von Schwarz über die reine Farbe bei 50% Helligkeit nach Weiß — gut für symmetrische Tints und Shades. HSB (Photoshop) geht von Schwarz zur reinen Farbe bei 100% Helligkeit, was näher am Mischen mit Farbtopf liegt.

Warum sehen Bildschirmfarben anders aus als der Druck?

Der Bildschirm nutzt RGB (additives Licht), der Druck CMYK (subtraktive Druckfarbe). Besonders kräftige Grüns und Elektrobläue haben in CMYK kein exaktes Pendant. Hol dir vor Freigabe immer einen Proof im Zielmedium.

Sind die Hex-Codes standardmäßig WCAG-konform?

Nein — Barrierefreiheit hängt vom Farbpaar ab, nicht von einer einzelnen Farbe. Kombiniere Vordergrund-Hex mit dem Hintergrund und prüf das Kontrastverhältnis: mindestens 4,5:1 für Fließtext, 3:1 für große Schrift.

Wie greife ich eine Farbe ab, die schon auf dem Bildschirm ist?

Klick auf Vom Bildschirm aufnehmen, und die Pipette greift jeden beliebigen Pixel auf deinem Display ab — der exakte Hex-Wert landet direkt im Picker, sodass du Sättigung, Helligkeit oder Transparenz nachziehen kannst. (Die Pipetten-Schaltfläche erscheint nur, wo das unterstützt wird; andernfalls lies den Hex-Wert mit der Farbmessung deines Systems aus — Digital Color Meter unter macOS, PowerToys unter Windows, Chrome DevTools — und füg ihn ins Eingabefeld ein.)

Unterstützt der Picker Transparenz?

Ja. Unter dem Farbtonbalken stellt der Deckkraft-Schieber jedes Alpha zwischen 0 und 100% ein. Hinter der Vorschaufläche liegt ein Schachbrettmuster, damit die Durchsicht auf einen Blick erkennbar ist. Sobald Alpha unter 100% fällt, schalten die Kopierbuttons für RGB und HSL automatisch auf rgba() und hsla() um.

Ähnliche Tools