Farbkonverter

Kostenloses Online-Tool zur Konvertierung zwischen HEX, RGB und HSL-Farbformaten.

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

R

G

B

HSL

H

S

L

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

Was sind Farbformate?

In digitalen Umgebungen gibt es verschiedene Möglichkeiten, Farben darzustellen. Jedes Format hat spezifische Verwendungszwecke und Vorteile, und je nach Situation sollte das geeignete Format gewählt werden.

Hauptfunktionen

• 3 Format-Unterstützung: HEX, RGB, HSL
• Echtzeitkonvertierung: Alle Formate werden automatisch aktualisiert, wenn ein Format geändert wird
• Farbwähler: Visuelle Farbauswahl
• Große Vorschau: Ausgewählte Farbe in großer Ansicht überprüfen
• Sofortiges Kopieren: Jedes Format mit einem Klick kopieren
• Voreingestellte Farben: 10 beliebte Farben verfügbar

Farbformat-Erklärungen

HEX (Hexadecimal) - Hexadezimal

Das am häufigsten verwendete Format im Web.

Format:

#RRGGBB

Beispiele:

#3498db  /* Blau */
#e74c3c  /* Rot */
#2ecc71  /* Grün */

Struktur:

• #: Präfix
• RR: Rot (00-FF)
• GG: Grün (00-FF)
• BB: Blau (00-FF)

3-stelliges Kurzformat:

#f00  /* Gleich wie #ff0000 */
#abc  /* Gleich wie #aabbcc */

Vorteile:

• Kompakt
• Standard-Format in CSS
• Einfach zu kopieren

Nachteile:

• Für Menschen schwer zu verstehen
• Farbanpassung nicht intuitiv

RGB (Red, Green, Blue)

Format mit den drei Primärfarben des Lichts.

Format:

rgb(R, G, B)

Beispiele:

rgb(52, 152, 219)   /* Blau */
rgb(231, 76, 60)    /* Rot */
rgb(46, 204, 113)   /* Grün */

Wertebereich:

• Jeder Kanal: 0-255
• 0 = dunkel, 255 = hell

RGBA (mit Transparenz):

rgba(52, 152, 219, 0.5)  /* 50% Transparenz */

Vorteile:

• Leicht verständlich
• Unabhängige Anpassung jedes Farbkanals möglich
• Intuitiv in der Programmierung

Nachteile:

• Länger als HEX
• Helligkeitsanpassung nicht intuitiv

HSL (Hue, Saturation, Lightness)

Format mit Farbton, Sättigung und Helligkeit.

Format:

hsl(H, S%, L%)

Beispiele:

hsl(204, 70%, 53%)   /* Blau */
hsl(6, 78%, 57%)     /* Rot */
hsl(145, 63%, 49%)   /* Grün */

Wertebereich:

• H (Hue): 0-360° (Farbrad)
  • 0° = Rot
  • 120° = Grün
  • 240° = Blau
• S (Saturation): 0-100% (Sättigung)
  • 0% = Grau
  • 100% = Reine Farbe
• L (Lightness): 0-100% (Helligkeit)
  • 0% = Schwarz
  • 50% = Reine Farbe
  • 100% = Weiß

HSLA (mit Transparenz):

hsla(204, 70%, 53%, 0.5)  /* 50% Transparenz */

Vorteile:

• Sehr intuitive Farbanpassung
• Einfache Helligkeits-/Sättigungsregelung
• Nützlich für Farbpalettengeneration

Nachteile:

• Weniger intuitiv als HEX/RGB
• Von einigen älteren Browsern nicht unterstützt

Farbformat-Vergleich

Merkmal	HEX	RGB	HSL
Kompaktheit	⭐⭐⭐	⭐⭐	⭐⭐
Lesbarkeit	⭐	⭐⭐	⭐⭐⭐
CSS-Unterstützung	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
Anpassungsfreundlichkeit	⭐	⭐⭐	⭐⭐⭐
Transparenz	✗	✓	✓

Anwendungsfälle

1. CSS-Styling

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. Farbpalettenerstellung

/* Ähnliche Farben einfach mit HSL erstellen */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* L erhöhen */
.darker    { color: hsl(204, 70%, 35%); }  /* L verringern */
.desaturate{ color: hsl(204, 40%, 53%); }  /* S verringern */

3. JavaScript dynamische Farben

// Verlauf mit RGB erstellen
for (let i = 0; i < 255; i++) {
  const color = `rgb(${i}, 100, 200)`;
  // verwenden
}

