RevealTheme logo

Farbkonverter (HEX/RGB/HSL)

Wandeln Sie Farben zwischen den Formaten HEX, RGB und HSL um. Wählen Sie eine Farbe visuell aus oder geben Sie die Werte manuell ein.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

So verwenden Sie dieses Tool

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

Was ist der Farbkonverter (HEX/RGB/HSL)?

HEX, RGB und HSL sind drei Möglichkeiten, dieselbe Farbe auszudrücken. HEX (#RRGGBB) ist die gängigste Schreibweise in CSS und Design-Tools. RGB (rgb(R,G,B)) trennt die Kanäle numerisch. HSL (hsl(H,S%,L%)) ist für Menschen intuitiver: Der Farbton (Hue) ist die Farbe, die Sättigung ist die Intensität und die Helligkeit (Lightness) ist die Leuchtkraft. Verwenden Sie HSL beim Entwerfen von Paletten und konvertieren Sie zu HEX für die Umsetzung.

Häufige Anwendungsfälle

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

Häufig gestellte Fragen

Wann sollte ich HSL statt HEX verwenden?
Beim Entwerfen: Mit HSL können Sie Helligkeit oder Sättigung unabhängig voneinander anpassen. Konvertieren Sie anschließend zu HEX für den Code.
Und was ist mit OKLCH und modernen Farbräumen?
OKLCH ist perzeptuell gleichmäßig und besser für die Barrierefreiheit geeignet. Es wird in CSS Color Level 4 unterstützt (alle modernen Browser).

Verwandte Tools