Farbkonverter
Konvertieren Sie zwischen HEX, RGB und HSL mit Live-Vorschau.
Farbkonverter HEX, RGB und HSL für Webdesign
Im Webdesign und in der Frontend-Entwicklung werden Farben je nach Kontext in verschiedenen Modellen dargestellt. Das HEX-Format (#RRGGBB) ist das am häufigsten in CSS-Stylesheets verwendete aufgrund seiner Kürze. Das RGB-Modell (Red, Green, Blue) definiert Farben durch additive Mischung von Rot, Grün und Blau mit Werten von 0 bis 255 und ist das native Modell digitaler Bildschirme. HSL (Hue, Saturation, Lightness) ordnet Farben auf eine für Designer intuitivere Weise, indem Farbton, Sättigung und Helligkeit unabhängig voneinander angepasst werden können.
Unser Konverter wandelt jede Farbe in Echtzeit zwischen diesen drei Formaten um. Dies ist besonders nützlich, wenn Sie mit Design-Tools wie Figma oder Adobe XD arbeiten, die Farben im HEX-Format exportieren, aber RGB-Werte für JavaScript-Animationen benötigen, oder wenn Sie Farbvarianten erstellen möchten, indem Sie nur die Helligkeit in HSL anpassen. Die Live-Vorschau zeigt Ihnen genau, wie die Farbe aussieht, bevor Sie sie kopieren.
Sie können Werte manuell in jedem der drei Formate eingeben oder den nativen Farbwähler des Browsers verwenden, um visuell auszuwählen. Jedes Format enthält eine Kopierschaltfläche, die den Wert in die Zwischenablage legt, bereit zur Verwendung in Ihrem CSS-Code, JavaScript oder einem anderen Design-Tool.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX und RGB?
Beide repräsentieren exakt die gleichen Farben, nur die Notation unterscheidet sich. HEX verwendet Hexadezimalzahlen (Basis 16) im Format #RRGGBB, während RGB Dezimalzahlen von 0 bis 255 für jeden Kanal verwendet. Zum Beispiel ist Weiß #FFFFFF in HEX und rgb(255, 255, 255) in RGB. HEX ist kompakter für CSS, während RGB programmtechnisch leichter zu manipulieren ist.
Wann sollte man HSL verwenden?
HSL ist ideal, wenn Sie harmonische Farbpaletten oder Variationen eines Farbtons erstellen möchten. Durch die Trennung von Farbton (H), Sättigung (S) und Helligkeit (L) können Sie hellere oder dunklere Versionen einer Farbe erstellen, indem Sie einfach die Helligkeit anpassen, oder lebendigere bzw. gedämpftere Versionen durch Änderung der Sättigung, ohne den Grundton zu verändern.
Welches Farbmodell verwenden Browser?
Webbrowser verstehen alle drei Formate: HEX, RGB und HSL in CSS. Intern arbeiten Bildschirme mit RGB, da jeder Pixel aus roten, grünen und blauen Subpixeln besteht. Modernes CSS unterstützt jedoch auch fortgeschrittenere Modelle wie oklch und display-p3 für breitere Farbumfänge auf HDR-Displays.
Mehr erfahren? Lesen Sie unseren vollständigen Leitfaden →