Skip to main content

Farbkonverter

Deutsch

Wandeln Sie zwischen den Farbformaten HEX, RGB und HSL um.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
Alle Berechnungen erfolgen lokal in Ihrem Browser. Es werden keine Daten an einen Server gesendet.

Die Ergebnisse dienen zur Information. Überprüfen Sie sie anhand anderer Quellen.

HEX, RGB und HSL — dieselbe Farbe, drei Schreibweisen

Diese drei Notationen beschreiben identische Farben; sie unterscheiden sich darin, was sie leicht machen. HEX und RGB adressieren die Kanäle Rot, Grün und Blau direkt. HSL trennt den Farbton von Sättigung und Helligkeit — deshalb greift man beim Aufbau einer Palette dazu.

So wird gerechnet

  • HEX sind zwei Hexziffern je Kanal: #RRGGBB, jedes Paar ein Wert von 00 bis FF (0–255).
  • RGB sind dieselben drei Zahlen dezimal, gelegentlich mit Alphakanal als rgba().
  • HSL gibt den Farbton in Grad auf einem Farbkreis (0–360) sowie Sättigung und Helligkeit in Prozent an.
HEX → RGB:  in Paare teilen, jedes zur Basis 16 lesen
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL:  auf 0–1 normieren, dann
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = der kanalabhängige Winkel der größten Komponente

Rechenbeispiel

Umrechnung von #3B82F6 — einem verbreiteten Oberflächenblau — durch alle drei Notationen.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normieren: r=0,231, g=0,510, b=0,965 → max=0,965 (Blau), min=0,231
  4. L = (0,965 + 0,231) / 2 = 0,598 → 60%
  5. S = (0,965 − 0,231) / (1 − |2(0,598) − 1|) = 0,734 / 0,804 = 0,913 → 91%
  6. Blau ist der größte Kanal, daraus folgt H ≈ 217°

hsl(217, 91%, 60%). Für eine Palette halten Sie den Farbton bei 217 und variieren die Helligkeit — genau der Handgriff, den HSL trivial macht und HEX mühsam.

Das Ergebnis lesen

  • Gleiche Helligkeit in HSL bedeutet nicht gleiche wahrgenommene Helligkeit. Gelb bei 50% wirkt weit heller als Blau bei 50%, denn HSL ist eine simple mathematische Umformung von RGB und weiß nichts über das menschliche Sehen. Für barrierefreien Kontrast berechnen Sie das WCAG-Kontrastverhältnis, statt Helligkeitswerte zu vergleichen.
  • Dreistelliges HEX ist eine Kurzform, bei der jede Ziffer verdoppelt wird: #3BF bedeutet #33BBFF, nicht #03B0F0.
  • Rundungen summieren sich. HEX → HSL → HEX kann einen Kanal um eins verschieben; halten Sie deshalb in Ihren Design-Tokens eine Notation als maßgeblich fest.
  • Neuere CSS-Farbräume — insbesondere oklch — beheben das Wahrnehmungsproblem von HSL und lohnen sich, wo die Browserunterstützung es zulässt.

Häufige Fragen

Welche Notation im CSS?
HSL oder oklch für alles, was Sie systematisch erzeugen, etwa Auf- und Abstufungen einer Markenfarbe, weil das Ändern einer Zahl genau eine Sache bewirkt. HEX ist für feste, von der Gestaltung gelieferte Werte völlig in Ordnung.
Warum sieht meine Farbe in einer anderen App anders aus?
Fast immer wegen eines anderen Farbprofils. Dasselbe RGB-Tripel wird in sRGB und Display P3 unterschiedlich dargestellt — deshalb wirken Screenshots derselben Seite auf verschiedenen Geräten uneinheitlich.

Quellen