Farbwähler & Konverter
Wählen Sie Farben aus und konvertieren Sie zwischen HEX-, RGB- und HSL-Formaten. Erstellen Sie Farbschemata.
Farbwähler
HEX
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Wählen Sie Farben aus und konvertieren Sie zwischen HEX-, RGB- und HSL-Formaten. Erstellen Sie Farbschemata.
Dieser Auswähler erledigt drei Aufgaben an einem Ort: Er lässt dich eine Farbe visuell wählen, zeigt dieselbe Farbe gleichzeitig als HEX, RGB und HSL und leitet daraus drei klassische Harmonien ab. Er richtet sich an alle, die CSS schreiben, einen Markenwert abgleichen oder einen Farbton aus einer Design-Spezifikation ohne Raten in Code übertragen wollen.
HEX und RGB kodieren dieselben drei Zahlen. #3b82f6 zerfällt in 3b Rot, 82 Grün und f6 Blau, jeweils ein hexadezimales Byte von 00 bis ff, also 59, 130 und 246 in Dezimal. Deshalb sind rgb(59, 130, 246) und #3b82f6 identisch und das Tool kann verlustfrei zwischen ihnen umrechnen.
HSL beschreibt dieselbe Farbe mit Begriffen, über die Menschen nachdenken können. Der Farbton ist der Winkel auf dem Farbrad, von Rot bei 0 über Grün bei 120 bis Blau bei 240. Sättigung gibt an, wie weit die Farbe von Grau entfernt ist. Helligkeit läuft von Schwarz bei 0 % über den reinen Farbton bei 50 % bis Weiß bei 100 %. Um einen Hover-Zustand zu bauen, behältst du Farbton und Sättigung und verschiebst die Helligkeit; die Arithmetik dahinter übernimmt das Tool.
HEX ist der Standard für feste Marken- und UI-Farben: kompakt, universell unterstützt und überall gleich lesbar. RGB ist praktisch, wenn ein Wert aus einem Design-Tool kommt oder du Alpha brauchst, da rgba() es direkt erweitert. HSL verdient seinen Platz, wenn Farben erzeugt oder thematisiert werden statt fest zu sein. Weil Farbton, Sättigung und Helligkeit getrennte Zahlen sind, kannst du einen Marken-Farbton konstant halten und die Helligkeit für Hover-Zustände variieren oder die Sättigung für deaktivierte Steuerelemente senken, ohne irgendetwas von Hand nachzurechnen. CSS-Custom-Properties machen das besonders sauber: Speichere die drei HSL-Komponenten getrennt und setze sie mit hsl(var(--h) var(--s) var(--l)) wieder zusammen. Dieser Auswähler liefert alle drei, damit du einfügen kannst, was zu deinem Code passt.
Jede Harmonie behält Sättigung und Helligkeit der Basisfarbe und dreht nur den Farbton:
| Harmonie | Farbton-Änderungen | Angezeigte Farbfelder |
|---|---|---|
| Komplementär | +180 | Basis plus 1 |
| Analog | -30, +30 | Basis plus 2 |
| Triadisch | +120, +240 | Basis plus 2 |
Komplementärpaare liefern starken Figur-Grund-Kontrast, analoge Gruppen sind sicher für Hintergründe und dezente Akzente, und triadische Schemata liefern drei unterschiedliche, aber ausgewogene Farben. All das sind Ausgangspunkte: Prüfe das Ergebnis auf Barrierefreiheit, statt dich allein auf das Farbrad zu verlassen.
Komplementärfarben liegen sich auf dem Rad gegenüber und erzeugen den stärksten Kontrast, was sie gut für einen Call-to-Action vor neutralem Hintergrund macht, aber hart über großen Textflächen. Analogfarben liegen innerhalb von 60 Grad und wirken geschlossen, was zu Hintergründen, Illustrationen und zurückhaltenden Zustandswechseln passt. Triadische Farben sind gleichmäßig verteilt und ergeben ein ausgewogenes Drei-Farben-Schema: Nutze eine als dominante Farbe, eine als sekundäre und die dritte sparsam als Akzent. Keine dieser Regeln garantiert Lesbarkeit. Zwei Farben können harmonisch perfekt sein und trotzdem einen Kontrasttest verfehlen, besonders wenn ihre Helligkeitswerte nah beieinanderliegen — prüfe also jedes Text-auf-Hintergrund-Paar, bevor du es auslieferst.
Ausgehend vom Standardblau:
rgb(59, 130, 246)hsl(217, 91%, 60%)#f6af3c, ein warmes Bernstein gegenüber dem Blau#3ce0f6 und #523cf6, ein Cyan und ein Indigo zu beiden Seiten#f63c83 und #83f63c, ein Pink und ein Grün, 120 Grad auseinanderJeder dieser Farbtöne lässt sich direkt kopieren. Beachte, dass das komplementäre Bernstein trotz konstant gehaltener HSL-Helligkeit einen anderen Helligkeitseindruck macht, weil das menschliche Auge nicht jeden Farbton als gleich hell wahrnimmt.
Weil HSL den Farbton als ganze Gradzahl und Sättigung und Helligkeit als ganze Prozentwerte speichert, ist der Rundlauf näherungsweise. #3b82f6 nach HSL und zurück ergibt #3c83f6, um eins in zwei Kanälen daneben. Der Unterschied ist nicht wahrnehmbar, zählt aber, wenn du Farbwerte Byte für Byte vergleichst.
Ein zweiter Randfall ist Grau. Wenn Rot, Grün und Blau gleich sind, kann die Umwandlung keinen sinnvollen Farbton berechnen und meldet hsl(0, 0%, L). So wird #808080 zu hsl(0, 0%, 50%), und jedes Grau landet unabhängig von seiner Herkunft auf Farbton 0. Nicht der Farbton, sondern die Sättigung unterscheidet Grautöne.
HSL ist zudem nicht wahrnehmungsgleichmäßig. Zwei Farben mit derselben angegebenen Helligkeit können sehr unterschiedlich hell wirken: Gelb bei 50 % Helligkeit erscheint weit heller als Blau bei 50 %. Deshalb kann eine über eine Harmonie konstant gehaltene HSL-Helligkeit das visuelle Gewicht der Farbfelder verschieben, und deshalb existieren neuere Wahrnehmungsräume wie OKLCH. Dieses Tool bleibt bei Standard-HSL, passend zu dem, was CSS direkt akzeptiert.
Die Basisfarbe wird in jeder Palette zuerst dargestellt, gefolgt von den Harmonie-Farben. Komplementär zeigt die Basis plus eine Gegenfarbe, analog zeigt die Basis plus zwei Nachbarn, und triadisch zeigt die Basis plus zwei Farben bei 120 und 240 Grad.
Komplementär addiert 180 Grad, analog verwendet minus 30 und plus 30 Grad, und triadisch addiert 120 und 240 Grad. Sättigung und Helligkeit werden unverändert von der Basisfarbe übernommen, es bewegt sich also nur der Farbton.
Ja. Die Eingabe akzeptiert drei- und sechsstellige HEX-Werte und erweitert Kurzformen automatisch, sodass #f00 zu #ff0000 wird. Fehlerhafte Eingaben werden einfach ignoriert statt umgewandelt.
HSL wird mit ganzzahligen Graden und Prozentwerten gespeichert, was etwas Präzision kostet. #3b82f6 wird zu hsl(217, 91%, 60%), und die Rückumwandlung ergibt #3c83f6 — eine Stufe höher bei Rot und Grün.
Nein. Er arbeitet nur mit deckendem HEX, RGB und HSL. Es gibt keinen Alpha-Kanal, halbtransparentes CSS braucht also rgba()- oder hsla()-Werte, die an anderer Stelle gesetzt werden.
Jedes der Panels HEX, RGB und HSL hat eine eigene Kopierschaltfläche. Auch die Palettenfarben sind anklickbar: Ein Klick kopiert den HEX-Wert dieses Farbtons in die Zwischenablage und ändert kurz seine Beschriftung zur Bestätigung.
Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert