So verwenden Sie den Farbenkonverter

Klicken Sie auf das Farbfeld oder den Farbwähler, um eine Farbe visuell auszuwählen.
Oder geben Sie einen Wert direkt in ein Formatfeld ein, HEX, RGB, HSL oder OKLCH, und alle anderen aktualisieren sich sofort.
Klicken Sie neben einem Format auf Kopieren, um es in die Zwischenablage zu kopieren.

HEX, RGB, HSL, OKLCH, was sind die Unterschiede?

HEX (#RRGGBB) ist das gängigste Farbformat im Web. Jedes Zeichenpaar ist ein Hexadezimalwert von 00 (0) bis FF (255), der den Rot-, Grün- und Blaukanal darstellt. Beispiel: #3498db ist ein mittleres Blau. Die Kurzform #RGB existiert für Farben, bei denen sich jedes Paar wiederholt (z.B. #fff = #ffffff).

RGB (Rot, Grün, Blau) drückt jeden Kanal als Zahl von 0 bis 255 aus. CSS akzeptiert sowohl rgb(52, 152, 219) als auch die moderne Syntax rgb(52 152 219).

HSL (Farbton, Sättigung, Helligkeit) ist das intuitivste Format für Designer. Der Farbton ist ein Winkel auf dem Farbrad (0-360°). Sättigung steuert die Intensität (0% = Grau). Helligkeit passt die Helligkeit an (0% = Schwarz, 100% = Weiß). Durch Erhöhen oder Verringern der Helligkeit entstehen Töne und Schattierungen desselben Farbtons.

OKLCH (Helligkeit, Chroma, Farbton) ist der moderne perzeptuelle Farbraum, der in CSS Color Level 4 definiert ist. Sein Helligkeitswert ist perceptuell gleichmäßig und er unterstützt eine breitere Farbpalette als sRGB, einschließlich der P3-Farben moderner Bildschirme.

Welches Format sollten Sie in CSS verwenden?

Verwenden Sie HEX für schnelle Referenzen und Design-Tokens, kompakt und universell verstanden
Verwenden Sie HSL für Theming-Systeme, bei denen Sie Varianten durch Anpassen eines einzelnen Werts erstellen
Verwenden Sie OKLCH für moderne CSS-Design-Systeme mit konsistenten Farbrampen und Wide-Gamut-Unterstützung
Verwenden Sie RGB bei Canvas, WebGL oder Bibliotheken, die numerische Kanäle erwarten