Farbkonverter: RGB, HEX, HSL Vollstandiger Leitfaden mit Code-Beispielen

Ob Sie ein Design-System aufbauen, CSS debuggen oder ein Mockup in Code umsetzen: Ein zuverlassiger Farbkonverter gehort zu den meistgenutzten Werkzeugen. Dieser umfassende Leitfaden erklart jedes Farbmodell, die mathematischen Formeln, Code-Beispiele in JavaScript, Python und Bash sowie moderne CSS-Farbfunktionen wie oklch() und color-mix().

Testen Sie unseren kostenlosen Online-Farbkonverter.

Farbmodelle verstehen: RGB, HEX, HSL, HSV und CMYK

RGB (Rot, Grun, Blau) ist das grundlegende Farbmodell fur Bildschirme. Jeder Pixel mischt rotes, grunes und blaues Licht mit Intensitaten von 0-255. RGB ist ein additives Farbmodell: alle Kanale auf Maximum ergeben Weiss.

HEX (Hexadezimal) ist die verbreitetste Farbnotation im Web. Es ist eine kompakte Darstellung von RGB-Werten in Basis 16. #FF5733 entspricht rgb(255, 87, 51). HEX-Codes gibt es in 3-, 6- und 8-stelligen Formaten.

HSL (Farbton, Sattigung, Helligkeit) ist intuitiver gestaltet. Der Farbton ist ein Grad (0-360), Sattigung und Helligkeit sind Prozentsatze. HSL erleichtert das Erstellen hellerer oder dunklerer Varianten.

HSV/HSB (Farbton, Sattigung, Wert) ist das Modell der meisten Farbwahler, einschliesslich Photoshop und Figma. CSS unterstutzt HSV nicht direkt.

CMYK (Cyan, Magenta, Gelb, Schwarz) ist ein subtraktives Farbmodell fur den Druck. CMYK ist fur CSS irrelevant, aber fur PDF-Erzeugung und Druckdateien unverzichtbar.

Farbmodell-Vergleichstabelle

Die folgende Tabelle fasst die Eigenschaften jedes Farbmodells zusammen:

Wie Farbkonvertierung funktioniert

Jeder Farbkonverter implementiert bekannte mathematische Formeln. Das Verstandnis hilft beim Debuggen von Grenzfallen.

HEX zu RGB: Ein Hex-Code wie #FF5733 besteht aus drei hexadezimalen Paaren. Jedes Paar wird unabhangig als Basis-16-Ganzzahl geparst.

RGB zu HEX: Konvertieren Sie jeden Kanalwert (0-255) in eine zweistellige Hexadezimalzeichenkette und verketten Sie sie mit #-Prafix.

RGB zu HSL: Normalisieren Sie R, G, B auf 0-1, finden Sie Cmax und Cmin, berechnen Sie Delta, Helligkeit, Sattigung und Farbton.

HSL zu HEX: Konvertieren Sie zuerst HSL zu RGB, dann jeden RGB-Kanal zu Hexadezimal.

RGB zu HSV: Die Farbtonberechnung ist identisch mit RGB-zu-HSL. Wert = Cmax. Sattigung = Delta / Cmax.

HSL zu HSV und umgekehrt: Beide teilen den Farbton, aber die Konvertierung zwischen Sattigung und Helligkeit/Wert erfordert spezifische Formeln.

Code-Beispiele zur Farbkonvertierung

JavaScript / CSS Farbkonvertierung

JavaScript bietet keinen eingebauten Farbkonverter, aber CSS-Farbfunktionen machen Konvertierungen unkompliziert:

// ===== HEX to RGB =====
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

// ===== RGB to HEX =====
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}
rgbToHex(255, 87, 51); // "#ff5733"

// ===== RGB to HSL =====
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), 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;
  switch (max) {
    case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
    case g: h = ((b - r) / d + 2) / 6; break;
    case b: h = ((r - g) / d + 4) / 6; break;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}
rgbToHsl(255, 87, 51); // { h: 11, s: 100, l: 60 }

// ===== HSL to RGB =====
function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;
  if (h < 60)       { r = c; g = x; b = 0; }
  else if (h < 120) { r = x; g = c; b = 0; }
  else if (h < 180) { r = 0; g = c; b = x; }
  else if (h < 240) { r = 0; g = x; b = c; }
  else if (h < 300) { r = x; g = 0; b = c; }
  else              { r = c; g = 0; b = x; }
  return {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255)
  };
}
hslToRgb(11, 100, 60); // { r: 255, g: 87, b: 51 }

// ===== CSS native color parsing (modern browsers) =====
// Use CSS.supports() and getComputedStyle for runtime conversion
const el = document.createElement('div');
el.style.color = 'hsl(14 100% 60%)';
document.body.appendChild(el);
const rgb = getComputedStyle(el).color;
// "rgb(255, 87, 51)" - browser converts any format to RGB
document.body.removeChild(el);

