Farbkonverter
Häufige Fragen
Haben Farben allgemein anerkannte Namen?
Bei einem Teil der Farbtöne ja – in CSS gibt es etwa 140 (crimson, teal, coral), im RAL-System sind Namen an Nummern auf Farbfächern gebunden, bei Pantone an einen Druckkatalog. Derselbe Name bedeutet in unterschiedlichen Systemen einen anderen Farbton, deshalb ist für die genaue Farbübergabe zwischen Designer, Druckerei und Layout ein Code zuverlässiger als ein Name.
Wie prüft man den Kontrast von Text und Hintergrund auf einer Website?
Der Kontrast von Text und Hintergrund ist nicht nur eine Frage der Ästhetik, sondern eine Anforderung der Barrierefreiheit: In der Helligkeit zu nahe beieinanderliegende Farben sind für Menschen mit eingeschränktem Sehvermögen und auf Bildschirmen bei hellem Sonnenlicht schlecht lesbar. Bei der Wahl eines Paares „Text – Hintergrund“ lohnt es sich, nicht nur den Farbton, sondern auch den Unterschied in der Helligkeit zu prüfen – den dritten Wert in HSL.
Warum sieht eine Farbe am Bildschirm anders aus als nach dem Druck?
RGB beschreibt Farbe als Licht, das ein Bildschirm ausstrahlt, indem er rote, grüne und blaue Strahlen mischt. CMYK beschreibt Farbe als Druckfarbe auf Papier, die umgekehrt einen Teil des Spektrums absorbiert. Der in RGB verfügbare Farbraum ist größer als der Bereich, der sich physisch durch Mischen echter Druckfarben erzielen lässt – deshalb hat ein Teil der leuchtenden Bildschirmfarben grundsätzlich keine exakte Entsprechung im Druck, und der Konverter zeigt die nächstmögliche Annäherung, keine exakte Übereinstimmung. Deshalb bleibt die Umrechnung einer Farbe von RGB nach CMYK immer eine Annäherung, und der endgültige Farbton auf Papier hängt zusätzlich von Drucker und Papierart ab.
Was bedeuten die Buchstaben in HSL?
H steht für Farbton (Hue) und legt die Farbe selbst auf einem Kreis von 0 bis 360 Grad fest. S steht für Sättigung (Saturation) in Prozent. L steht für Helligkeit (Lightness) in Prozent: 0 % ergibt Schwarz, 100 % ergibt Weiß, unabhängig von den ersten beiden Werten.
Kann eine Farbe als Wort statt als Code eingegeben werden?
Ein begrenzter Satz benannter Farben (zum Beispiel red, white) wird vom CSS-Standard unterstützt, für ein genaues und vorhersehbares Ergebnis ist es aber zuverlässiger, einen konkreten Code einzugeben – HEX oder RGB.
Ergibt derselbe HEX-Code in unterschiedlichen Grafikprogrammen dieselbe Farbe?
Der Code ist identisch, aber die tatsächliche Darstellung hängt von der Kalibrierung und dem Farbprofil des Monitors ab – auf unterschiedlichen Bildschirmen kann derselbe HEX-Wert etwas wärmer oder kühler wirken.
Erstellt das Werkzeug automatisch eine fertige Palette?
Nein, das Formular nimmt eine einzelne Farbe entgegen und rechnet sie um – es erstellt weder automatisch eine fertige benannte Farbpalette noch sucht es ein kontrastierendes Paar. Um eine exakte Farbe aus einem Bild statt manuell per Code zu übernehmen, hilft die Farbpipette.
Geben Sie eine Farbe in beliebigem Format ein – das Werkzeug rechnet sie in die übrigen gängigen Systeme um: HEX, RGB, HSL, CMYK und weitere. Geben Sie den Wert in das Feld „Color“ ein und klicken Sie auf „Konvertieren“.
Schreibweisen einer Farbe
| Format | Beispiel | Wo es verwendet wird |
|---|---|---|
| HEX | #3A7BD5 | CSS, Website-Layout |
| RGB | rgb(58, 123, 213) | CSS, Programmierung, Arbeit mit Transparenz (RGBA) |
| HSL | hsl(214, 64%, 53%) | Auswahl von Nuancen eines Farbtons nach Helligkeit und Sättigung |
| CMYK | 73 %, 42 %, 0 %, 16 % | Druck, bei dem Farben statt Licht gemischt werden |
HEX, RGB und HSL beschreiben das Licht eines Bildschirms und lassen sich verlustfrei ineinander umrechnen. CMYK funktioniert anders – es geht um Farbe auf Papier, deshalb ist eine Umrechnung von RGB nach CMYK immer eine Annäherung: Der genaue Druckfarbton hängt zusätzlich von Drucker, Papier und Kalibrierung ab.
Wie man eine Farbkombination wählt
Die eingegebene Farbe ist ein Ausgangspunkt, keine fertige Palette. Der klassische Ansatz für Kombinationen baut auf dem Farbkreis auf:
- Monochrome Kombination – ein Farbton, unterschiedliche Helligkeit und Sättigung. In HSL reicht es, nur den zweiten und dritten Wert zu ändern und den ersten (den Farbton) unverändert zu lassen.
- Kontrastierende Kombination – Farben von gegenüberliegenden Seiten des Kreises, für Akzente und hohe Sichtbarkeit.
- Analoge Kombination – auf dem Kreis benachbarte Farben, für eine ruhige, einheitliche Palette.
Verwandtes Werkzeug
Soll die Ausgangsfarbe nicht von Hand eingegeben, sondern aus einem fertigen Bild oder Screenshot bestimmt werden, nutzen Sie die Farbpipette – sie liefert HEX, RGB und HSL sofort bei einem Klick auf ein Pixel.