Farbkonvertierung erklärt: HEX, RGB und HSL ohne Verwirrung

Ein Kunde schickt ein Design zurück und fragt: "Kannst du diese Farbe als Farbcode exportieren?". Die Designerin hat sie als HSL(225, 80%, 47%) notiert, während das CSS des Entwicklers #2f6fed erwartet — beide sprechen über exakt dieselbe Farbe. Genau deshalb gibt es Farbkonvertierung: drei Notationen, eine Realität. Dieser Leitfaden erklärt, was jedes Format bedeutet, wie man sicher zwischen ihnen wechselt und welche Regeln unlesbare Farbentscheidungen verhindern.

Die drei Modelle, die Ihnen wirklich begegnen

Jede Farbe auf einem Bildschirm entsteht durch Mischen von rotem, grünem und blauem Licht. Unterschiedlich ist nur, wie wir die Mischung beschreiben:

• HEX ist die Kurzschrift des Webs — die RGB-Werte in sechs Hexadezimal-Ziffern gepresst.
• RGB schreibt die Mengen an Rot, Grün und Blau als drei Zahlen von 0–255 aus.
• HSL benennt die Farbe über Farbton, Sättigung und Helligkeit — so, wie ein Mensch denkt.

Keines dieser Modelle ist "richtiger". Sie sind verschiedene Werkzeuge: Wählen Sie das, mit dem sich die aktuelle Aufgabe am leichtesten durchdenken lässt.

HEX: woher die sechs Ziffern kommen

Ein Wert wie #2f6fed ist nur die Aneinanderreihung dreier zweistelliger Zahlen. Aufgeteilt: 2f ist der Rotanteil, 6f das Grün, ed das Blau. Der Haken: Die Ziffern gehen von 0–9 zu a–f (hexadezimal), 2f bedeutet also 2 × 16 + 15 = 47. Diese Zahl landet direkt auf der 0–255-Skala: hex 2f → 47 → rgb(47, ...).

Sind alle drei Paare doppelte Ziffern — etwa #aabbcc — können Sie auf drei Ziffern kürzen: #abc. Browser behandeln beide Formen gleich, und kurz ist Standard in Tailwinds bg-red-500-Utilities. Ein häufiger Anfängerfehler: #ffffff für grau halten. Es ist reines Weiß; #808080 ist mittleres Grau.

RGB: die 0–255-Zahlen, die der Bildschirm wirklich nutzt

Lesen Sie rgb(47, 111, 237) als "47 Einheiten rotes Licht, 111 grünes, 237 blaues". Null ist aus, 255 ist volle Helligkeit, und ein moderner Bildschirm mischt diese drei Kanäle zur Farbe. Alles andere — inklusive HEX — ist eine Bequemlichkeitsschicht über diesen drei Zahlen.

Die Zahlen wirken bedeutungslos, bis man sie mit Erfahrung verbindet. Eine Farbe mit drei gleichen Kanälen — rgb(200,200,200) — ist ein Grauton. Die Helligkeit jeder RGB-Farbe ist grob der Durchschnitt ihrer drei Kanäle: Erhöhen Sie alle zusammen, wird die Farbe Richtung Weiß heller. Ist das einmal verinnerlicht, liest sich RGB viel leichter.

HSL: das Modell, das Ihre Intuition will

HSL beschreibt Farbe so, wie Menschen Farben wirklich beschreiben. Farbton ist der Winkel auf dem Farbkreis — 0° Rot, 120° Grün, 240° Blau — man wählt "das Rot da drüben", ohne Zahlen zu rechnen. Sättigung sagt, wie kräftig die Farbe ist: von grau (0%) bis reiner Farbe (100%). Helligkeit reicht von Schwarz (0%) bis Weiß (100%), wobei 50% die "normale" kräftige Version ist.

Deshalb ist HSL das richtige Modell für Gestaltung: einen Hover-Zustand abdunkeln, indem Sie die Helligkeit ein paar Punkte senken, oder einen Akzent durch weniger Sättigung dämpfen — ohne den Farbton anzufassen. Im HEX-Format bedeutet derselbe Eingriff, drei zusammenhanglose Ziffern neu zu rechnen. Deshalb zeigen die meisten Farbwähler, CSS-Verläufe und Design-Tools irgendwo HSL.

Zwischen Modellen umrechnen

Die Umrechnungen sind mechanisch. HEX → RGB ist oben erklärt; für RGB → HSL braucht man nur den Max/Min-Kanal und leitet den Farbton vom Gewinner-Kanal ab. In der Praxis rechnen Sie das selten von Hand — ein Konverter erledigt es sofort —, aber die Formel nimmt dem Ganzen die Magie:

function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, "0");
  return "#" + [r, g, b].map(toHex).join("");
}
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
}

Barrierefreiheit: Kontrast mit Mathematik prüfen

Farben nach Augenmaß zu wählen, ist der Weg zu unlesbaren Oberflächen. WCAG definiert ein Kontrastverhältnis zwischen Textfarbe und Hintergrund, von 1 (kein Kontrast) bis 21 (Schwarz auf Weiß). Die praktischen Schwellen: normaler Text braucht 4,5:1, großer Text 3:1. Das Verhältnis entsteht aus der relativen Leuchtdichte der beiden Farben, die den Grünkanal am stärksten gewichtet, weil das menschliche Auge dafür am empfindlichsten ist — ein #00ff00-Hintergrund erscheint viel heller als #ff0000.

Der ehrliche Shortcut ist nicht das manuelle Luminanz-Rechnen, sondern zu verstehen, was die Zahl bewegt: Mehr Helligkeitsabstand zwischen Text und Hintergrund hilft fast immer. Genau hier ist HSL unschätzbar — zwei Farben mit gleichem Farbton sind automatisch harmonisch, und man hebt die Helligkeit der einen, bis der Kontrast passt. Besteht ein Kunde auf einem blassen Gelb als Markenfarbe, ist Kontrast die Unterhaltung, die man führen können muss: Es ist keine Geschmacks-, sondern eine 4,5:1-Frage.

Paletten erstellen und extrahieren

Dasselbe Farbwissen trägt die Palettenarbeit. Eine Tailwind-artige Palette startet von einer Grundfarbe und verteilt Schritte in festen Helligkeitsabständen; ein Paletten-Extraktor zieht aus einem vorhandenen Bild die dominanten, visuell ausgewogenen Farben. Beides beruht darauf, die Quellfarben in einen Raum zu überführen, in dem sich "ähnlich" und "verschieden" messen lassen — deshalb sparen Werkzeuge, die zwischen HEX, RGB und HSL wechseln oder Farben direkt aus Bildern ziehen, enorm viel Fummelei.

Farbwerkzeuge in Convrs

Convrs hält das alles im Browser: der Farbkonverter übersetzt jeden HEX-, RGB- oder HSL-Wert mit Live-Vorschau in die anderen Schreibweisen, der Palette-Extraktor zieht aus jedem Bild eine ausgewogene Palette, und der Tailwind-Palettengenerator macht aus einer einzelnen Farbe eine vollständige Farbtonleiter für Ihr Designsystem. Ihre Farben verlassen nie Ihr Gerät, und das Ergebnis kopieren Sie direkt in CSS oder die Tailwind-Konfiguration.