Python Farbkonvertierung

Python enthalt colorsys fur HSL/HSV-Konvertierungen und Bibliotheken wie Pillow und matplotlib:

import colorsys

# ===== RGB to HSL (colorsys uses HLS order) =====
r, g, b = 255, 87, 51
r_norm, g_norm, b_norm = r / 255, g / 255, b / 255
h, l, s = colorsys.rgb_to_hls(r_norm, g_norm, b_norm)
print(f"HSL: ({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")
# HSL: (11, 100%, 60%)

# ===== HSL to RGB =====
r2, g2, b2 = colorsys.hls_to_rgb(h, l, s)
print(f"RGB: ({r2*255:.0f}, {g2*255:.0f}, {b2*255:.0f})")
# RGB: (255, 87, 51)

# ===== RGB to HSV =====
h_hsv, s_hsv, v_hsv = colorsys.rgb_to_hsv(r_norm, g_norm, b_norm)
print(f"HSV: ({h_hsv*360:.0f}, {s_hsv*100:.0f}%, {v_hsv*100:.0f}%)")
# HSV: (11, 80%, 100%)

# ===== HEX to RGB =====
def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb("#FF5733"))  # (255, 87, 51)

# ===== RGB to HEX =====
def rgb_to_hex(r, g, b):
    return f"#{r:02x}{g:02x}{b:02x}"

print(rgb_to_hex(255, 87, 51))  # #ff5733

# ===== Using matplotlib colors =====
import matplotlib.colors as mcolors
rgb_tuple = mcolors.to_rgb('#FF5733')     # (1.0, 0.341, 0.2)
hex_value = mcolors.to_hex((1.0, 0.341, 0.2))  # '#ff5733'
rgba = mcolors.to_rgba('steelblue', alpha=0.5)

# ===== Using Pillow/PIL for image colors =====
from PIL import Image
img = Image.new('RGB', (1, 1), (255, 87, 51))
pixel = img.getpixel((0, 0))  # (255, 87, 51)
img_hsv = img.convert('HSV')   # Convert to HSV color space

Bash / CLI Farbkonvertierung

Kommandozeilenwerkzeuge wie printf und ImageMagick konnen grundlegende Farbkonvertierungen durchfuhren:

# ===== HEX to RGB using printf =====
hex="FF5733"
printf "RGB: %d, %d, %d\n" 0x${hex:0:2} 0x${hex:2:2} 0x${hex:4:2}
# RGB: 255, 87, 51

# ===== RGB to HEX using printf =====
r=255 g=87 b=51
printf "#%02x%02x%02x\n" $r $g $b
# #ff5733

# ===== ImageMagick color conversion =====
# Convert HEX to RGB
magick convert xc:"#FF5733" -format "%[fx:int(255*r)],%[fx:int(255*g)],%[fx:int(255*b)]" info:
# 255,87,51

# Get color info in multiple formats
magick convert xc:"#FF5733" -colorspace HSL -format "HSL: %[fx:r*360],%[fx:g*100]%%,%[fx:b*100]%%" info:

# ===== Convert named color to HEX =====
magick convert xc:"tomato" -format "#%02[hex:r]%02[hex:g]%02[hex:b]" info:
# #FF6347

# ===== Batch convert colors from file =====
# colors.txt: one hex color per line
while IFS= read -r color; do
  printf "%s -> RGB: %d, %d, %d\n" "$color" \
    0x${color:1:2} 0x${color:3:2} 0x${color:5:2}
done < colors.txt

Moderne CSS-Farbfunktionen

Modernes CSS unterstutzt wahrnehmungsgleichmassige Farbraume, Wide-Gamut-Farben und leistungsstarke Farbmanipulationsfunktionen:

/* ===== Modern CSS color syntax (no commas) ===== */
.element {
  /* RGB - modern space-separated */
  color: rgb(255 87 51);
  color: rgb(255 87 51 / 0.5);  /* with alpha */

  /* HSL - modern space-separated */
  background: hsl(14 100% 60%);
  background: hsl(14 100% 60% / 0.8);

  /* HWB - Hue, Whiteness, Blackness */
  border-color: hwb(14 0% 0%);        /* pure orange */
  border-color: hwb(14 20% 10%);      /* muted orange */
}

/* ===== OKLCH - perceptually uniform ===== */
.brand {
  --brand-primary: oklch(0.65 0.25 29);       /* vivid red-orange */
  --brand-light:   oklch(0.85 0.12 29);       /* light variant */
  --brand-dark:    oklch(0.45 0.20 29);       /* dark variant */
  /* Same hue, predictable lightness changes */
}

