HEX-zu-RGB Konverter: Farbcode-Übersetzer

HEX-zu-RGB Konverter

#3b82f6 konvertiert zu rgb(59, 130, 246). Jedes Hex-Ziffernpaar wird direkt auf einen RGB-Kanal abgebildet: 3b ist der Rotkanal (59), 82 ist Grün (130) und f6 ist Blau (246). Beide Formate repräsentieren dieselbe Farbe.

Wie Hex auf RGB abgebildet wird

Ein Hex-Farbcode besteht aus sechs hexadezimalen Ziffern, die in drei Paare aufgeteilt werden. Hexadezimal ist zur Basis 16 und verwendet die Ziffern 0 bis 9 und die Buchstaben a bis f. Jedes Paar repräsentiert einen Kanalwert von 0 (hex 00) bis 255 (hex ff).

Für #3b82f6:

Hex Kurznotation

3-stellige Hex-Farben sind Abkürzungen für die 6-stelligen. Jede Ziffer wird verdoppelt: #rgb wird zu #rrggbb.

#f00  ->  #ff0000  ->  rgb(255, 0, 0)
#0f0  ->  #00ff00  ->  rgb(0, 255, 0)
#abc  ->  #aabbcc  ->  rgb(170, 187, 204)

Nicht jedes 6-stellige Hex kann abgekürzt werden.

Alphakanäle: 8-stelliges Hex und rgba()

Standard-6-stelliges Hex hat keine Deckkraft. Zwei Optionen für Transparenz:

Die erste ist rgba() in CSS: rgba(59, 130, 246, 0.5) fügt 50% Deckkraft hinzu.

Die zweite ist 8-stelliges Hex: #3b82f680. Die letzten beiden Ziffern sind der Alphakanal, ebenfalls von 00 bis ff.

CSS-Farbfunktionen

/* HEX */
color: #3b82f6;

/* RGB */
color: rgb(59 130 246);
color: rgba(59, 130, 246, 0.5);

/* HSL */
color: hsl(217 91% 60%);

Für statische Farben in einem Stylesheet ist HEX prägnant. Verwende rgb(), wenn du Farben aus CSS-Benutzereigenschaften erstellst. Verwende hsl(), wenn du Helligkeit oder Sättigung anpassen musst.

Konvertierung in Code

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))

hex_to_rgb('#3b82f6')  # (59, 130, 246)

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;
}