PixConvert

Farbkonverter & Farbwähler

Wählen Sie eine beliebige Farbe und erhalten Sie sofort die HEX-, RGB- und HSL-Werte. Mit einem Klick kopieren Sie jedes Format — ideal für CSS, Design-Tools und Code.

#3B82F6
HEX
RGB
HSL

Ein Farbtool für Designer und Entwickler

Rechnen Sie in Echtzeit zwischen HEX, RGB und HSL um — und kopieren Sie die Werte direkt in Ihr CSS, Figma oder Ihre Design-Tokens.

Umrechnung in Echtzeit

Bearbeiten Sie ein beliebiges Format, und HEX, RGB und HSL werden im selben Moment neu berechnet. Kein Umwandeln-Button, keine Verzögerung.

Drei Formate synchron

HEX für Code, RGB für Berechnungen, HSL für intuitive Anpassungen. Alle drei bleiben verknüpft, sodass Sie Ihr Lieblingsformat wählen können.

Kopieren mit einem Klick

Jedes Format hat eine eigene Kopierschaltfläche, die CSS-fertige Werte in Ihre Zwischenablage legt. Fügen Sie sie direkt in Ihr Stylesheet ein.

Visueller Farbwähler

Wählen Sie jede Farbe visuell mit einem Farbwähler für das gesamte Spektrum. Ideal zum Aufnehmen, Feinabstimmen und Erkunden von Paletten.

CSS-fertige Ausgabe

Jedes Format wird als gültiges CSS ausgegeben — ohne Umformatieren, ohne Umwandeln. Funktioniert mit jedem modernen Browser und Design-Tool.

100 % privat — ohne Server

Alle Farbberechnungen laufen in Ihrem Browser. Farben, Paletten und Werte verlassen Ihr Gerät nie.

Wer den Farbkonverter nutzt

Vom CSS-Einsteiger bis zum Marketingteam, das ein Designsystem pflegt — ein Tool für jeden Workflow.

Webentwickler

Rechnen Sie Design-Tokens zwischen CSS Custom Properties, Tailwind-Konfigurationen und HEX-Codes aus dem Browser-Inspektor um.

  • CSS-Variablen und Tailwind-Farben
  • Figma-HEX für Themes in HSL umrechnen
  • Farbabweichungen zwischen Plattformen finden

Designer

Halten Sie Paletten in Figma, Sketch, Adobe und im Web konsistent — rechnen Sie jeden Farbton sofort zwischen Farbsystemen um.

  • HEX aus Figma für CSS exportieren
  • Sättigung und Helligkeit mit HSL anpassen
  • Markenfarben tool-übergreifend abgleichen

Marken- & Styleguide-Teams

Dokumentieren Sie Markenpaletten in allen Formaten, die Designer und Entwickler benötigen — HEX, RGB und HSL nebeneinander.

  • Markenpaletten in drei Formaten erstellen
  • Teilbare Farbspezifikationen erstellen
  • Alte Farbcodes überprüfen

So rechnen Sie Farben um

1

Wählen Sie eine Farbe mit dem Farbwähler oder geben Sie einen HEX-, RGB- oder HSL-Wert direkt in ein beliebiges Eingabefeld ein.

2

Alle Formate werden sofort aktualisiert — HEX-, RGB- und HSL-Werte werden bei jeder Änderung in Echtzeit neu berechnet.

3

Klicken Sie neben einem beliebigen Format auf „Kopieren“, um den Wert in die Zwischenablage zu übernehmen — bereit zum Einfügen in CSS, Figma oder Code.

Häufig gestellte Fragen

Antworten auf die häufigsten Fragen zur Umrechnung von Farben zwischen HEX, RGB und HSL.

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX (z. B. #FF5733) ist eine hexadezimale Darstellung, die in HTML und CSS verwendet wird. RGB (z. B. rgb(255, 87, 51)) definiert eine Farbe über ihre Rot-, Grün- und Blaukanäle. HSL (z. B. hsl(11, 100%, 60%)) definiert eine Farbe über Farbton, Sättigung und Helligkeit — für Designer bei kleinen Anpassungen oft intuitiver.

Kann ich einen HEX-Code direkt eingeben?

Ja. Klicken Sie in das HEX-Eingabefeld und geben Sie einen gültigen 6-stelligen HEX-Code (z. B. #3B82F6) ein oder fügen Sie ihn ein. Die RGB- und HSL-Werte werden automatisch aktualisiert. Sowohl das 3-stellige (#RGB) als auch das 6-stellige Format (#RRGGBB) wird unterstützt.

Werden die Farbdaten an einen Server gesendet?

Nein. Die gesamte Farbumrechnung erfolgt vollständig in Ihrem Browser mit JavaScript. Es wird nichts an einen Server gesendet.

Kann ich mit diesem Tool CSS-Farbwerte erhalten?

Ja — klicken Sie einfach neben HEX, RGB oder HSL auf „Kopieren“ und fügen Sie den Wert direkt in Ihr CSS ein. Alle drei Formate sind gültige CSS-Farbwerte, die von jedem modernen Browser unterstützt werden.