RGB-zu-Hex-Farbkonvertierung: Ein vollständiges Referenzhandbuch

RGB-zu-Hex-Konvertierung ist der Prozess der Übersetzung einer Farbe, die durch ihre Rot-, Grün- und Blaukomponenten definiert ist, in eine sechsstellige hexadezimale Darstellung, die in der Webentwicklung häufig verwendet wird. Das Verständnis der Beziehung dieser Formate hilft Ihnen, effektiver mit CSS, Design-Tools und Farbmanipulation im Code zu arbeiten.

Farbmodelle erklärt

RGB (Rot, Grün, Blau)

RGB ist ein additives Farbmodell, bei dem jede Farbkomponente eine ganze Zahl von 0 bis 255 ist. Die Kombination von drei Werten erzeugt über 16 Millionen mögliche Farben.

rgb(255, 0, 0)    → reines Rot
rgb(0, 255, 0)    → reines Grün
rgb(0, 0, 255)    → reines Blau
rgb(255, 255, 255) → Weiß
rgb(0, 0, 0)      → Schwarz
rgb(128, 128, 128) → Mittelgrau

Hexadezimal (Hex)

Hex-Farbcodes verwenden sechs hexadezimale Ziffern, gruppiert als RRGGBB. Jedes Paar repräsentiert die Intensität von Rot, Grün oder Blau in Basis-16-Notation, wobei 00 das Minimum und FF das Maximum ist.

#FF0000 → Rot
#00FF00 → Grün
#0000FF → Blau
#FFFFFF → Weiß
#000000 → Schwarz
#808080 → Grau

HSL (Farbton, Sättigung, Helligkeit)

HSL stellt Farben als Winkel auf einem Farbkreis (0-360 Grad) sowie Sättigungs- und Helligkeitsprozentsätze dar. Es ist für Menschen intuitiver, da Sie Helligkeit oder Sättigung unabhängig voneinander anpassen können.

hsl(0, 100%, 50%)    → Rot
hsl(120, 100%, 50%)  → Grün
hsl(240, 100%, 50%)  → Blau
hsl(0, 0%, 50%)      → Mittelgrau

CMYK (Cyan, Magenta, Gelb, Key/Schwarz)

CMYK ist ein subtraktives Farbmodell, das für den Druck verwendet wird. Die Werte reichen von 0 % bis 100 % für jede Komponente. Es ist das Gegenteil von RGB — mehr Tinte reduziert das reflektierte Licht.

cmyk(0%, 100%, 100%, 0%)   → Rot
cmyk(100%, 0%, 100%, 0%)   → Grün
cmyk(0%, 0%, 0%, 100%)     → Schwarz
cmyk(0%, 0%, 0%, 0%)       → Weiß

Konvertierungsformeln

RGB zu Hex

Konvertieren Sie jede RGB-Komponente in einen zweistelligen hexadezimalen Wert und verketten Sie sie:

R = 255 → FF
G = 128 → 80
B = 64  → 40
Ergebnis: #FF8040

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

console.log(rgbToHex(255, 128, 64)); // #FF8040

function rgbToHex(int $r, int $g, int $b): string {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

echo rgbToHex(255, 128, 64); // #FF8040

Hex zu RGB

Parsen Sie die sechsstellige Hex-Zeichenkette in drei Paare und konvertieren Sie jedes von Basis 16 in Basis 10:

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

console.log(hexToRgb('#FF8040')); // { r: 255, g: 128, b: 64 }

def hex_to_rgb(hex_color: str) -> tuple:
    clean = hex_color.lstrip('#')
    return tuple(int(clean[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb('#FF8040'))  # (255, 128, 64)

RGB zu HSL

Die HSL-Konvertierung beinhaltet das Finden der dominanten und sekundären Farbkomponenten, um den Farbtonwinkel zu bestimmen:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;

  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };

  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;

  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 128, 64)); // { h: 20, s: 100, l: 63 }

Kurzreferenztabelle

CSS-Farbfunktionen

Modernes CSS unterstützt Farbfunktionen, die über einfache Hex-Codes hinausgehen:

/* Traditionelles Hex */
.element { color: #FF8040; }

/* RGB mit Alpha */
.element { color: rgba(255, 128, 64, 0.5); }

/* HSL mit Alpha */
.element { color: hsla(20, 100%, 63%, 0.5); }

/* Moderne relative Farbsyntax */
.element { color: hsl(from #FF8040 h s calc(l + 10%)); }

/* OKLCH — wahrnehmungsuniformer Farbraum */
.element { color: oklch(0.7 0.15 45); }

Häufige Anwendungsfälle

• Webentwicklung — Übersetzen von Design-Mockups (RGB/HSL) in CSS (Hex)
• Datenvisualisierung — Programmgesteuertes Generieren von Farbskalen
• Bildverarbeitung — Lesen von Pixeldaten in RGB und Speichern als Hex
• Markenrichtlinien — Konsistente Farbdarstellung über Formate hinweg
• Farbzugänglichkeit — Berechnen von Kontrastverhältnissen zwischen Farben

Online-Tool

Der RGB to HEX Converter auf Help2Code konvertiert Farben zwischen RGB, HEX, RGBA, HSL und CMYK mit Live-Vorschau. Wählen Sie eine Farbe, fügen Sie einen Hex-Code ein oder generieren Sie eine Zufallsfarbe, um alle vier Formate sofort zu sehen. Die Farbvorschau wird in Echtzeit aktualisiert, und Sie können jedes Format mit einem Klick kopieren. Der Color Palette Extractor ist ebenfalls nützlich, um Farbschemata aus Bildern zu extrahieren.

Fazit

Das Verständnis der RGB-zu-Hex-Konvertierung – und der Beziehung zwischen Farbmodellen – ist für Webentwickler und Designer unerlässlich. Die Konvertierung ist unkompliziert: Jeder RGB-Kanal wird in ein zweistelliges Hex-Paar konvertiert. Sobald Sie das Muster kennen, wird die Bewegung zwischen RGB, Hex, HSL und CMYK zur zweiten Natur. Verwenden Sie den RGB to HEX Converter für sofortige Konvertierungen und die obigen Codebeispiele zur Integration von Farblogik in Ihre Projekte.