Farbkonverter (HEX, RGB, HSL)
Konvertieren Sie Farben in Echtzeit zwischen HEX (#RRGGBB), RGB (0–255) und HSL (Farbton, Sättigung, Helligkeit). Passe die Auswahl oder die Typwerte an, um alle Formate gemeinsam zu aktualisieren — ideal für CSS, Figma-Übergabe und Markenrichtlinien.
So konvertieren Sie Farben
1. Wähle visuell eine Farbe aus oder geben Sie HEX-, RGB- oder HSL-Werte ein.
2. Sieh sofort äquivalente Werte in allen unterstützten Formaten.
3. Passe die HSL-Helligkeit für Hover-Zustände an und behalten Sie dabei den Markenfarbton bei.
4. Kopiere das Format, das dein Stack benötigt (#hex für CSS, rgb() für moderne Browser).
Beispiele für Farbkonvertierungen
Marke blau #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Verdunkeln Sie den Schwebeflug: hsl(217, 84%, 45%), ohne das Hex zu erraten.
CSS RGB zu HEX für SVG
rgb(255, 87, 51) → #FF5733 für SVG-Füll- und Android-XML-Farbressourcen.
Neutrales Grau für Ränder
hsl(220, 10%, 90%) → sehr helles kühles Grau; Erhöhen Sie die Sättigung für getönte UI-Hintergründe leicht.
Wann sich dieses Tool lohnt
• Wenn du Design-Tokens zwischen HEX in Figma und HSL in CSS-Variablen übersetzen.
• Wenn du konsistente Hell-Dunkel-Themen erstellen, indem Sie die HSL-Helligkeit verschieben.
• Wenn du Markenpaletten für Entwickler und Vermarkter dokumentieren.
Farbtheorie für UI-Arbeit
Komplementärfarben liegen im Farbkreis gegenüber (180° auseinander) — hoher Kontrast, sparsam für CTAs verwenden. Analoge Farbtöne (±30°) wirken harmonisch auf Armaturenbrettern. Neutrales UI-Chrom verwendet häufig Blau- oder Grautöne mit niedriger Sättigung (hsl 220, 10 %, 96 %) anstelle von reinem #EEE, das auf verschiedenen Bildschirmen warm/kalt aussehen kann. Beschränken Sie die Markenpalette auf einen Primärton, 2–3 Neutraltöne und semantische Grün-/Rottöne für den Status.
Häufige Fragen
Wofür ist HSL gut?
Anpassen von Helligkeit und Sättigung bei gleichzeitiger Beibehaltung des Farbtons — z. B. primär, primär schwebend, primär gedämpft von einem Farbtonwert.
HEX-Kurzschrift #RGB?
#F53 wird zu #FF5533 erweitert. Wir akzeptieren 3- oder 6-stellige Hexadezimalzahlen (optional #).
sRGB vs. Display-P3?
Dieses Tool verwendet sRGB, den Standard für Web-CSS. Bei Displays mit großem Farbumfang kann die Darstellung leicht abweichen.
Alpha / Transparenz?
8-stelliges HEX (#RRGGBBAA) und rgba() werden möglicherweise unterstützt, wenn das Tool Alpha-Felder zur Verfügung stellt — überprüfen Sie die UI-Felder.
Warum sehen meine RGB-Summen in Hex falsch aus?
Jeder Kanal ist 0–255 → zwei Hexadezimalstellen. 255 = FF, nicht „255“ verkettet.