Farbkonverter
Live PreviewZwischen HEX-, RGB- und HSL-Farbformaten konvertieren.
Supports #hex, rgb(r,g,b), hsl(h,s,l)
Farbmodelle erklärt (HEX/RGB/HSL)
Farbmodelle sind mathematische Systeme zur Darstellung von Farben. HEX (Hexadezimal) ist ein 6-stelliger Code, der in HTML und CSS verwendet wird und Rot-, Grün- und Blaukomponenten darstellt. RGB (Rot, Grün, Blau) verwendet Dezimalwerte von 0 bis 255 für jeden Kanal, häufig in der digitalen Bildverarbeitung eingesetzt.
HSL (Farbton, Sättigung, Helligkeit) ist für Menschen intuitiver, da es Farbe in Bezug auf ihren Grundfarbton (Hue), Intensität (Saturation) und Helligkeit (Lightness) beschreibt. Das Verständnis dieser Modelle hilft bei der Auswahl des richtigen Formats für Design- und Entwicklungsanforderungen, um Konsistenz über verschiedene Plattformen und Geräte hinweg zu gewährleisten.
So verwenden Sie dieses Tool
- Verwenden Sie den visuellen Farbwähler, um eine Farbe durch Ziehen des Cursors im Sättigungs-/Helligkeitsquadrat und dem Farbtonregler auszuwählen.
- Alternativ geben Sie einen bestimmten Wert in das Feld «Manuelle Eingabe» ein (unterstützt #hex, rgb oder hsl-Formate).
- Beobachten Sie das Vorschaufeld, um die ausgewählte Farbe in Echtzeit zu sehen.
- Zeigen Sie die konvertierten Werte in den HEX-, RGB-, HSL- und HSV-Karten unten an.
- Klicken Sie auf das «Kopieren»-Symbol auf einer Karte, um dieses spezifische Format in die Zwischenablage zu kopieren.
Häufige Anwendungsfälle
- Webdesign: Farben aus Design-Tools (oft RGB/HSL) in HEX-Codes für die Verwendung in CSS-Stylesheets konvertieren.
- Markenkonsistenz: Sicherstellen, dass Ihre Markenfarben über verschiedene digitale Formate und Medien hinweg korrekt dargestellt werden.
- UI-Entwicklung: Schnell hellere oder dunklere Variationen einer Grundfarbe generieren, indem der Helligkeitswert in HSL angepasst wird.
- Barrierefreiheitstests: Die Vorschau nutzen, um zu prüfen, ob die gewählten Farben ausreichend Kontrast für lesbaren Text und UI-Elemente bieten.
Profi-Tipps
- Verwenden Sie HSL beim Entwerfen von UI-Komponenten wie Schaltflächen, da es einfach macht, Hover-Zustände durch Anpassen des Helligkeitswerts zu erstellen.
- Bevorzugen Sie bei der Arbeit mit Transparenz in CSS
rgba()oderhsla()für bessere Lesbarkeit und Kontrolle über den Alpha-Kanal. - Überprüfen Sie immer Farbkontrastverhältnisse, um sicherzustellen, dass Ihre Designs für Benutzer mit Sehbeeinträchtigungen zugänglich sind.