Farbkonverter
Kostenloses Online-Tool zur Konvertierung zwischen HEX, RGB und HSL-Farbformaten.
#3498DB
🎨 Farbe wählen
HEX
Am häufigsten im Web verwendet
RGB
HSL
🎨 Vordefinierte Farben
Unterstützt die Konvertierung zwischen HEX-, RGB- und HSL-Farbformaten. Wählen Sie Farben direkt mit dem Farbwähler aus oder geben Sie Werte direkt ein.
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äfixRR: 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!