HEX-Farbwähler online
Wähle eine Farbe und lies sie als HEX, RGB, HSL oder CSS ab, mit Alphakanal. Gib eine beliebige Schreibweise ein, und die anderen passen sich an dieselbe Farbe an.
Browser-Tool
Farbe
Formate
Jede Schreibweise steht für dieselbe Farbe; Alpha gilt für die Formen, die es enthalten.
| Schreibweise | Wert | |
|---|---|---|
| HEX | #b83a2c | |
| HEX mit Alpha | #b83a2cff | |
| RGB | rgb(184, 58, 44) | |
| RGBA | rgba(184, 58, 44, 1) | |
| Modernes RGB | rgb(184 58 44) | |
| HSL | hsl(6, 61%, 45%) | |
| HSLA | hsla(6, 61%, 45%, 1) |
Über HEX-Farbwähler
Dieselbe Farbe lässt sich auf mehrere korrekte Arten schreiben, und welche du brauchst, hängt vom Ziel ab: ein HEX-Triplet in einem Stylesheet, ein rgb()-Aufruf mit Alpha, ein HSL-Wert, dessen Farbton du drehen willst. Dieses Tool rechnet zwischen ihnen um und hält sie im Gleichklang. Kostenlos online nutzbar und offen für alle, ohne Konto. Hochzuladen gibt es nichts, und die Farbwerte bleiben in dieser Seite.
So nutzt du HEX-Farbwähler
- Farbe wählen oder eintippenNimm den Farbwähler oder tippe einen Wert in einer der unterstützten Schreibweisen ein. #3b82f6, rgb(59 130 246) und hsl(217 91% 60%) ergeben alle dieselbe Farbe.
- Bei Bedarf Alpha anpassenAlpha erscheint in den Schreibweisen, die es unterstützen – achtstelliges HEX, rgba() und hsla() –, und fehlt in denen, die es nicht unterstützen.
- Das benötigte Format kopierenJede Schreibweise lässt sich einzeln kopieren, du musst also keinen Text von Hand bearbeiten.
Warum HSL leichter zu durchschauen ist
HEX und RGB beschreiben, wie viel von jeder Grundfarbe gemischt wird – so funktioniert ein Bildschirm, nicht so denken Menschen über Farbe. HSL beschreibt Farbton, Sättigung und Helligkeit getrennt, eine Farbe heller zu machen, ohne den Farbton zu ändern, ist also eine Zahl statt drei. Deshalb werden Designsysteme oft in HSL entworfen und als HEX ausgeliefert.
Drei Stellen oder sechs
Ein dreistelliges HEX ist eine Kurzform: #abc bedeutet #aabbcc. Damit lassen sich nur Farben ausdrücken, deren Kanalpaare sich wiederholen, die meisten Farben brauchen also alle sechs Stellen. Die vier- und achtstelligen Formen fügen auf dieselbe Weise einen Alphakanal hinzu.
Was das Tool nicht kann
- Umgerechnet wird hier in sRGB, dem Farbraum, den Browser für diese Schreibweisen annehmen. Wide-Gamut-Werte in oklch() oder display-p3 gehören zu einem anderen Farbraum und überstehen den Umweg über einen HEX-Wert nicht verlustfrei.
- Eine Farbe, die auf deinem Bildschirm richtig aussieht, tut das auf einem anderen vielleicht nicht. Das garantieren nur ein kalibrierter Bildschirm und ein farbverwalteter Arbeitsablauf, kein Web-Tool.
HEX-Farbwähler: häufige Fragen
- Was bedeutet das achtstellige HEX?
- Die letzten beiden Stellen sind Alpha, von 00 für vollständig transparent bis FF für vollständig deckend. #3b82f680 ist also dasselbe Blau mit etwa 50 % Deckkraft.
- Warum sieht mein HSL-Wert nach dem Umrechnen etwas anders aus?
- HEX hat 256 Stufen pro Kanal, beim Umrechnen aus HSL wird also auf die nächste darstellbare Farbe gerundet. Beim Zurückrechnen kann sich ein Farbton um ein oder zwei Grad verschieben. Sichtbar ist der Unterschied nicht, aber die Zahl stimmt nicht immer genau überein.
- Kann ich eine Farbe aus einem Bild aufnehmen?
- Hier nicht: Dieses Tool rechnet zwischen Schreibweisen um. Um Farben aus einem Foto zu übernehmen, nimm „Farben extrahieren“ oder „Dominante Farbe finden“ und füge den HEX-Wert dann hier ein, um RGB, HSL und die Varianten mit Alpha zu erhalten.
Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.
Ähnliche Tools
Die Tools, die man zusammen mit HEX-Farbwähler am häufigsten braucht.
Du findest das passende Tool nicht?
Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.