MT
My Toolbox

Farbwähler — Farben zwischen HEX, RGB und HSL Umwandeln

HEX-Code eingeben, Farbe sehen, RGB und HSL sofort erhalten. Oder zufällige Farben für Inspiration generieren. Ein-Klick-Kopie in jedem Format. Für Entwickler und Designer die schnelle Farbkonvertierungen ohne Figma brauchen.

Wählen und konvertieren Sie Farben in verschiedenen Formaten

tools.colorPicker.hex

#3498db

tools.colorPicker.rgb

rgb(52, 152, 219)

tools.colorPicker.hsl

hsl(204, 70%, 53%)

tools.colorPicker.hex
tools.colorPicker.rgb
tools.colorPicker.hsl

Wählen und konvertieren Sie Farben in verschiedenen Formaten

tools.colorPicker.hex

#3498db

tools.colorPicker.rgb

rgb(52, 152, 219)

tools.colorPicker.hsl

hsl(204, 70%, 53%)

Farbformate Erklärt

Drei Formate, gleiche Farben. HEX (#FF5733) ist der Web-Standard — kompakt, einfach in CSS einzufügen. RGB (255, 87, 51) ist was Bildschirme tatsächlich verwenden — drei Kanäle je 0-255, Mischung aus rotem, grünem und blauem Licht. HSL (14°, 100%, 60%) ist wie Menschen über Farbe denken — Farbton ist die Position auf dem Farbkreis, Sättigung ist Intensität, Helligkeit ist hell vs dunkel.

Warum HSL für Entwickler wichtig ist: brauchst du eine dunklere Version einer Farbe? Einfach Helligkeit reduzieren. Gedämpfte Version? Sättigung reduzieren. Mit HEX/RGB müsstest du auf allen drei Kanälen rechnen. CSS unterstützt alle drei: color: #FF5733, color: rgb(255, 87, 51), color: hsl(14, 100%, 60%).

Der Alpha-Kanal (Transparenz) fügt einen 4. Wert hinzu: rgba(255, 87, 51, 0.5) oder hsla(14, 100%, 60%, 0.5) für 50% Deckkraft. In modernem CSS auch rgb(255 87 51 / 50%) — die neue leerzeichengetrennte Syntax.

Anleitung

  1. HEX-Code eingeben oder einfügen (mit oder ohne #) — Farbvorschau aktualisiert sofort.
  2. RGB- und HSL-Äquivalente unter der Vorschau ablesen.
  3. Zufalls-Button für neue Farbe zur Inspiration klicken.
  4. Jedes Format mit einem Klick kopieren — bereit zum Einfügen in CSS, Figma oder Code.

Wann Du Das Brauchst

Designers HEX-Farbe in RGB für Code umwandeln

Designer gibt dir #3B82F6 aus Figma. Du brauchst rgb() für eine dynamische Opazitäts-Variante in deiner Komponente. HEX einfügen, RGB-Werte nehmen, Alpha-Kanal hinzufügen.

Farbvariationen erstellen (heller/dunkler/gedämpft)

Du hast eine Markenfarbe und brauchst Hover-States, Disabled-States oder Hintergrund-Tönungen. In HSL umwandeln, dann Helligkeit anpassen (+20 heller, -20 dunkler) oder Sättigung (-30 gedämpft). Viel einfacher als HEX-Werte zu raten.

CSS-Farbprobleme debuggen

Eine Farbe sieht auf dem Bildschirm falsch aus und du bist nicht sicher ob der Wert stimmt. HEX aus DevTools hier einfügen, Vorschau sehen, mit Erwartung vergleichen.

Zufällige Farben für Prototyping generieren

Chart, Tag-System oder Avatar-Platzhalter bauen? Zufalls-Button ein paar Mal drücken um passende Farben zu finden.

Tipps und Fallstricke

1.

HSL für programmatische Farbmanipulation verwenden

5 Blautöne für ein Design-System nötig? Mit dem Basis-Blau in HSL starten, dann Varianten durch Helligkeits-Schritte generieren: 90%, 70%, 50%, 30%, 10%. Tailwind CSS macht intern genau das.

2.

HEX ist nicht case-sensitive

#ff5733, #FF5733 und #Ff5733 sind dieselbe Farbe. Die meisten Tools geben Großbuchstaben aus, aber CSS akzeptiert beides.

3.

Kontrastverhältnisse für Barrierefreiheit prüfen

WCAG verlangt 4.5:1 Kontrastverhältnis für normalen Text, 3:1 für großen Text. Eine schöne Farbe bringt nichts wenn Nutzer den Text darauf nicht lesen können.

4.

3-stelliges HEX ist Kurzschreibweise, kein anderes Format

#F00 wird zu #FF0000 erweitert (jede Ziffer verdoppelt). Funktioniert nur wenn jedes Paar identisch ist: #AABBCC → #ABC, aber #A1B2C3 hat keine Kurzform.

Beispiele

Tailwind Blue 500 in allen Formaten

Das Standard-Blau von Tailwind CSS — Konvertierung zwischen Formaten.

Input

#3B82F6

Output

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)

HSL-Anpassung von reinem Rot

Mit Rot starten, durch Reduzierung der Helligkeit von 50% auf 30% abdunkeln.

Input

hsl(0, 100%, 50%) → hsl(0, 100%, 30%)

Output

#FF0000 → #990000 (dunkleres Rot ohne Farbton-Änderung)

Funktionen

  • Sofortige Konvertierung zwischen HEX, RGB und HSL
  • Große Farbvorschau-Fläche — genau sehen was man bekommt
  • Zufallsfarben-Generator für schnelle Inspiration
  • Ein-Klick-Kopie für jedes Format
  • 3- und 6-stelliges HEX unterstützt, mit oder ohne #
  • Läuft 100% im Browser — keine Daten werden gesendet

Häufig Gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX (#RRGGBB) ist Hexadezimal-Notation — kompakt, CSS-Standard. RGB (r, g, b) gibt Rot/Grün/Blau-Intensität 0-255 an — was Monitore tatsächlich anzeigen. HSL (Farbton, Sättigung, Helligkeit) entspricht der menschlichen Farbwahrnehmung. Alle drei beschreiben denselben sRGB-Farbraum, nur verschiedene Koordinatensysteme.

Welches Format in CSS verwenden?

Statische Farben: HEX ist am häufigsten und kompaktesten. Farben mit Transparenz: rgb(r g b / alpha) oder hsl(h s l / alpha). Design-Systeme mit programmatischer Abstufungs-Generierung: HSL, weil Helligkeits-/Sättigungs-Anpassung intuitiv ist.

Warum sieht dieselbe Farbe auf verschiedenen Bildschirmen anders aus?

Bildschirmkalibrierung, Farbprofile und Gamut-Unterschiede. Eine Farbe in sRGB (#FF0000) sieht auf einem Wide-Gamut P3-Display anders aus als auf einem günstigen TN-Panel. Für Web-Arbeit in sRGB designen und akzeptieren dass exakte Farbwiedergabe auf allen Geräten unmöglich ist.

Wie mache ich eine Farbe programmatisch heller oder dunkler?

In HSL umwandeln, dann L (Helligkeit) anpassen. 50% ist die „reine" Farbe; Richtung 100% erhöhen für heller (nähert sich Weiß), Richtung 0% verringern für dunkler (nähert sich Schwarz). H und S gleich lassen um den Farbcharakter zu erhalten.

Was ist der Unterschied zwischen Transparenz und einer helleren Farbe?

Transparenz (Alpha) macht das Element durchsichtig — was dahinter ist scheint durch. Eine hellere Farbe (höhere HSL-Helligkeit) ist weiterhin vollständig deckend aber mit Weiß gemischt. Auf weißem Hintergrund sehen sie ähnlich aus, auf farbigem oder Bild-Hintergrund sehr unterschiedlich.

Tipps und verwandte Workflows