Farbwähler & HEX Konverter

Wähle Farben oder konvertiere zwischen HEX, RGB und HSL mit integrierter Palette und Vorschau, praktisch für Designer, Entwickler und kreative Projekte.

Wie hilfreich ist dieses Tool?

Ergebnis erscheint hier …

Video: So nutzt du dieses Tool

Das Video wird von YouTube gehostet. Beim Abspielen können Daten an Google übertragen werden.

HEX, RGB & HSL verstehen – Farbformate fürs Web einfach erklärt

Farben im Web lassen sich auf verschiedene Arten beschreiben. Die drei wichtigsten Formate sind HEX, RGB und HSL. Unser Farbrechner rechnet zwischen allen drei um – praktisch für Webentwickler, Designer und alle, die Farbe im Browser einsetzen.

HEX (#RRGGBB) – Der Web-Standard

HEX-Farben sind die verbreitetste Schreibweise in HTML und CSS. Eine HEX-Farbe besteht aus einer Raute (#) und sechs hexadezimalen Zeichen (0–9, A–F). Die ersten beiden Zeichen sind der Rot-Anteil, die mittleren Grün, die letzten Blau.

Beispiele:

  • #FF0000 – reines Rot
  • #00FF00 – reines Grün
  • #0000FF – reines Blau
  • #FFFFFF – Weiß
  • #000000 – Schwarz
  • #3366FF – kräftiges Blau, oft für Links und Buttons

Eingesetzt wird HEX in CSS (color: #333;), HTML und so gut wie jeder Grafiksoftware.

RGB (Rot, Grün, Blau) – Additive Farbmischung

RGB beschreibt eine Farbe über drei Zahlen (0–255) für die Lichtanteile. Wo HEX kompakt ist, ist RGB oft intuitiver, weil die Helligkeit jedes Kanals direkt ablesbar ist.

Beispiele:

  • rgb(255, 0, 0) – reines Rot
  • rgb(0, 255, 0) – reines Grün
  • rgb(51, 102, 255) – entspricht #3366FF
  • rgb(255, 255, 255) – Weiß
  • rgb(128, 128, 128) – Mittelgrau

Verwendet wird RGB in CSS, Bildbearbeitung, Display-Farben und Programmierschnittstellen wie Canvas oder WebGL. Mit rgba() kommt ein Alpha-Wert für Transparenz dazu – z.B. rgba(51, 102, 255, 0.5) für halbtransparentes Blau.

HSL (Farbton, Sättigung, Helligkeit) – Farben nach Gefühl wählen

HSL steht für Hue (Farbton 0–360°), Saturation (Sättigung 0–100%) und Lightness (Helligkeit 0–100%). Anders als HEX oder RGB ist HSL für Menschen intuitiver: Du wählst zuerst den Farbton und passt dann Sättigung und Helligkeit an.

Beispiele:

  • hsl(0°, 100%, 50%) – reines Rot
  • hsl(120°, 100%, 50%) – reines Grün
  • hsl(240°, 100%, 50%) – reines Blau
  • hsl(220°, 100%, 60%) – entspricht #3366FF
  • hsl(0°, 0%, 50%) – Mittelgrau

HSL ist besonders praktisch für CSS-Farbpaletten und Themes. Änderst du nur den Farbton, bleiben Sättigung und Helligkeit einheitlich – das macht konsistente Farbschemata einfach. Moderne CSS-Features wie oklch() bauen auf dem gleichen Prinzip auf.

Warum drei Formate?

HEX ist kompakt und überall kompatibel. RGB ist präzise, wenn du die Farbmischung nachvollziehen willst. HSL ist am besten, wenn du Farben nach Gefühl wählst – Farbton einstellen, Sättigung und Helligkeit justieren, fertig. Unser Tool zeigt dir alle drei auf einen Blick.

Häufige Fragen

Welche Farbformate kann ich umrechnen?

Das Tool rechnet zwischen HEX, RGB und HSL um und zeigt dir alle drei Schreibweisen einer Farbe gleichzeitig an.

Was bedeutet eine HEX-Farbe?

HEX ist die kompakte Schreibweise in HTML und CSS, zum Beispiel #3366FF. Die ersten beiden Zeichen stehen für Rot, dann folgen Grün und Blau.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt die Lichtanteile Rot, Grün und Blau mit Werten von 0 bis 255. HSL beschreibt Farbton, Sättigung und Helligkeit, was sich intuitiver anpassen lässt.

Kann ich eine Farbe direkt auswählen?

Ja. Du kannst eine Farbe über den Farbwähler festlegen oder einen HEX-Wert eingeben und erhältst sofort RGB und HSL als passende Werte.

Wie übernehme ich einen Farbwert in mein Projekt?

Klicke auf die gewünschte Schreibweise, sie wird in die Zwischenablage kopiert und lässt sich direkt in CSS oder deine Design-Software einfügen.

Für wen eignet sich das Farbrechner-Tool?

Für Webentwickler, Designer und alle, die Farben im Browser einsetzen. Die Umwandlung läuft lokal, deine Farbwerte werden nirgendwo gespeichert.

Kein Konto nötig. Warum lokale Tools ohne Anmeldung und Upload bei Datenlecks die sicherere Wahl sind, und welche Aufgaben du so erledigen kannst: Ein Konto nur fürs Bildzuschneiden?