Hex zu RGB Konverter: Farbcode-Leitfaden für Entwickler

Farben sind die Bausteine jeder Benutzeroberflache, und Entwickler wechseln standig zwischen Hex-Farbcodes und RGB-Werten. Ob Sie eine Website mit CSS gestalten, eine mobile App entwickeln oder ein Visualisierungsskript in Python schreiben - die Konvertierung zwischen Hex und RGB zu verstehen ist essenziell. Dieser Guide erklart den Algorithmus, liefert Code-Beispiele und behandelt Alpha-Transparenz.

Testen Sie unseren kostenlosen Online Hex-zu-RGB-Konverter.

Was sind Hex-Farbcodes und RGB-Werte?

Hex-Farbcodes stellen Farben als 6-Zeichen-String mit #-Prafix dar. Jedes Zeichenpaar kodiert einen Farbkanal: Rot, Grun, Blau. Format: #RRGGBB, jedes Paar von 00 bis FF. CSS unterstutzt auch die 3-Zeichen-Kurzform wie #F00 = #FF0000.

RGB-Werte definieren Farben mit drei Dezimalzahlen (0-255) fur Rot, Grun und Blau. In CSS: rgb(255, 87, 51). Hex und RGB beschreiben denselben Farbraum (sRGB), die Konvertierung ist verlustfrei.

Wie die Hex-zu-RGB-Konvertierung funktioniert

Die Konvertierung von Hex zu RGB ist einfach, da jedes Hex-Paar direkt einem RGB-Kanal entspricht:

Beispiel: #1A2B3C ergibt R=26, G=43, B=60 = rgb(26, 43, 60).

Die Umkehrung (RGB zu Hex) konvertiert jeden Dezimalwert in einen zweistelligen Hex-String und verkettet sie.

Gangige Hex-Farbcodes und ihre RGB-Werte

Referenztabelle gangiger Farben mit Hex- und RGB-Aquivalenten:

Wann Hex, RGB oder HSL verwenden

Alle drei Formate beschreiben denselben sRGB-Farbraum:

Hex (#RRGGBB) ist das kompakteste Format und Standard in den meisten CSS-Codebasen. Design-Tools kopieren Farben standardmasig als Hex.

RGB / RGBA ist ideal fur die programmatische Manipulation einzelner Kanale und Alpha-Transparenz.

HSL / HSLA ist das am besten lesbare Format, ideal fur Farbpaletten und Themes.

In der Praxis: Hex fur statische Farben, rgba() fur Transparenz, hsl() fur dynamische Farbsysteme.

Hex-zu-RGB-Konvertierung in JavaScript, CSS und Python

JavaScript / TypeScript

Robuste Hex-zu-RGB-Funktion fur 3-, 6- und 8-Zeichen-Hex-Codes:

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand (#F0A -> FF00AA)
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  // Handle 4-character shorthand (#F0A8 -> FF00AA88)
  if (hex.length === 4) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // Handle 8-character hex with alpha (#RRGGBBAA)
  if (hex.length === 8) {
    const a = parseInt(hex.substring(6, 8), 16) / 255;
    return { r, g, b, a: Math.round(a * 100) / 100 };
  }

  return { r, g, b };
}

// Examples
hexToRgb('#FF5733');    // { r: 255, g: 87, b: 51 }
hexToRgb('#3B82F6');    // { r: 59, g: 130, b: 246 }
hexToRgb('#F00');       // { r: 255, g: 0, b: 0 }
hexToRgb('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }

CSS: Hex vs RGB in der Praxis

In CSS sind Hex und RGB austauschbar:

/* These produce the exact same color */
.element-hex   { color: #3B82F6; }
.element-rgb   { color: rgb(59, 130, 246); }

/* Transparency — both are equivalent */
.overlay-hex   { background: #3B82F680; }      /* 50% opacity */
.overlay-rgba  { background: rgba(59, 130, 246, 0.5); }

/* Modern CSS space-separated syntax */
.modern        { color: rgb(59 130 246); }
.modern-alpha  { color: rgb(59 130 246 / 0.5); }

/* CSS custom properties work with any format */
:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
}
.card {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}

Python

Python macht die Konvertierung mit int() einfach:

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    """Convert hex color string to RGB tuple."""
    hex_color = hex_color.lstrip('#')

    # Handle 3-character shorthand
    if len(hex_color) == 3:
        hex_color = ''.join(c * 2 for c in hex_color)

    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)

    return (r, g, b)


def rgb_to_hex(r: int, g: int, b: int) -> str:
    """Convert RGB values to hex color string."""
    return f'#{r:02x}{g:02x}{b:02x}'


# Examples
print(hex_to_rgb('#FF5733'))   # (255, 87, 51)
print(hex_to_rgb('#3B82F6'))   # (59, 130, 246)
print(hex_to_rgb('#F00'))      # (255, 0, 0)

print(rgb_to_hex(59, 130, 246))  # #3b82f6
print(rgb_to_hex(255, 87, 51))   # #ff5733

RGB zu Hex (JavaScript)

Die Umkehrung von RGB zu Hex:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => {
      const hex = v.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    })
    .join('');
}

