Farbkonverter (HEX / RGB / HSL)

So funktioniert es

Designer arbeiten in der Regel mit HEX-Codes (zum Beispiel solchen, die aus Figma oder einem Design-Programm kopiert wurden), während modernes CSS oft das HSL-Format nutzt, um den Farbton (Hue), die Sättigung oder die Helligkeit einer Farbe leicht anzupassen, ohne einen HEX-Code manuell neu zu berechnen — nützlich, um hellere oder dunklere Varianten einer Markenfarbe für Hover-, Disabled-Zustände oder dunkle Themes zu erzeugen. Dieses Tool erkennt automatisch, ob Sie einen HEX-, RGB- oder HSL-Code eingefügt haben, und wandelt ihn in das benötigte Format um.

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX ( #rrggbb ) und RGB ( rgb(r, g, b) ) beschreiben beide eine Farbe über ihre Rot-, Grün- und Blau-Komponenten — HEX im Zahlensystem zur Basis 16, RGB zur Basis 10 — und stellen genau dieselbe Information in zwei unterschiedlichen Schreibweisen dar. HSL (hsl(h, s%, l%)) beschreibt dieselbe Farbe anders: über ihren Farbton (einen Winkel auf dem Farbkreis), ihre Sättigung und ihre Helligkeit, was es viel intuitiver macht, „dieselbe Farbe beizubehalten, sie aber aufzuhellen" oder „dieselbe Helligkeit beizubehalten, aber den Farbton zu ändern".

Warum HSL statt HEX in CSS verwenden?

Weil es einfach ist, stimmige Varianten einer Farbe abzuleiten, indem nur die Helligkeitskomponente geändert wird (zum Beispiel hsl(217, 91%, 60%) für die Basisfarbe und hsl(217, 91%, 40%) für einen dunkleren Hover-Zustand), ohne jedes Mal einen neuen HEX-Code neu berechnen oder mit dem Auge raten zu müssen, ob der Farbton gleich bleibt.

100% lokale Verarbeitung: Die Umwandlung erfolgt direkt in Ihrem Browser über WebAssembly, ohne jeden Aufruf an einen externen Server.