What is a color picker?

A color picker is a tool that lets you select a color visually and provides the corresponding color code in formats like HEX (#FF5733), RGB (255, 87, 51), and HSL (11, 100%, 60%). These codes are used in web design, graphic design, and programming.

What is the difference between HEX, RGB, and HSL?

HEX is a 6-digit hexadecimal code (#RRGGBB) commonly used in CSS. RGB defines color by Red, Green, Blue values (0-255). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), making it easier to adjust colors intuitively.

Is this color picker free?

Yes. 100% free, no signup, runs entirely in your browser. No data is sent to any server.

Farbwähler

Wählen Sie eine beliebige Farbe aus und erhalten Sie sofort HEX-, RGB- und HSL-Werte. Klicken Sie auf das Spektrum, passen Sie den Farbton an und kopieren Sie den Code.

HEX

RGB

HSL

CSS

Letzte Farben

Verwendung des Farbwählers

Wählen

Klicken Sie auf eine beliebige Stelle im Farbspektrum, um eine Farbe auszuwählen. Verwenden Sie den Farbtonregler unten, um den Basisfarbton zu ändern.

Lesen

Die HEX-, RGB-, HSL- und CSS-Werte werden sofort aktualisiert. Sie können auch einen HEX-Code direkt in das Eingabefeld eingeben.

Kopieren

Klicken Sie auf die Schaltfläche Kopieren neben jedem Wert, um ihn in die Zwischenablage zu kopieren. Letzte Farben werden im Versionsverlauf gespeichert.

Farbformat-Referenz

Format	Beispiel	Verwendet in	Vorteil
HEX	#FF5733	CSS, HTML, Design-Tools	Kompakt, weit verbreitet
RGB	rgb(255, 87, 51)	CSS, JavaScript, Photoshop	Entspricht der Farbdarstellung auf Bildschirmen
HSL	hsl(11, 100%, 60%)	CSS, moderne Design-Systeme	Intuitiv zu justieren (Farbton, Sättigung, Helligkeit)

Häufige Anwendungsfälle

Webentwicklung

Wählen Sie Farben für CSS-Stylesheets, React-Komponenten und Design-Tokens. Kopieren Sie HEX- oder HSL-Werte direkt in Ihren Code.

Grafikdesign

Finden Sie exakte Farbwerte für Figma, Photoshop, Illustrator oder Canva. Vergleichen Sie Markenfarben, indem Sie einen bekannten HEX-Code eingeben.

Präsentationen

Wählen Sie komplementäre Farben für PowerPoint oder Google Slides. Verwenden Sie das Spektrum, um Farben zu finden, die gut zusammenpassen.

Social Media

Passen Sie Markenfarben für Social-Media-Grafiken, Banner und Profilelemente an. Kopieren Sie CSS-Werte für webbasierte Design-Tools.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX ist ein 6-stelliger hexadezimaler Code (#RRGGBB), der in CSS und HTML verwendet wird. RGB definiert eine Farbe durch die Kanäle Rot, Grün und Blau (je 0–255). HSL verwendet Farbton (0–360°), Sättigung (0–100%) und Helligkeit (0–100%), was das Erstellen von Farbvariationen vereinfacht, indem eine Dimension nach der anderen angepasst wird.

Kann ich eine Farbe aus einem Bild wählen?

Dieses Tool bietet einen spektrumbasierenden Farbwähler. Um Farben aus einem vorhandenen Bild auszuwählen, verwenden Sie die integrierte EyeDropper-API Ihres Browsers (Chrome 95+) oder erstellen Sie einen Screenshot und vergleichen Sie die Farbe manuell mit dem Spektrum.

Ist dieser Farbwähler kostenlos?

Ja. 100% kostenlos, keine Anmeldung, keine Werbung. Das Tool läuft vollständig in Ihrem Browser — keine Daten werden an einen Server gesendet. Funktioniert offline, nachdem die Seite geladen wurde.