Farbkonverter (HEX/RGB/HSL)
Konvertieren Sie Farben zwischen HEX-, RGB- und HSL-Formaten. Mit visuellem Farbwähler und Vorschau.
Anleitung
- Geben Sie einen Farbwert in einem beliebigen Format ein (HEX, RGB oder HSL)
- Sehen Sie sofort die konvertierten Werte in allen anderen Formaten
- Verwenden Sie den Farbwähler, um eine Farbe visuell auszuwählen
- Kopieren Sie ein beliebiges Format mit der Schaltfläche Kopieren
Häufig gestellte Fragen
-
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX verwendet hexadezimale Notation (#FF5733). RGB definiert Farben durch Rot-, Grün-, Blau-Werte (0-255). HSL definiert Farben durch Farbton (0-360), Sättigung (0-100%) und Helligkeit (0-100%).
-
Welches Farbformat sollte ich in CSS verwenden?
Alle drei Formate sind in CSS gültig. HEX ist am kompaktesten, RGB ist intuitiv zum Mischen von Farben, und HSL eignet sich am besten zum Erstellen von Farbvariationen durch Anpassen von Helligkeit oder Sättigung.
-
Wird Alpha/Transparenz unterstützt?
Die aktuelle Version konvertiert opake Farben. Die Unterstützung für Alphakanäle (RGBA, HSLA, 8-stelliges HEX) ist für ein zukünftiges Update geplant.
-
Kann ich den Farbwähler auf dem Handy verwenden?
Ja, die Farbeingabe verwendet den nativen Farbwähler auf allen Geräten, einschließlich mobiler Browser.
Farbformate im Web: HEX, RGB und HSL
Farben im Web lassen sich auf verschiedene Weisen ausdrücken. Die drei gebräuchlichsten Formate — HEX, RGB und HSL — beschreiben dieselbe Farbe auf unterschiedliche Arten, und jedes hat seine Stärken in bestimmten Anwendungssituationen.
HEX: Kompakt und allgegenwärtig
Das HEX-Format ist das älteste und am weitesten verbreitete CSS-Farbformat. Es stellt Rot-, Grün- und Blauwerte als jeweils zwei Hexadezimalstellen dar:
#FF0000= reines Rot (R:255, G:0, B:0)#000000= Schwarz#FFFFFF= Weiß#3B82F6= ein typisches Blau
Die Kurzform #RGB (z.B. #F00 für #FF0000) ist erlaubt, wenn beide Stellen identisch sind. HEX ist ideal für feste Farbpaletten und Design-Tokens, da es kompakt und sofort erkennbar ist. Designer und Entwickler kennen ihre Markenfarben oft als HEX-Werte auswendig.
RGB: Intuitiv beim Mischen
RGB (Red, Green, Blue) definiert Farben durch drei Werte zwischen 0 und 255. Das additive Farbmodell entspricht der Funktionsweise von Bildschirmen: Rot, Grün und Blau zusammen ergeben Weiß.
color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 0.5); /* 50% transparent */
RGB ist besonders nützlich, wenn man Farben programmatisch mischen oder Transparenz über den Alpha-Kanal steuern will. JavaScript-Berechnungen mit Farbwerten sind in RGB oft einfacher als in HEX.
HSL: Ideal für Farbvariationen
HSL (Hue, Saturation, Lightness) denkt Farben anders:
- Hue (Farbton): Ein Winkel auf dem Farbrad, 0–360° (0° = Rot, 120° = Grün, 240° = Blau)
- Saturation (Sättigung): Wie lebhaft die Farbe ist, 0% = grau, 100% = vollständig gesättigt
- Lightness (Helligkeit): 0% = schwarz, 50% = normale Farbe, 100% = weiß
Das macht HSL zum mächtigsten Format für Farbvariationen in CSS. Um eine hellere und dunklere Version einer Farbe zu erstellen:
--brand: hsl(220, 90%, 56%);
--brand-light: hsl(220, 90%, 70%);
--brand-dark: hsl(220, 90%, 40%);
Nur der Helligkeitswert ändert sich — Farbton und Sättigung bleiben konstant. Das ist viel intuitiver als das manuelle Anpassen von HEX-Werten.
Wann welches Format in CSS verwenden?
| Situation | Empfohlenes Format |
|---|---|
| Design-Tokens und Markenwerte | HEX |
| Transparenz und Alpha-Kanal | RGBA oder HSLA |
| Hover- und Fokusvarianten | HSL |
| Programmatische Farbberechnung | RGB oder HSL |
| Gradients mit Farbvariationen | HSL |
Modernes CSS: oklch und color()
Moderne CSS-Spezifikationen führen neue Farbräume ein, darunter oklch und display-p3. Diese ermöglichen einen breiteren Farbraum (besonders auf OLED- und P3-fähigen Displays) und haben in oklch ein noch intuitiveres Helligkeitsmodell als HSL. Für neue Projekte, die breite Browserunterstützung haben, lohnt sich ein Blick auf diese modernen Formate.
Farbkontrast und Barrierefreiheit
Bei der Farbwahl im Web sind WCAG-Kontrastanforderungen zu beachten: Text auf farbigem Hintergrund benötigt ein Kontrastverhältnis von mindestens 4,5:1 (AA) bzw. 7:1 (AAA). Tools zur Kontrastprüfung arbeiten intern mit den RGB-Werten einer Farbe — ein weiterer Grund, die Konvertierung zwischen Formaten routiniert zu beherrschen.