/* ===== color-mix() - blend colors ===== */
.mixed {
  background: color-mix(in oklch, #FF5733 70%, #3366FF);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* ===== Relative color syntax ===== */
.derived {
  --base: #FF5733;
  /* Lighten by increasing L in oklch */
  color: oklch(from var(--base) calc(l + 0.2) c h);
  /* Desaturate by reducing chroma */
  background: oklch(from var(--base) l calc(c * 0.5) h);
  /* Shift hue by 180 degrees (complementary) */
  border-color: hsl(from var(--base) calc(h + 180) s l);
}

/* ===== Wide gamut P3 colors ===== */
@supports (color: color(display-p3 1 0 0)) {
  .vivid {
    color: color(display-p3 1 0.3 0.1); /* more vivid than sRGB */
  }
}

/* ===== Dark mode with light-dark() ===== */
:root {
  color-scheme: light dark;
  --text: light-dark(#1a1a1a, #e5e5e5);
  --surface: light-dark(#ffffff, #121212);
}

/* ===== CSS custom properties for theming ===== */
:root {
  --color-primary-h: 14;
  --color-primary-s: 100%;
  --color-primary-l: 60%;
  --color-primary: hsl(
    var(--color-primary-h)
    var(--color-primary-s)
    var(--color-primary-l)
  );
  --color-primary-hover: hsl(
    var(--color-primary-h)
    var(--color-primary-s)
    calc(var(--color-primary-l) - 10%)
  );
}

CSS-Farbfunktionen im Detail

Modernes CSS bietet eine reiche Palette an Farbfunktionen. rgb() akzeptiert die leerzeichengetrennte Syntax. hwb() (Farbton, Weissheit, Schwarze) ist eine intuitivere Alternative.

oklch() ist ein Durchbruch fur Webfarben. Basierend auf dem Oklab-Farbraum stellt es sicher, dass Farben gleicher Helligkeit tatsachlich gleich hell wirken. OKLCH erschliesst auch den P3-Farbraum.

color-mix() mischt zwei Farben in jedem Farbraum. Relative Farbsyntax leitet neue Farben von bestehenden ab.

Weitere nutzliche Werte: currentColor, transparent, CSS Custom Properties fur Theming und light-dark() fur automatische Farbschema-Auswahl.

Farb-Barrierefreiheit und Kontrast

WCAG-Kontrastverhaltnisse sind die Grundlage barrierefreien Farbdesigns. AA erfordert 4.5:1 fur normalen Text und 3:1 fur grossen Text. AAA erfordert 7:1 bzw. 4.5:1.

Etwa 8% der Manner haben eine Form von Farbsehschwache. Verlassen Sie sich nie allein auf Farbe zur Informationsvermittlung. Vermeiden Sie Rot/Grun- und Blau/Lila-Kombinationen.

Erstellen Sie barrierefreie Paletten mit OKLCH fur wahrnehmungsgleichmassige Abstufungen. Testen Sie jede Vordergrund-/Hintergrund-Kombination.

Farb-Best-Practices fur Entwickler

Definieren Sie Ihre Palette als Design Tokens und mappen Sie sie auf CSS Custom Properties. Verwenden Sie semantische Namen wie --color-text-primary.

Dark Mode sollte nicht einfach die Helligkeit umkehren. Gestalten Sie ihn als separates Theme mit eigener Palette.

Verwenden Sie nie rohe HEX- oder RGB-Werte direkt in Komponentenstilen. Referenzieren Sie immer Tokens.

Bevorzugen Sie fur Animationen oklch()-Interpolation fur flussigere wahrnehmbare Ubergange.

Haufig gestellte Fragen

Wie konvertiert man HEX zu RGB und umgekehrt?

Fur HEX zu RGB teilen Sie den Code in drei Paare und parsen jedes als Basis-16-Ganzzahl. Fur RGB zu HEX konvertieren Sie jeden Kanal in eine 2-stellige Hex-Zeichenkette. Unser Online-Tool fuhrt diese Konvertierungen sofort durch.

Welches ist das beste Farbformat fur Webentwicklung?

HEX ist Standard fur die meisten Projekte. HSL ist besser fur Theming. oklch() ist die beste Wahl fur moderne Browser mit wahrnehmungsgleichmassigen Farben und P3-Gamut.

Was sind die WCAG-Kontrastanforderungen?

AA erfordert 4.5:1 fur normalen Text und 3:1 fur grossen Text. AAA erfordert 7:1 und 4.5:1. Nicht-Text-Elemente benotigen mindestens 3:1. Testen Sie immer mit einem Kontrastprufer.

Farbkonvertierung ist eine grundlegende Fahigkeit, die Designtools, CSS, Barrierefreiheit und Backend-Verarbeitung verbindet. Nutzen Sie unser kostenloses Tool fur sofortige Konvertierungen.

Lesen Sie auch: unseren ausfuhrlichen Leitfaden zur HEX-zu-RGB-Konvertierung fur weitere Tipps.

Konvertieren Sie Farben zwischen HEX, RGB, HSL und mehr mit unserem kostenlosen Farbkonverter.