Wähle eine Farbe und erhalte sofort ihre HEX-, RGB-, CMYK-, HSV- und HSL-Werte

Ein Color Picker ist ein kostenloses Online-Tool, mit dem du eine Farbe auswählst und ihren Wert sofort in fünf Formaten abliest: HEX, RGB, CMYK, HSV und HSL. Wähle eine Farbe in der Palette oder füge einen HEX- oder RGB-Wert ein, und kopiere das gewünschte Format mit einem Klick. Ein WCAG-Kontrast-Checker ist ebenfalls dabei, damit du eine Textfarbe gegen eine Hintergrundfarbe testest und die Barrierefreiheit bestätigst. Alles läuft in deinem Browser, kostenlos und ohne Registrierung.

HEX

RGB

CMYK

HSV

HSL

Color

WCAG contrast checker

Check that a text color is readable on a background color. WCAG 2.1 requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.

Text color (HEX)

Background color (HEX)

Contrast ratio

Sample text: check how readable this is

AA normal text (4.5:1)
AA large text (3:1)
AAA normal text (7:1)
AAA large text (4.5:1)

So nutzt du den Color Picker

Wähle eine Farbe in der Palette, oder tippe einen HEX- oder RGB-Wert ein, um seine Farbe zu sehen.
Kopiere jedes der fünf Formate mit dem Kopieren-Button daneben.
Scrolle zum Kontrast-Checker, um eine Textfarbe gegen eine Hintergrundfarbe zu testen und zu sehen, welche WCAG-Stufen sie besteht.

Welches Farbformat solltest du nutzen?

Format	Am besten für	Beispiel
HEX	Websites, CSS, Design-Tools	#f4ae00
RGB	Bildschirme, CSS mit Transparenz (rgba)	rgb(244, 174, 0)
CMYK	Druck: Broschüren, Verpackungen, Visitenkarten	0%, 29%, 100%, 4%
HSV	Farbwähler in Grafiksoftware	hsv(43°, 100%, 96%)
HSL	CSS-Paletten: hellere und dunklere Töne desselben Farbtons	hsl(43°, 100%, 45%)

Typische Einsätze

Eine Markenfarbe treffen, wenn du nur einen HEX-Code vom Designer hast.
Eine Webfarbe in CMYK umwandeln, bevor Dateien in den Druck gehen.
Prüfen, dass Button- und Fließtext die WCAG-2.1-Kontrastanforderung von 4.5:1 erfüllen.
Eine CSS-Palette bauen: Farbton und Sättigung behalten, nur die HSL-Helligkeit ändern.

FAQ zum Color Picker

Ist der Color Picker kostenlos?

Ja, der Color Picker und der Kontrast-Checker sind komplett kostenlos, ohne Registrierung und ohne Nutzungslimits.

Was ist der Unterschied zwischen HEX, RGB, CMYK, HSV und HSL?

HEX und RGB beschreiben dieselben Bildschirmfarben in verschiedenen Schreibweisen: HEX ist die kompakte Form für CSS und Design-Tools, RGB listet die Rot-, Grün- und Blauwerte. CMYK beschreibt Farbdeckung für den Druck. HSV und HSL beschreiben eine Farbe über den Farbton, praktisch für Paletten und Helligkeitsanpassungen.

Wie wandle ich HEX in RGB um?

Füge den HEX-Wert ins HEX-Feld ein, und der RGB-Wert erscheint sofort im RGB-Feld. Die Umwandlung funktioniert auch andersherum: Tippe einen RGB-Wert ein und du bekommst den HEX-Code.

Welches Kontrastverhältnis brauche ich für Barrierefreiheit?

WCAG 2.1 Stufe AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text (ab 18pt, oder 14pt fett). Stufe AAA verlangt 7:1 für normalen Text. Der Kontrast-Checker auf dieser Seite zeigt, welche Stufen dein Farbpaar besteht.

Kann ich eine Bildschirmfarbe in eine Druckfarbe umwandeln?

Ja, das Tool zeigt den CMYK-Wert jeder gewählten Farbe. Beachte, dass die CMYK-Umrechnung eine Näherung ist: Die endgültige Druckfarbe hängt auch vom Druckerprofil und vom Papier ab, fordere bei markenkritischen Farben immer einen Proof an.

Color Picker