// Regenbogenfarben mit HSL
for (let h = 0; h < 360; h += 30) {
  const color = `hsl(${h}, 100%, 50%)`;
  // verwenden
}

4. Design-System

/* Farbverwaltung mit Variablen */
:root {
  --primary-h: 204;
  --primary-s: 70%;
  --primary-l: 53%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
}

5. Barrierefreiheit verbessern

// Textfarbe basierend auf Helligkeit bestimmen
function getTextColor(bgColor) {
  const [h, s, l] = parseHSL(bgColor);
  return l > 50 ? '#000000' : '#ffffff';
}

Konvertierungsformeln

HEX → RGB

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

RGB → HEX

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

RGB → HSL

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);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

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

Voreingestellte Farben

Dieses Tool bietet 10 beliebte Farben:

Farbe	HEX	Name
🔴	#e74c3c	Rot
🔵	#3498db	Blau
🟢	#2ecc71	Grün
🟠	#f39c12	Orange
🟣	#9b59b6	Lila
🔷	#1abc9c	Türkis
⚫	#34495e	Dunkelgrau
🟤	#e67e22	Braun
⚪	#95a5a6	Hellgrau
🟧	#d35400	Dunkelorange

Praktische Tipps

1. Farbe heller/dunkler machen

/* Original */
.button { background: hsl(204, 70%, 53%); }

/* 10% heller */
.button-light { background: hsl(204, 70%, 63%); }

/* 10% dunkler */
.button-dark { background: hsl(204, 70%, 43%); }

2. Transparenz hinzufügen

/* HEX mit Transparenz (8-stellig) */
#3498db80  /* 50% Transparenz */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

3. Komplementärfarbe finden

// In HSL H + 180 Grad
function getComplementary(h, s, l) {
  return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
}

4. Graustufen-Konvertierung

/* Sättigung auf 0 setzen */
.grayscale {
  filter: grayscale(100%);
  /* oder */
  background: hsl(204, 0%, 53%);
}

5. Farbbarrierefreiheit prüfen

// WCAG-Kontrastverhältnis berechnen
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 4.5:1 oder höher empfohlen (normaler Text)
// 3:1 oder höher empfohlen (großer Text)

Häufig gestellte Fragen

F: Welches Format sollte ich verwenden?

• HEX: Kompakte Verwendung in CSS, einfach zu kopieren
• RGB: Programmierung, wenn Kanalanpassung erforderlich
• HSL: Farbpalettenerstellung, Helligkeits-/Sättigungsanpassung

Generell wird HEX empfohlen!

F: Was ist der Unterschied zwischen 3-stelligem und 6-stelligem HEX?

3-stellig ist Kurzform von 6-stellig:

• #f00 = #ff0000
• #abc = #aabbcc

Für genaue Farben 6-stellig verwenden!

F: Warum ist der RGB-Maximalwert 255?

8 Bit = 2^8 = 256 mögliche Werte (0-255) Gesamtfarbanzahl = 256 × 256 × 256 = 16.777.216 Farben

F: Warum ist HSL H 360 Grad?

Weil das Farbrad ein Kreis ist. 360 Grad = eine volle Umdrehung

F: Wie stelle ich Transparenz dar?

• HEX: 8-stellig (#RRGGBBAA)
• RGB: RGBA verwenden
• HSL: HSLA verwenden

Verwandte Tools

• UUID Generator - Eindeutige Identifikatoren generieren
• Timestamp Converter - Unix-Zeitstempel und Datum konvertieren
• Hash Generator - MD5, SHA-256 Hash erstellen

Leistung

• Konvertierungsgeschwindigkeit: Unter Millisekunden
• Echtzeit-Aktualisierung: Sofort
• Speichernutzung: Minimal
• Offline-Betrieb: Vollständig unterstützt

Browser-Kompatibilität

Format	Chrome	Firefox	Safari	Edge
HEX	✓	✓	✓	✓
RGB	✓	✓	✓	✓
RGBA	✓	✓	✓	✓
HSL	✓	✓	✓	✓
HSLA	✓	✓	✓	✓

Datenschutz

Dieses Tool arbeitet vollständig clientseitig. Ihre ausgewählten Farbinformationen werden nicht an den Server gesendet und nur im Browser verarbeitet.

💬 War dieses Tool hilfreich?

Wenn Sie Fragen oder Verbesserungsvorschläge haben, geben Sie uns gerne Feedback!