Farbkonverter
Eine Farbe in hex, rgb() oder hsl() einfügen und alle drei Formate plus eine fertige Reihe Tints und Shades für Ihr Designsystem erhalten.
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)Not a color we can read. Try #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%).
The swatch row mixes the color with white (left) and black (right) at 20/40/60/80% — handy for hover states and dark-mode variants.
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Daten verlassen Ihr Gerät nie — sie werden auf keinen Server hochgeladen.
So verwenden Sie es
- 1Fügen Sie eine Farbe in einem der drei Formate ein — hex, rgb() oder hsl().
- 2Lesen Sie die konvertierten Werte und kopieren Sie den, den Sie brauchen.
- 3Nehmen Sie Tints und Shades aus der Farbfeldreihe darunter.
Farbkonverter
Füttern Sie ihn mit #0071e3, rgb(0, 113, 227) oder hsl(211, 100%, 45%) — der Parser erkennt das Format automatisch und gibt Hex, RGB und HSL auf einmal aus, jeweils mit Ein-Klick-Kopieren.
Unter den Werten mischt eine Tint-und-Shade-Reihe Ihre Farbe bei 20/40/60/80 %-Stufen mit Weiß und Schwarz: sofortige Hover-Zustände, Ränder und Dark-Mode-Varianten, ohne ein Designtool zu öffnen.
Häufige Fragen
Wie wird HSL zu RGB konvertiert?
Über die standardmäßige zylindrische RGB-Zuordnung: Chromatizität c = (1 − |2L − 1|) × S, ein Zwischenwert x aus dem Farbtonsektor, dann wird jeder Kanal um m = L − c/2 verschoben. Die Mathematik sind die Lehrbuchformeln, die Ergebnisse treffen also Designtools.
Warum wird mein Farbcode als ungültig angezeigt?
Akzeptierte Formen sind #RGB / #RRGGBB, rgb(r, g, b) und hsl(h, s%, l%). Kanäle müssen im Bereich liegen (0–255 für RGB, 0–360 für den Farbton, 0–100 % für den Rest), getrennt durch Komma oder Leerzeichen.
Wofür sind Tints und Shades gut?
Tints (mit Weiß gemischt) ergeben Hover-Hintergründe, Badges und Karten; Shades (mit Schwarz gemischt) ergeben gedrückte Zustände, Ränder und Dark-Mode-Oberflächen. Beide aus einer Markenfarbe abzuleiten hält jeden UI-Zustand visuell konsistent.
Verwandte Tools
Farbwähler
Eine Farbe aus dem Farbfeld wählen oder direkt vom Bildschirm greifen, mit der EyeDropper-API — hex, RGB und HSL in einem Klick kopiert.
Alle Tools →
QR-Code-Generator
Beliebigen Text oder eine URL in einen scharfen QR-Code verwandeln, mit einstellbarer Größe, Farben und Fehlerkorrekturstufe — Download als PNG oder SVG.
Alle Tools →
Seitenverhältnis-Rechner
Bei einem Verhältnis wie 16:9 und einer Dimension sofort fehlende Breite oder Höhe erhalten — plus Voreinstellungen von 1:1 bis 21:9 für Video und Design.
Alle Tools →
UUID-Generator
Zufällige UUID-v4-Kennungen in Mengen erzeugen — 1 bis 500 auf einmal, mit der kryptografischen Zufallsquelle Ihres Browsers. Kostenlos, sofort, offline-fähig.
Alle Tools →
Dieses Tool einbetten
Binden Sie dieses Tool mit einer Zeile in Ihre Website ein — es läuft im Browser des Besuchers.
<iframe src="https://zoyku.com/de/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>