HEX ↔ RGB ↔ HSL-Konverter

Konvertieren Sie Farben zwischen HEX-, RGB- und HSL-Formaten. Live-Vorschau, schnelle Presets, CSS-fertige Werte kopieren. 100% Client-seitig, keine Uploads.

Ein Farbkonverter übersetzt Farben zwischen verschiedenen Formatdarstellungen, die im Web design and digital graphics: HEX (#RRGGBB), RGB (0-255, 0-255, 0-255), HSL (hue, saturation, lightness), and HSV (hue, saturation, value). Each format describes the same color differently -- HEX is compact for CSS, HSL is intuitive for creating variations, and RGB maps directly to display hardware. This tool converts instantly as you type, vollständig in Ihrem Browser.

Farben sofort konvertieren, ohne Ihren Browser zu verlassen

HEX, RGB, and HSL — all three formats update in real time as you type or pick. Copy CSS-ready values in one click. No uploads, no sign-up, no limits.

Echtzeit-Konvertierung

CSS-ready output

Kostenlos und unbegrenzt

So geht's

1
Farbe wählen
Einen HEX-Wert eingeben, RGB-/HSL-Zahlenfelder anpassen oder ein Preset anklicken.
2
Live-Vorschau ansehen
Das Farbfeld oben wird sofort aktualisiert und zeigt die aktuelle Farbe.
3
Beliebiges Format kopieren
Verwenden Sie die Schaltfläche »Kopieren« neben HEX, RGB oder HSL, um einen CSS-fertigen Wert zu kopieren.

Warum diesen Farbkonverter verwenden?

Drei Formate, eine Ansicht

HEX, RGB und HSL sind gleichzeitig sichtbar und bearbeitbar — ändern Sie eines, werden die anderen sofort aktualisiert.

CSS-fertige Ausgabe

Die Kopier-Schaltflächen liefern `#RRGGBB`-, `rgb(r, g, b)`- oder `hsl(h, s%, l%)`-Zeichenketten, die sich direkt in CSS einfügen lassen.

Schnelle Presets

Starten Sie mit der Standardpalette von Tailwind CSS oder reinem Schwarz/Weiß und feinjustieren Sie dann mit den Schiebereglern.

Grundlagen der Farbformate

HEX, RGB, HSL, and HSV explained

HEX (#RRGGBB) ist das kompakteste Farbformat für Webdesign. Jedes Hexadezimalpaar (00-FF) repräsentiert die Intensität von Rot, Grün bzw. Blau. Der Wert 00 bedeutet, dass der Kanal aus ist (Schwarz), FF bedeutet maximale Intensität. Zum Beispiel ist #FF0000 reines Rot, #00FF00 reines Grün, #FFFFFF ist Weiß. HEX ist das Standardformat in CSS, HTML und Design-Tools, weil es kurz, eindeutig und einfach zu kopieren ist.

RGB verwendet Dezimalwerte (0-255) für dieselben drei Kanäle. Es ist das Format, das Display-Hardware nativ versteht. Jedes Pixel auf einem LCD- oder OLED-Bildschirm hat rote, grüne und blaue Subpixel, die jeweils auf 256 Helligkeitsstufen (0-255) eingestellt werden können. RGB wird auch in JavaScripts Canvas API (ctx.fillStyle = 'rgb(255, 0, 0)') und in Bildverarbeitungsbibliotheken verwendet. RGBA fügt einen Alpha-Kanal (0-1 oder 0-255) für Transparenz hinzu.

HSL (Farbton, Sättigung, Helligkeit) beschreibt Farben auf eine Weise, die für Menschen intuitiver ist. Der Farbton ist die Farbe selbst, gemessen als Winkel auf dem Farbkreis (0°=Rot, 120°=Grün, 240°=Blau). Die Sättigung ist die Lebhaftigkeit der Farbe (0 %=Grau, 100 %=volle Farbe). Die Helligkeit ist, wie dunkel oder hell (0 %=Schwarz, 50 %=Neinrmal, 100 %=Weiß). Mit HSL können Sie leicht Farbtöne (Helligkeit erhöhen), Schattierungen (Helligkeit verringern) und Töne (Sättigung verringern) einer Basisfarbe erstellen.

When to use each format

Verwenden Sie HEX für CSS und HTML – es ist das am weitesten unterstützte Format und das kürzeste. Verwenden Sie RGB, wenn Sie Farbkanäle programmatisch manipulieren müssen (z. B. zwei Farben mischen, indem Sie die RGB-Werte mitteln) oder wenn Sie Alpha-Transparenz (rgba()) benötigen. Verwenden Sie HSL, wenn Sie Farbvarianten erstellen müssen – z. B. den Hover-Zustand einer Schaltfläche durch Erhöhen der Helligkeit um 10 % oder eine monochromatische Palette durch Festlegen des Farbtons und Ändern von Sättigung und Helligkeit.

HSL ist besonders leistungsstark in CSS Custom Properties (CSS-Variablen). Sie können --hue: 210 definieren und dann hsl(var(--hue), 70%, 50%) im gesamten Stylesheet verwenden. Das Ändern einer einzigen Variablen aktualisiert das gesamte Farbschema. Mit HEX oder RGB wäre dies unmöglich, ohne alle Werte neu zu berechnen. Aus diesem Grund wechseln moderne CSS-Frameworks wie Tailwind v4 zu HSL-basierten Farbsystemen.

Häufige Anwendungsfälle

Design mit HSL

Eine Farbpalette aufbauen, indem ein Basisfarbton gewählt und die Helligkeit angepasst wird — in HSL viel einfacher als in RGB.

Figma-Farben in CSS konvertieren

Figma zeigt häufig HEX an; CSS benötigt manchmal RGB oder HSL (für `color-mix` oder Opazität). Den exakten String mit einem Klick erhalten.

Barrierefreiheitsprüfung

Dieses Tool mit dem Kontrast-Prüfer kombinieren, um zu verifizieren, dass Ihre Farbwahl die WCAG-Anforderungen erfüllt.

Theme-Anpassung

Schnell ein Tailwind-Preset durch eine eigene Markenfarbe ersetzen und den resultierenden HEX-Wert in Ihre Konfiguration kopieren.

Wie vergleicht sich dieses Tool mit anderen Farbkonvertern?

Ein direkter Vergleich beliebter Farbkonverter.

Funktion	NovaTools	RapidTables	W3Schools
HEX →RGB →HSL →HSV	Alle Formate		Eingeschränkt
Live-Vorschau beim Tippen	Sofort	Absenden-Button
Farbwähler-Integration	EyeDropper-API
Datenschutz (kein Upload)	100% local	Serverseitig
Copy CSS-ready values
Funktioniert offline

Die meisten Online-Farbkonverter verarbeiten Konvertierungen auf ihrem Server. Unser Tool führt alle Berechnungen in Ihrem Browser durch – Ihre Farbwerte werden nie übertragen oder gespeichert.

Häufig gestellte Fragen

Welche Farbformate werden unterstützt?

HEX (z. B. `#2563EB`), RGB (z. B. `rgb(37, 99, 235)`) und HSL (z. B. `hsl(217, 83%, 53%)`). Alle drei werden gleichzeitig aktualisiert, wenn Sie einen Wert ändern.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt eine Farbe durch ihre Rot-, Grün- und Blau-Anteile. HSL beschreibt sie durch Farbton (Farbkreiswinkel), Sättigung (Intensität) und Helligkeit. HSL ist für Designer intuitiver, weil Sie die Helligkeit ändern können, ohne die anderen Werte neu berechnen zu müssen.

Unterstützt das Tool die 3-stellige HEX-Kurzform?

Ja. Die Eingabe von `#fff` wird automatisch zu `#FFFFFF` erweitert. Die Ausgabe verwendet immer die 6-stellige Form für maximale Kompatibilität.

Kann ich CSS-fertige Werte kopieren?

Ja. Die Schaltfläche »Kopieren« neben jedem Format liefert `#2563EB`, `rgb(37, 99, 235)` oder `hsl(217, 83%, 53%)` — bereit zum direkten Einfügen in CSS.

Was passiert, wenn ich einen ungültigen HEX-Wert eingebe?

Das HEX-Feld ist ein Freitextfeld, in dem Sie beliebig eingeben können, aber die RGB- und HSL-Werte werden nur aktualisiert, wenn der HEX-Wert gültig ist. So können Sie experimentieren, ohne Ihre bisherige Farbe zu verlieren.

Wie konvertiere ich eine Tailwind-CSS-Farbe in RGB oder HSL?

Geben Sie einfach den Tailwind-HEX-Wert in das HEX-Feld ein (z. B. `#2563EB` für `blue-600`). Die RGB- und HSL-Werte werden sofort aktualisiert und Sie können sie mit einem Klick kopieren. Dies ist nützlich, wenn Sie eine Tailwind-Farbe in einem Kontext verwenden müssen, der RGB oder HSL erfordert — zum Beispiel `color-mix(in srgb, rgb(37, 99, 235) 50%, transparent)` oder `hsl(217, 83%, 53% / 0.5)` für Opazität. Sie können auch die integrierte Tailwind-Voreinstellungspalette verwenden, um von einer beliebigen Standard-Tailwind-Farbe auszugehen.

Kann ich dieses Tool verwenden, um eine Farbpalette zu erstellen?

Ja. HSL ist besonders gut für die Palettengenerierung geeignet, weil Sie den Farbton fixieren und die Helligkeit variieren können, um hellere und dunklere Varianten derselben Farbe zu erstellen. Zum Beispiel setzen Sie den Farbton auf 217 und die Sättigung auf 83 %, erstellen Sie dann fünf Variationen durch Änderung der Helligkeit auf 20 %, 40 %, 53 %, 70 % und 90 %. Jede Variation kann als HEX-Wert kopiert werden. Kombinieren Sie dieses Tool mit dem Kontrast-Checker, um zu überprüfen, ob Ihre Text-Hintergrund-Kombinationen den WCAG-Barrierefreiheitsstandards entsprechen.

Ihre Privatsphäre ist unsere Priorität

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden nicht hochgeladen, gespeichert oder analysiert.

Wir laden Ihre Dateien nicht hoch, speichern oder analysieren sie.
Alles, was Sie verarbeiten, bleibt auf Ihrem Gerät.
Es gibt keine serverseitige Verarbeitung, keinen Cloud-Speicher und keine Analyse.

Auch wenn Ihre Internetverbindung abbricht, bleiben Ihre Dateien sicher.

Das könnte Ihnen auch gefallen

Thema erkunden

Alle Tools in dieser KategorieFarbwerkzeuge Anleitungen zu diesem ThemaDesign & Barrierefreiheit

Farbwähler

Farben aus Bildern oder vom Bildschirm aufnehmen.

Farbkontrastprüfer

Farbenkontrast nach WCAG-Standards prüfen.

Farbpaletten-Generator

Schöne Farbpaletten erstellen.