Anleitung: Farbcode-Umrechner
- Klicken Sie auf Farbe wählen und suchen Sie die gewünschte Farbe aus, oder fügen Sie einen HEX-, RGB- oder HSL-Wert in das Feld Farbcode eingeben ein.
- Die Werte für HEX, RGB, HSL, HSV und CMYK erscheinen in der Tabelle. Mit der Schaltfläche Kopieren übernehmen Sie sie direkt in die Zwischenablage.
- Prüfen Sie im Bereich Schriftkontrast, ob weiße oder schwarze Schrift auf der Farbe besser lesbar ist.
- In der Palette darunter können Sie hellere und dunklere Töne derselben Farbe per Klick direkt auswählen.
So rechnen Sie HEX in RGB um
Ein HEX-Code #RRGGBB gibt die Anteile von Rot, Grün und Blau jeweils als zweistellige Hexadezimalzahl an (00 bis FF, dezimal 0 bis 255). Teilen Sie den Code in Zweiergruppen auf und rechnen Sie jede Gruppe ins Dezimalsystem um – schon haben Sie den RGB-Wert.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
Umgekehrt wandeln Sie für RGB in HEX jeden Wert in eine zweistellige Hexadezimalzahl um und hängen die drei Teile aneinander. 37 → 25, 99 → 63, 235 → EB, also ergibt rgb(37, 99, 235) den Code #2563EB. Ein dreistelliger HEX-Code (#F80) entspricht dem Code, bei dem jede Stelle verdoppelt wird, also #FF8800. Wenn Sie die Umrechnung ins Hexadezimalsystem nachvollziehen möchten, hilft Ihnen der Zahlensystem-Umrechner.
Worin unterscheiden sich HSL, HSV und CMYK?
| Format | Aufbau | Typischer Einsatz |
|---|---|---|
| RGB / HEX | Intensität der drei Lichtgrundfarben (0–255) | Web, Bildschirmdesign |
| HSL | Farbton (0–360°), Sättigung, Helligkeit | CSS, wenn nur die Helligkeit angepasst werden soll |
| HSV (HSB) | Farbton, Sättigung, Hellwert | Farbwähler in Grafikprogrammen wie Photoshop |
| CMYK | Anteile der vier Druckfarben | Druckerzeugnisse |
Die CMYK-Werte werden per Formel aus RGB berechnet und sind Näherungswerte. Die tatsächliche Druckfarbe hängt von Papier und Farbprofil des Druckers ab. Für wichtige Drucksachen sollten Sie daher die Farbvorgaben Ihrer Druckerei beachten (häufig etwa ein Profil wie ISO Coated oder PSO).
Kontrastverhältnis 4,5:1 und die richtige Schriftfarbe
Die Richtlinien für barrierefreie Webinhalte (WCAG 2.1) empfehlen für normalen Text ein Kontrastverhältnis zwischen Schrift und Hintergrund von mindestens 4,5:1 (Stufe AA), für große Schrift (ab etwa 24 px oder fett ab 18,66 px) mindestens 3:1. Ab 7:1 ist auch die strengere Stufe AAA erfüllt.
Das Kontrastverhältnis wird aus der relativen Leuchtdichte L beider Farben berechnet: (helleres L + 0,05) ÷ (dunkleres L + 0,05). Der höchstmögliche Wert ist 21:1 – der Kontrast zwischen Weiß und Schwarz. Wenn Sie Farben für Buttons oder Banner festlegen, wählen Sie die Schriftfarbe, die oben mit AA gekennzeichnet ist; dann ist der Text für die meisten Menschen gut lesbar.
Barrierefreiheit ist im deutschsprachigen Raum zunehmend Pflicht: Öffentliche Stellen müssen ihre Websites barrierefrei gestalten, und mit dem Barrierefreiheitsstärkungsgesetz bzw. den entsprechenden Regelungen in Österreich gelten seit Mitte 2025 auch für viele digitale Angebote von Unternehmen Anforderungen, die sich an den WCAG orientieren.
Farbcodes in CSS verwenden
Die umgerechneten Werte können Sie direkt in Ihr CSS einfügen. Alle drei Schreibweisen ergeben dieselbe Farbe:
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
Beachten Sie: In CSS werden Dezimalstellen immer mit Punkt geschrieben, nicht mit Komma.
Für halbtransparente Farben geben Sie die Deckkraft nach einem Schrägstrich an, etwa rgb(37 99 235 / 50%), oder Sie hängen an den HEX-Code zwei weitere Stellen an, z. B. #2563EB80 (80 entspricht etwa 50 % Deckkraft).