Zum Hauptinhalt springen

Farbkonverter

Der Farbkonverter ist ein Online-Tool, das zwischen HEX-, RGB- und HSL-Farbformaten konvertiert. Unterstützt bidirektionale Echtzeit-Konvertierung und vordefinierte Farbauswahl.

#3498DB

🎨 Farbauswahl

HEX

Am häufigsten im Web verwendet

RGB

HSL

🎨 Vordefinierte Farben

Unterstützt Konvertierung zwischen HEX-, RGB- und HSL-Farbformaten. Wählen Sie Farben direkt mit dem Farbwähler aus oder geben Sie Werte manuell ein.

Funktionen​

  • Mehrformat-Unterstützung: Unterstützt HEX-, RGB-, HSL-Formate
  • Echtzeitkonvertierung: Synchronisiert automatisch alle Formate
  • Farbvorschau: Zeigt die ausgewählte Farbe in Echtzeit an
  • Vordefinierte Farben: Schnellauswahl von 10 gängigen Farben
  • Ein-Klick-Kopie: Kopieren Sie schnell den Farbwert in jedem Format

Farbformate​

HEX (Hexadezimal)​

6-stelliger Hexadezimalcode, der die Farbe darstellt:

#RRGGBB
#FF5733 → Rot:255, Grün:87, Blau:51

RGB (Rot Grün Blau)​

Verwendet drei Werte im Bereich 0-255:

rgb(255, 87, 51)

HSL (Farbton, Sättigung, Helligkeit)​

  • Farbton (H): 0-360 Grad (Farbe auf dem Farbkreis)
  • Sättigung (S): 0-100% (Farbintensität)
  • Helligkeit (L): 0-100% (Helligkeit/Dunkelheit)
hsl(9, 100%, 60%)

Programmierbeispiele​

JavaScript​

// HEX zu 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;
}

console.log(hexToRgb('#FF5733'));
// Ausgabe: {r: 255, g: 87, b: 51}

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

console.log(rgbToHex(255, 87, 51));
// Ausgabe: #ff5733

CSS-Verwendung​

/* HEX */
.element {
  color: #FF5733;
}

/* RGB */
.element {
  color: rgb(255, 87, 51);
}

/* RGBA (mit Transparenz) */
.element {
  color: rgba(255, 87, 51, 0.5);
}

/* HSL */
.element {
  color: hsl(9, 100%, 60%);
}

/* HSLA (mit Transparenz) */
.element {
  color: hsla(9, 100%, 60%, 0.5);
}

Vordefinierte Farben​

FarbnameHEXRGBVerwendung
Rot#FF0000rgb(255, 0, 0)Fehler, Warnung
Blau#0000FFrgb(0, 0, 255)Link, Information
Grün#00FF00rgb(0, 255, 0)Erfolg, Bestätigung
Gelb#FFFF00rgb(255, 255, 0)Warnung, Aufmerksamkeit
Lila#800080rgb(128, 0, 128)Kreativität, Luxus
Orange#FFA500rgb(255, 165, 0)Aktion, Energie
Rosa#FFC0CBrgb(255, 192, 203)Romantik, Sanftheit
Cyan#00FFFFrgb(0, 255, 255)Frische, modern
Grau#808080rgb(128, 128, 128)Neutral, Balance
Schwarz#000000rgb(0, 0, 0)Kontrast, Eleganz

Anwendungsfälle​

1. Webentwicklung​

Farben in CSS definieren:

:root {
  --primary-color: #667eea;
  --secondary-color: rgb(102, 126, 234);
  --accent-color: hsl(232, 75%, 67%);
}

2. Designsystem​

Konsistente Farbpalette erstellen:

const colors = {
  primary: {
    hex: '#667eea',
    rgb: 'rgb(102, 126, 234)',
    hsl: 'hsl(232, 75%, 67%)'
  }
};

3. Datenvisualisierung​

Farbcodes in Diagrammen und Grafiken verwenden.

Verwandte Tools​