// With alpha support
function rgbaToHex(r, g, b, a = 1) {
  const hex = rgbToHex(r, g, b);
  if (a === 1) return hex;
  const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0');
  return hex + alphaHex;
}

// Examples
rgbToHex(255, 87, 51);        // '#ff5733'
rgbToHex(59, 130, 246);       // '#3b82f6'
rgbaToHex(255, 0, 0, 0.5);   // '#ff000080'

Alpha-Kanal: Hex mit Transparenz (#RRGGBBAA) und RGBA

Hex und RGB unterstutzen einen Alpha-Kanal. 1.0 (oder FF) = deckend, 0.0 (oder 00) = transparent.

8-stelliges Hex (#RRGGBBAA) fugt zwei Alpha-Zeichen hinzu. Beispiel: #FF000080 = Rot mit 50% Deckkraft.

rgba() ist die gebrauchlichere Syntax: rgba(255, 0, 0, 0.5). Moderne Syntax: rgb(255 0 0 / 0.5).

Alpha-Konvertierung: Hex zu Dezimal: durch 255 teilen. Dezimal zu Hex: mit 255 multiplizieren und konvertieren.

/* Common alpha values: hex ↔ decimal */
100% opacity:  FF = 1.0    →  #FF0000FF  =  rgba(255, 0, 0, 1.0)
 90% opacity:  E6 = 0.9    →  #FF0000E6  =  rgba(255, 0, 0, 0.9)
 80% opacity:  CC = 0.8    →  #FF0000CC  =  rgba(255, 0, 0, 0.8)
 70% opacity:  B3 = 0.7    →  #FF0000B3  =  rgba(255, 0, 0, 0.7)
 60% opacity:  99 = 0.6    →  #FF000099  =  rgba(255, 0, 0, 0.6)
 50% opacity:  80 = 0.5    →  #FF000080  =  rgba(255, 0, 0, 0.5)
 40% opacity:  66 = 0.4    →  #FF000066  =  rgba(255, 0, 0, 0.4)
 30% opacity:  4D = 0.3    →  #FF00004D  =  rgba(255, 0, 0, 0.3)
 20% opacity:  33 = 0.2    →  #FF000033  =  rgba(255, 0, 0, 0.2)
 10% opacity:  1A = 0.1    →  #FF00001A  =  rgba(255, 0, 0, 0.1)
  0% opacity:  00 = 0.0    →  #FF000000  =  rgba(255, 0, 0, 0.0)

Haufig gestellte Fragen

Wie konvertiert man Hex zu RGB?

# entfernen, in 3 Paare teilen, jedes Paar von Hex in Dezimal umrechnen. #3B82F6 ergibt rgb(59, 130, 246).

Was ist der Unterschied zwischen Hex und RGB?

Hex und RGB stellen dieselben sRGB-Farben mit verschiedenen Zahlensystemen dar. Hex nutzt hexadezimale Notation, RGB drei Dezimalzahlen 0-255. #FF0000 und rgb(255, 0, 0) sind identisch.

Hex- und RGB-Farbformate zu verstehen ist eine Grundkompetenz. Nutzen Sie unser Tool fur sofortige Konvertierungen.

Konvertieren Sie Farben sofort mit unserem kostenlosen Hex-zu-RGB-Konverter.