Color Converter
Konvertieren Sie Farben zwischen HEX, RGB, HSL und HSV-Formaten mit visuellem Farbwähler
Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen
Oder bearbeiten Sie einen Wert unten
Was ist Farbkonvertierung?
Ein Farbkonverter übersetzt einen Farbwert von einer Notation in eine andere — zum Beispiel von einem HEX-Triplet (#6366F1) in ein RGB-Tupel (99, 102, 241) oder ein HSL-Triple (239, 84 %, 67 %). Dieselbe Farbe lässt sich auch als HSV-Triple (239, 59 %, 95 %) ausdrücken. Jedes Format kodiert dieselbe visuelle Farbe mit einem anderen mathematischen Modell. Verschiedene Werkzeuge, Sprachen und APIs erwarten je nach Kontext unterschiedliche Formate.
HEX und RGB beschreiben beide Farbe als Mischung aus rotem, grünem und blauem Licht. HEX ist eine kompakte hexadezimale Darstellung derselben drei Kanalwerte von 0 bis 255, die RGB dezimal aufführt. HSL (Hue, Saturation, Lightness) und HSV (Hue, Saturation, Value) ordnen dieselben Informationen in einem zylindrischen Koordinatensystem an, bei dem der Farbton ein Winkel auf dem Farbkreis ist (0–360 Grad) und Sättigung sowie Helligkeit als Prozentwerte angegeben werden. Das macht HSL und HSV intuitiver für Aufgaben wie das Erstellen hellerer oder dunklerer Abstufungen desselben Farbtons.
Die Konvertierung zwischen diesen Formaten erfordert klar definierte Mathematik. Die W3C CSS Color Module Level 4 Spezifikation dokumentiert die Algorithmen, die Browser verwenden, um eine beliebige CSS-Farbe in ein sRGB-Triplet aufzulösen. Die Formeln sind deterministisch: Eine bestimmte Eingabe liefert immer dieselbe Ausgabe. Konvertierungen sind verlustfrei, solange Werte nicht gerundet oder abgeschnitten werden. Die meisten Farbwähler und Design-Werkzeuge nutzen intern dieselben Formeln.
Wozu diesen Color Converter verwenden?
Design-Werkzeuge exportieren Farben in einem Format, Ihr CSS benötigt ein anderes, und die aufgerufene API erwartet ein drittes. Anstatt Konvertierungscode zu schreiben oder nach der richtigen Formel zu suchen, einen Wert einfügen und sofort alle Formate erhalten.
Anwendungsfälle
Farbformat-Referenz
Die nachstehende Tabelle listet die fünf gängigsten Farbformate auf und zeigt dieselbe Indigo-Farbe (#6366F1) in jeder Notation. HEX und RGB werden in CSS und JavaScript am breitesten unterstützt. HSL ist für das Theming bevorzugt, weil Helligkeit und Sättigung einfach angepasst werden können. HSV ist das Modell, das die meisten Farbwähler in Design-Software verwenden.
| Format | Beispiel (Indigo) | Kanäle | Typische Verwendung |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs. RGB vs. HSL
Alle drei Formate beschreiben denselben sRGB-Farbraum. Der Unterschied liegt darin, wie sie die Daten bereitstellen — das beeinflusst Lesbarkeit und Bearbeitbarkeit je nach Kontext.
Code-Beispiele
Farbkonvertierung zwischen HEX, RGB und HSL in gängigen Sprachen und Umgebungen. Jedes Beispiel verwendet zur leichteren Vergleichbarkeit dieselbe Indigo-Farbe (#6366F1).
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]
// RGB → HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255
const max = Math.max(r, g, b), min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return [0, 0, Math.round(l * 100)]
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]import colorsys
# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
h = hex_str.lstrip('#')
return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
hex_to_rgb('#6366f1') # → (99, 102, 241)
# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)
# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)package main
import (
"fmt"
"math"
)
func hexToRGB(hex string) (int, int, int) {
var r, g, b int
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
return r, g, b
}
func rgbToHSL(r, g, b int) (int, int, int) {
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, int(math.Round(l * 100))
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
case gf: h = (bf - rf) / d + 2
case bf: h = (rf - gf) / d + 4
}
return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}
func main() {
r, g, b := hexToRGB("#6366f1")
fmt.Println(r, g, b) // → 99 102 241
fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}/* Modern CSS supports multiple color formats natively */
/* HEX notation */
.button { color: #6366f1; }
/* RGB functional notation */
.button { color: rgb(99 102 241); }
/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }
/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }
/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }