Farbauswahl-Tool - Konvertierung von RGB, Hex, CMYK & HSV Farbcodes

Was ist ein Farbwähler?

Ein Farbwähler ist ein Werkzeug zum Auswählen einer Farbe und zum Auslesen ihres Werts in verschiedenen Farbformaten. Dieses Tool zeigt eine Farbe gleichzeitig in RGB (Rot, Grün, Blau), Hex, CMYK (Cyan, Magenta, Gelb, Schwarz) und HSV (Farbton, Sättigung, Wert) an. Wird ein Format geändert, werden die anderen sofort aktualisiert.

So verwenden Sie den Farbwähler

Es gibt drei Möglichkeiten, eine Farbe auszuwählen.

Klicken Sie an eine beliebige Stelle im Spektrumsfeld, um Farbton und Sättigung auszuwählen. Die horizontale Position legt den Farbton fest, also die Farbfamilie, etwa Rot oder Blau. Die vertikale Position legt die Sättigung fest, also wie kräftig oder blass die Farbe wirkt. Ein Schieberegler unter dem Spektrum steuert die Helligkeit – von Schwarz links bis zur vollen Helligkeit rechts.

Auch die Eingabe exakter Werte ist möglich. Das Hex-Feld akzeptiert Codes wie #2ECC71, mit oder ohne #. Die RGB-Felder akzeptieren jeweils eine ganze Zahl von 0 bis 255. Die CMYK-Felder akzeptieren jeweils eine ganze Zahl von 0 bis 100. Ein Wert oberhalb des zulässigen Bereichs wird auf den Höchstwert begrenzt.

Neben jedem Farbformat befindet sich eine Kopierschaltfläche. Durch Klicken wird der betreffende Wert in die Zwischenablage kopiert und eine kurze Meldung „Kopiert!“ angezeigt.

Farbmodelle erklärt

RGB

RGB beschreibt eine Farbe als Mischung aus rotem, grünem und blauem Licht – denselben drei Farben, die ein Bildschirm verwendet, um jedes Pixel zu erzeugen. Jeder Kanal reicht von 0 bis 255. RGB(255, 0, 0) ist reines Rot, und RGB(0, 0, 0) ist Schwarz. Browser, Apps und Videoprogramme verwenden RGB, weil es der Funktionsweise von Bildschirmen entspricht.

Hex

Ein Hex-Code schreibt eine RGB-Farbe im Zahlensystem zur Basis 16 statt zur Basis 10. #2ECC71 besteht aus drei Zeichenpaaren: 2E für Rot, CC für Grün und 71 für Blau. Jedes Paar reicht von 00 bis FF. Hex-Codes sind im Webdesign üblich, weil CSS sie direkt akzeptiert und sie kürzer einzugeben sind als rgb(). Es gibt auch eine Kurzform mit drei Zeichen: #0F0 bedeutet dasselbe wie #00FF00.

CMYK

CMYK wird zum Drucken verwendet. Ein Drucker erzeugt Farben, indem er Cyan-, Magenta-, Gelb- und Schwarzfarbe auf weißes Papier aufträgt. Daher funktioniert dieses Modell durch das Abziehen von Licht statt durch dessen Addition. Jeder Kanal wird als Prozentsatz von 0 bis 100 angegeben. CMYK(0, 0, 0, 0) bedeutet, dass überhaupt keine Farbe aufgetragen wird und das weiße Papier sichtbar bleibt. CMYK kann nicht jede Farbe reproduzieren, die ein Bildschirm anzeigen kann. Einige helle Bildschirmfarben, insbesondere bestimmte Blau- und Grüntöne, wirken gedruckt matter.

HSV

HSV beschreibt Farbton, Sättigung und Wert getrennt voneinander. Der Farbton bezeichnet die Farbfamilie und wird in Grad von 0° bis 360° angegeben. Dabei steht 0° für Rot, 120° für Grün und 240° für Blau. Die Sättigung beschreibt, wie kräftig die Farbe ist, von 0 % (Grau) bis 100 % (voll gesättigt). Der Wert beschreibt die Helligkeit, von 0 % (Schwarz) bis 100 % (volle Helligkeit). HSV entspricht weitgehend der natürlichen Art, wie Menschen Farben beschreiben. Deshalb basieren das Spektrum und der Helligkeitsregler dieses Tools darauf.

Formel zur Umrechnung von RGB in Hex

Jeder RGB-Kanal, eine Zahl von 0 bis 255, wird in eine zweistellige Hexadezimalzahl umgewandelt. Anschließend werden die drei Paare mit einem vorangestellten # verbunden.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formel zur Umrechnung von RGB in CMYK

