Einführung
Der Farbkonverter hilft Designern und Entwicklern, Farben zwischen HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV und HSVA umzuwandeln. Er ist nützlich für Design-Handoff, CSS, UI Tokens, Canvas-Code und schnelle Farbtests.
Anleitung
Geben Sie eine Farbe in HEX, RGB, HSL oder HSV ein oder passen Sie die Steuerelemente an. Alle Formate werden sofort aktualisiert. Prüfen Sie die Vorschau, ändern Sie Alpha und kopieren Sie den passenden Wert für CSS, Tokens oder Code.
Funktionen
- •Konvertiert HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV und HSVA
- •Live-Vorschau mit Transparenz
- •CSS-Werte zum Kopieren
- •Hilfreich für UI Design, Frontend und Token-Bereinigung
- •Beispiele und schnelle Farbfelder
- •Keine Installation oder Anmeldung
Warum Farbformate wichtig sind
Verschiedene Formate erfüllen verschiedene Aufgaben. HEX ist kompakt und üblich im Design-Handoff. RGB entspricht Bildschirmkanälen. HSL ist oft intuitiver für Anpassungen von Farbton, Sättigung und Helligkeit.
Das richtige Format wählen
Nutzen Sie HEX für kurze statische Werte, RGB/RGBA für programmatische Kanäle oder Transparenz und HSL/HSLA für Theme-Varianten.
Kontrast und Lesbarkeit
Eine Konvertierung garantiert keine Lesbarkeit. Prüfen Sie Kontrast für Text, Buttons und Statusfarben. Bei schwachem Kontrast Helligkeit, Sättigung oder Hintergrund anpassen.
Alpha und 8-stelliges HEX
8-stelliges HEX fügt dem 6-stelligen Farbwert einen Alpha-Kanal hinzu. In #3366CC80 stehen die letzten zwei Zeichen für Transparenz.
Farbformat-Leitfaden
Kurzer Vergleich gängiger Formate.
| Format | Beispiel | Geeignet für |
|---|---|---|
| HEX | #3366CC | Statische CSS-Farben |
| HEXA | #3366CC80 | Statische Farben mit Alpha |
| RGB | rgb(51, 102, 204) | Programmierbare Farbkanäle |
| RGBA | rgba(51, 102, 204, 0.5) | Overlays und Schatten |
| HSL | hsl(220, 60%, 50%) | Theme-Varianten |
| HSV | hsv(220, 75%, 80%) | Color-Picker-Workflows |
Häufige Alpha-Werte
Referenz für Opazität und 8-stelliges HEX.
| Opazität | Ca. HEX Alpha | Nutzung |
|---|---|---|
| 100% | FF | Voll deckend |
| 75% | BF | Starkes Overlay |
| 50% | 80 | Halbtransparent |
| 25% | 40 | Dezentes Overlay |
| 10% | 1A | Sehr leichte Tönung |
Häufige Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX ist kompakt, RGB nutzt Rot/Grün/Blau-Kanäle und HSL nutzt Farbton, Sättigung und Helligkeit.
Wird Transparenz unterstützt?
Ja. RGBA, HSLA, HSVA und 8-stelliges HEXA werden unterstützt.
Kann ich Ergebnisse direkt in CSS nutzen?
Ja. Sie können sie in color, background-color, border-color, Schatten und Gradients einfügen.
Welches Format passt zu Designsystemen?
HEX ist üblich für feste Tokens, HSL ist praktisch für Varianten.
Ändert Konvertierung die Darstellung?
Äquivalente Werte sollten gleich aussehen, aber Transparenz, Farbprofile und Displays beeinflussen die Wahrnehmung.