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. HSL macht intuitive Anpassungen (heller/dunkler ohne Farbtonverschiebung) einfacher als das Bearbeiten von Hexadezimalziffern.
Farbe
Result
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
Wann du besser etwas anderes wählst?
• Wenn du den WCAG-Kontrast überprüfen müssen, verwenden Sie den Kontrastprüfer.
• Wenn du CMYK oder Pantone zum Drucken benötigen, verwenden Sie druckspezifische Tools.
• Wenn du vollständige Verläufe generieren, verwenden Sie den CSS-Verlaufsgenerator.
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.
Barrierefreiheit beginnt bei der Konvertierung
Ein schönes #7C3AED Lila auf Weiß kann bei kleinem Text zu einem Kontrastverlust führen. Nachdem Sie hier Farben ausgewählt haben, lassen Sie Vordergrund-/Hintergrundpaare durch den Kontrastprüfer laufen. Bevorzugen Sie HSL-Optimierungen, um Fehler zu beheben: Text abdunkeln oder Hintergrund aufhellen, während der Farbton erhalten bleibt. Verlassen Sie sich bei Fehlern nicht allein auf die Farbe, sondern kombinieren Sie sie mit Symbolen und Beschriftungen (WCAG 1.4.1).
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.
Werden meine Daten an einen Server gesendet?
No.
Ist das Tool kostenlos?
Yes.