Zuerst wird jeder RGB-Kanal auf einen Bruch zwischen 0 und 1 skaliert. Schwarz (K) wird anhand des größten Kanalwerts bestimmt. Cyan, Magenta und Gelb werden anschließend aus den verbleibenden Kanalwerten und K berechnet.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Wenn K gleich 1 ist, also die Farbe reines Schwarz ist, werden C, M und Y alle auf 0 gesetzt, um eine Division durch null zu vermeiden.

Formel zur Umrechnung von RGB in HSV

RGB wird zunächst auf Brüche zwischen 0 und 1 skaliert. Sei $C_{max}$ der größte der drei Werte, $C_{min}$ der kleinste und $\Delta$ ihre Differenz.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ andernfalls } \frac{\Delta}{C_{max}}\times 100\%$

Der Farbton hängt davon ab, welcher Kanal den größten Wert hat:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Beispielrechnung Ausgangspunkt ist RGB(46, 204, 113), ein Grünton. **Hex:** 46 entspricht im Hexadezimalsystem `2E`, 204 entspricht `CC` und 113 entspricht `71`. Daraus ergibt sich `#2ECC71`. **CMYK:** Skaliert gilt R′ = 0,180, G′ = 0,800 und B′ = 0,443. Der größte Wert ist G′, daher ist K = 1 − 0,800 = 0,20, also 20 % Schwarz. Dann gilt C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 % und Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45 %. Das Ergebnis ist CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (Grün), $C_{min}$ = 0,180, daher ist Δ = 0,620. Der Wert beträgt 80 %. Die Sättigung beträgt 0,620 / 0,800 × 100 ≈ 77 %. Da Grün den größten Wert hat, gilt H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Das Ergebnis ist HSV(145°, 77 %, 80 %). ## Farben barrierefrei auswählen Ungefähr 1 von 12 Männern und etwa 1 von 200 Frauen haben eine Form der Farbsehschwäche. Am häufigsten ist die Fähigkeit eingeschränkt, Rot und Grün zu unterscheiden. Ein Design, das Bedeutungen ausschließlich über Farben vermittelt, etwa eine rote Fehlermeldung ohne Symbol oder Beschriftung, funktioniert für diese Nutzer nicht. Eine zusätzliche Textbeschriftung, ein Symbol oder ein Muster neben der Farbe schafft Abhilfe. Auch Text benötigt einen ausreichenden Kontrast zum Hintergrund. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Zur Messung ist ein spezielles Kontrastprüfwerkzeug erforderlich, da dieses Tool Kontrastverhältnisse nicht selbst berechnet. ## Häufig gestellte Fragen **Was ist der Unterschied zwischen RGB und CMYK?** RGB wird für Bildschirme verwendet und erzeugt Farben durch die Addition von rotem, grünem und blauem Licht. CMYK wird zum Drucken verwendet und erzeugt Farben durch das Übereinanderdrucken von Farbe auf Papier, wodurch Licht subtrahiert wird. RGB kann leuchtendere Farben erzeugen als CMYK, weil Druckfarbe nicht den Farbumfang eines Bildschirms erreicht. **Warum sehen gedruckte Farben anders aus als auf dem Bildschirm?** Ein Bildschirm sendet Licht direkt aus, während eine gedruckte Seite nur das auf sie treffende Licht reflektiert. CMYK-Druckfarbe deckt außerdem einen kleineren Farbumfang ab als RGB-Licht. Daher können einige leuchtende Bildschirmfarben auf Papier nicht exakt wiedergegeben werden. **Was bedeutet das Symbol # in einem Hex-Code?** Es kennzeichnet die nachfolgenden Zeichen als hexadezimalen Farbcode. Diese Schreibweise stammt aus den frühen Tagen von HTML und CSS. Ohne das Symbol erkennt ein Browser den Wert nicht als Farbe. **Warum haben manche Hex-Codes nur drei Zeichen?** Ein dreistelliger Code ist eine Kurzform eines sechsstelligen Codes, bei dem jede Ziffer jedes Paar wiederholt wird. `#0F0` wird zu `#00FF00` erweitert. **Sind die Umrechnungen zwischen den Formaten exakt?** Die Umrechnung von RGB in Hex ist exakt, da dieselben Zahlen lediglich in einer anderen Basis geschrieben werden. Die Umrechnung von RGB in CMYK ist eine Näherung, weil dabei zwischen Licht und Druckfarbe umgerechnet wird. Dies sind unterschiedliche physikalische Prozesse mit unterschiedlichen Farbumfängen. **Kann dieses Tool eine Farbe direkt aus einem Bild oder einer Webseite auswählen?** Nein. Eine Browsererweiterung oder der im Betriebssystem integrierte Farbwähler, etwa der Digital Color Meter unter macOS, kann eine Farbe vom Bildschirm auslesen. Der ermittelte Wert kann anschließend in dieses Tool eingegeben werden, um ihn umzurechnen.