Rechnerwerk
Beruf & Arbeitszeit

Farbcode umrechnen

Tragen Sie die Werte für Rot, Grün und Blau ein. Der Rechner zeigt Hex-Code, HSL und die Kontraste zu Weiß und Schwarz.

Ihre Farbe
Ergebnis

Farben in drei Schreibweisen

Farben am Bildschirm werden aus Rot, Grün und Blau gemischt, jeweils mit einem Wert von 0 bis 255. Dieselbe Farbe lässt sich in verschiedenen Schreibweisen angeben: als RGB-Tripel, als sechsstelliger Hex-Code mit vorangestelltem Rautenzeichen oder als HSL-Wert mit Farbton, Sättigung und Helligkeit. Der Rechner wandelt zwischen diesen Formen um.

Der Hex-Code besteht aus drei Paaren zweistelliger Hexadezimalzahlen. Das Blau mit RGB 52, 152, 219 wird zu #3498DB. HSL beschreibt die Farbe näher am menschlichen Empfinden: Der Farbton in Grad auf dem Farbkreis, die Sättigung und die Helligkeit in Prozent. Das erleichtert es, Farbvarianten zu entwerfen, etwa heller oder gedämpfter.

Zusätzlich berechnet der Rechner den Kontrast der Farbe zu Weiß und Schwarz nach der WCAG-Formel der Web Content Accessibility Guidelines. Für normalen Text ist ein Kontrast von mindestens 4,5 zu 1 gefordert, für große Schrift 3 zu 1. Der Rechner nennt zudem die besser lesbare Textfarbe.

Hex=R , G , B als zweistellige Hexadezimalzahlen\text{Hex} = R\,{,}\ G\,{,}\ \text{B als zweistellige Hexadezimalzahlen}Kontrast=hellere Helligkeit+0,05dunklere Helligkeit+0,05\text{Kontrast} = \frac{\text{hellere Helligkeit} + 0{,}05}{\text{dunklere Helligkeit} + 0{,}05}

Beispiel: RGB 52, 152, 219 ergibt den Hex-Code #3498DB und HSL 204°, 70 Prozent, 53 Prozent. Der Kontrast zu Weiß beträgt etwa 3,2 zu 1, zu Schwarz etwa 6,6 zu 1. Schwarzer Text ist auf dieser Farbe besser lesbar als weißer. Reines Rot ist #FF0000 und HSL 0°, 100 Prozent, 50 Prozent.

Farben im Webdesign

Gute Lesbarkeit ist eine Frage des Kontrasts, nicht allein des Geschmacks. Hellgrauer Text auf Weiß wirkt elegant, ist aber für viele Nutzer schwer lesbar, besonders bei Sehschwäche oder auf Displays im Sonnenlicht. Prüfen Sie Text- und Hintergrundfarbe deshalb mit dem Kontrastwert, bevor Sie ein Design festlegen.

Der Kontrast folgt der relativen Helligkeit, bei der der menschliche Blick Grün stärker gewichtet als Rot und Blau. Deshalb wirkt reines Gelb hell und reines Blau dunkel, obwohl beide den Maximalwert in einem Kanal haben. Das erklärt, warum zwei Farben mit gleicher HSL-Helligkeit unterschiedlich kontrastieren.

Hex-Codes gibt es auch mit kurzen drei Stellen, wenn jedes Paar aus zwei gleichen Ziffern besteht: #FF0000 wird zu #F00. Der Rechner gibt immer die sechsstellige Form aus. Mit einer vierten oder achten Stelle lässt sich außerdem Transparenz festlegen, was hier nicht berücksichtigt ist.

Für Druck gilt ein anderes Farbmodell, CMYK, dessen Farben nicht exakt aus RGB-Werten entstehen. Bildschirmfarben können daher im Druck abweichen. Beim Umrechnen von Pixelgrößen hilft der Px-Rem-Umrechner.

Tipps und typische Fehler

Lesbar gestalten.

  • Kontrast: Mindestens 4,5 zu 1.
  • Hex: Sechs Stellen mit Raute.
  • HSL: Für Farbvarianten.
  • Druck: CMYK weicht ab.

Weitere Rechner: Beruf & Arbeitszeit

Alle Rechner dieser Kategorie oder alle Rechner A–Z.

Auch gesucht als

Dieser Rechner hilft bei diesen und ähnlichen Fragen:

  • RGB in Hex
  • Hex in RGB
  • Farbcode umrechnen
  • RGB zu HSL
  • Farbkontrast
  • Hex Farbcode

Häufige Fragen

Wie wird RGB zu Hex?

Jeden Wert in eine zweistellige Hexadezimalzahl umrechnen und aneinanderhängen.

Was ist ein guter Kontrast?

Für normalen Text mindestens 4,5 zu 1 nach WCAG AA.

Was bedeutet HSL?

Farbton, Sättigung und Helligkeit.

Wie wird Rot als Hex geschrieben?

#FF0000.

Was bedeutet #FFFFFF?

Weiß.

Alle Berechnungen erfolgen direkt in Ihrem Browser, Ihre Eingaben werden nicht übertragen oder gespeichert. Die Ergebnisse sind Orientierungswerte ohne Gewähr und ersetzen keine steuerliche, rechtliche oder finanzielle Beratung. Letzte inhaltliche Änderung dieser Seite: . Mehr dazu: So entstehen und prüfen wir die Rechner.