Color Picker – Farbwähler & Farbcode-Umrechner

Ja, der Color Picker ist kostenlos und ohne Anmeldung nutzbar. Alle Umrechnungen laufen direkt in deinem Browser: kein Upload, kein Logging, keine Server-Anfrage. Nur die Seiten-URL übernimmt die aktuelle Farbe als ?color=, damit du sie per Link teilen oder als Lesezeichen speichern kannst.

Klicke auf das farbige Feld neben „Nächste CSS-Farbe:“, wähle im Quadrat Sättigung und Helligkeit und darunter den Farbton. Der HEX-Code steht oben im Ergebnis und lässt sich per Kopieren-Button übernehmen. Kennst du die Farbe schon als RGB, HSL, HSV oder CMYK, tippst du den Wert in das passende Feld. Für eine Farbe aus einem Foto oder Screenshot nutzt du den Image Color Picker, denn dieses Tool liest keine Bilder. Zum Image Color Picker

Tippe oder füge den Wert in das RGB-Feld ein, zum Beispiel 24, 232, 136 oder rgb(24, 232, 136). Das HEX-Feld zeigt sofort #18e888, und HSL, HSV und CMYK aktualisieren sich mit. In die andere Richtung gibst du den HEX-Code mit oder ohne # in das HEX-Feld ein. Beide Schreibweisen beschreiben dieselbe Bildschirmfarbe: HEX schreibt die drei RGB-Werte von 0 bis 255 als Hex-Paare von 00 bis ff.

RGB beschreibt eine Farbe über die Lichtanteile Rot, Grün und Blau, wie sie ein Bildschirm mischt. HSL (Farbton/Sättigung/Helligkeit) und HSV (Farbton/Sättigung/Hellwert) sind zwei unterschiedliche Umrechnungen desselben RGB-Werts, die intuitiver für Menschen sind - HSL eignet sich gut, um eine Farbe aufzuhellen oder abzudunkeln, HSV, um sie mit einer Palette aus Farbton + Sättigung + Helligkeit zu mischen. CMYK (Cyan/Magenta/Gelb/Schwarz) beschreibt dagegen keine Lichtmischung, sondern Farbmischung mit Tinte/Toner, wie sie im Druck verwendet wird.

Der CMYK-Wert ist eine vereinfachte, rein rechnerische Näherung ohne Farbprofil und wird auf ganze Prozent gerundet. Er hilft dir, eine Bildschirmfarbe für den Druck einzuordnen, ersetzt aber keinen Druck-Proof mit dem Profil deiner Druckerei. Eingeben kannst du CMYK zum Beispiel als 0%, 61%, 72%, 0% oder cmyk(0%, 61%, 72%, 0%).

Ja. Mit dem Deckkraft-Regler stellst du 0 bis 100 % ein, das Ergebnis zeigt die Farbe dann als rgba() und hsla() zum Kopieren. Gibst du einen Wert mit Alpha ein, etwa einen 4- oder 8-stelligen HEX-Code (#rrggbbaa), rgba() oder hsla(), übernimmt der Regler diese Deckkraft, sobald du das Feld verlässt. Der HEX-Code im Ergebnis bleibt sechsstellig.

Es misst von 1:1 bis 21:1, wie gut sich zwei Farben, etwa Text und Hintergrund, voneinander abheben. Die Stufen im Tool: AAA ab 7:1, AA ab 4.5:1 für normalen Text und AA (Großtext) ab 3:1 für große oder fette Schrift. Der Color Picker zeigt das Verhältnis deiner Farbe gegen Schwarz und gegen Weiß. Für beliebige Vorder- und Hintergrundfarben nutzt du den Contrast Checker. Zum Contrast Checker

Neben dem Farbfeld zeigt das Tool die nächste CSS-Farbe. Dafür berechnet es den euklidischen Abstand deiner Farbe zu jeder benannten CSS-Farbe im RGB-Raum und nennt die nächstgelegene, zum Beispiel tomato für #ff6347. Ist der Treffer nicht exakt, steht „ähnlich“ dahinter. Den Namen kannst du kopieren und in CSS statt des HEX-Codes verwenden, bei „ähnlich“ ist er allerdings nur eine Näherung.