Farbkonverter

Wandeln Sie jede Farbe zwischen HEX, RGB, HSL, HSV und CMYK um. Wählen Sie eine Farbe oder geben Sie einen Wert in einem beliebigen Format ein – jede andere Schreibweise aktualisiert sich sofort, direkt in Ihrem Browser.

#f5530c

Klicken, um die Farbauswahl zu öffnen

Farbformate

HEX

RGB

HSL

HSV

hsv(18, 95%, 96%)

CMYK

cmyk(0%, 66%, 95%, 4%)

So verwenden Sie Farbkonverter

1
Farbe wählen oder einfügen
Klicken Sie auf das Farbfeld, um die Farbauswahl zu öffnen, oder fügen Sie einen Wert in das HEX-, RGB- oder HSL-Feld ein. Das gesamte Tool richtet sich nach der Farbe, die Sie wählen.
2
In jedem Format bearbeiten
Tippen Sie direkt in das HEX-, RGB- oder HSL-Feld. Jede andere Schreibweise – einschließlich HSV und CMYK – wird in dem Moment neu berechnet, in dem Sie etwas ändern.
3
Jede Schreibweise ablesen
Sehen Sie dieselbe Farbe auf einen Blick in fünf Schreibweisen, sodass Sie ein Design über CSS, Druck und Bildbearbeitung hinweg abstimmen können, ohne zu einem zweiten Tool greifen zu müssen.

4
Kopieren, was Sie brauchen
Nutzen Sie die Kopierschaltfläche neben jedem Wert, um ihn in die Zwischenablage zu legen – bereit zum Einfügen in Ihr Stylesheet oder Ihre Designdatei.

Ein praktischer Leitfaden zu Farbformaten

Gleiche Farbe, unterschiedliche Schreibweisen

HEX, RGB, HSL, HSV und CMYK sind keine unterschiedlichen Farben; für die Bildschirmarbeit sind es unterschiedliche Arten, denselben Punkt im Farbraum aufzuschreiben. Reines Rot lässt sich als #ff0000, rgb(255, 0, 0) oder hsl(0, 100%, 50%) schreiben, und alle drei werden identisch dargestellt. Die Wahl einer Schreibweise ist eine Frage, mit welcher man die jeweils anstehende Aufgabe am leichtesten durchdenken kann – und genau deshalb spart ein Konverter, der sie nebeneinander zeigt, echte Zeit. Sie wählen das Format, das zu Ihrem Werkzeug passt, und kopieren es, statt von Hand zu rechnen.

Die einzige Ausnahme ist CMYK, das auf Druckfarbe statt auf Licht abzielt und sich daher nicht perfekt auf die anderen abbilden lässt – ein Punkt, den man im Hinterkopf behalten sollte und auf den wir weiter unten zurückkommen.

HEX und RGB sind dieselben Zahlen

RGB beschreibt eine Farbe über drei Kanäle – Rot, Grün und Blau –, die jeweils von 0 bis 255 reichen und als Licht gemischt werden. HEX sind schlicht dieselben drei Zahlen, geschrieben zur Basis sechzehn, mit zwei Hex-Ziffern pro Kanal. In #f5530c ist also f5 der Rotkanal, also 245, 53 ist Grün, also 83, und 0c ist Blau, also 12 – was genau rgb(245, 83, 12) ergibt. Da ein Byte Werte von 0 bis 255 fasst, braucht jeder Kanal exakt zwei Hex-Ziffern, und die Umrechnung zwischen beiden ist verlustfrei und direkt.

Die HEX-Kurzschreibweise ist eine Annehmlichkeit: Ein dreistelliger Code verdoppelt jede Ziffer, sodass #f50 zu #ff5500 wird. Dieses Tool liest die Kurzschreibweise genau so wie ein Browser und akzeptiert den Code mit oder ohne führende Raute, in Groß- oder Kleinschreibung.

Alpha: RGBA und HSLA

Das Hinzufügen eines Alphakanals macht eine Farbe teilweise transparent. RGBA und HSLA hängen einen vierten Wert an – eine Deckkraft von 0 für vollständig transparent bis 1 für vollständig deckend –, sodass rgba(245, 83, 12, 0.5) dasselbe Orange bei halber Deckkraft ist. Modernes CSS unterstützt außerdem achtstellige HEX-Werte, bei denen die letzten beiden Ziffern das Alpha als Byte kodieren, sodass eine Deckkraft von einem Halb in etwa dem an die Farbe angehängten Hex-Paar 80 entspricht.

Alpha ist das, was eine Farbe mit allem verschmelzen lässt, was dahinter liegt, und das ist unverzichtbar für Überlagerungen, Abdunklungen, weiche Schatten und getönte Glaseffekte. Denken Sie daran, dass dasselbe Alpha über verschiedenen Hintergründen unterschiedlich aussieht, denn Transparenz bedeutet, dass das endgültige Erscheinungsbild eine Mischung aus Ihrer Farbe und der darunterliegenden Ebene ist.

Warum HSL leichter anzupassen ist

HSL beschreibt eine Farbe so, wie ein Mensch über sie nachdenkt: Der Farbton ist die Position auf dem Farbkreis von 0 bis 360 Grad, die Sättigung gibt als Prozentwert an, wie kräftig sie ist, und die Helligkeit gibt als Prozentwert an, wie hell sie ist. Diese Struktur macht die manuelle Anpassung intuitiv. Um einen dunkleren Ton derselben Farbe zu erhalten, senken Sie die Helligkeit und lassen Farbton und Sättigung unangetastet; um eine Farbe zu dämpfen, senken Sie die Sättigung. Das Gleiche in reinem RGB zu erreichen bedeutet, alle drei Kanäle abgestimmt zu verändern, was sich weit schwerer nach Augenmaß umsetzen lässt.

Deshalb glänzt HSL beim Aufbau von Farbsystemen. Wollen Sie einen Hover-Zustand, der etwas dunkler als die Grundfarbe ist, oder eine Reihe von Farbfeldern, die einen Farbton teilen, aber die Helligkeit durchschreiten? Verschieben Sie eine einzige HSL-Zahl. HSV, auch HSB geschrieben, ist eng verwandt, kombiniert Farbton und Sättigung jedoch mit einem Hellwert (Value bzw. Brightness) statt mit Helligkeit, und ist das Modell, das viele Bildbearbeitungsprogramme und Farbauswahlen bereitstellen – beide ablesen zu können hält Sie also über Design-Tools hinweg sattelfest.

Beispiel: Weiß, Schwarz und eine mittlere Farbe

Die Endpunkte sind sauber. Weiß ist #ffffff, also rgb(255, 255, 255) und hsl(0, 0%, 100%): jeder Kanal voll ausgereizt, oder in HSL-Begriffen volle Helligkeit ohne Sättigung, sodass der Farbton bedeutungslos ist. Schwarz ist #000000, rgb(0, 0, 0) und hsl(0, 0%, 0%): alles auf null. Ein mittleres Grau liegt auf halbem Weg, nahe #808080 und rgb(128, 128, 128), was in HSL hsl(0, 0%, 50%) ist und schön zeigt, dass jeder Neutralton eine Sättigung von null und eine Helligkeit hat, die seiner Helligkeit folgt.

Nun eine echte Farbe: jenes Orange, #f5530c, liest sich als rgb(245, 83, 12) und als ungefähr hsl(18, 92%, 50%). Die HSL-Form verrät Ihnen auf einen Blick, dass es ein warmer Farbton nahe Rot-Orange ist, hoch gesättigt und von mittlerer Helligkeit – eine Information, die der Hex-String verbirgt. Fügen Sie eine dieser Angaben in das Tool ein und beobachten Sie, wie sich die anderen sofort füllen.

CMYK und die Grenzen von Bildschirm zu Druck

CMYK steht für Cyan, Magenta, Gelb und Key, wobei Key Schwarz ist, und es ist ein subtraktives Modell, das für Tinte auf Papier statt für Licht auf einem Bildschirm gemacht ist. Da es funktioniert, indem es Licht abzieht, das das Papier reflektiert, kann es nicht jede kräftige Farbe wiedergeben, die ein leuchtendes Display erzeugen kann, sodass ein strahlendes Blau oder Grün auf dem Bildschirm im Druck oft matter herauskommt. Die CMYK-Werte, die dieses Tool ausgibt, sind eine direkte mathematische Umrechnung aus RGB und als Ausgangspunkt wirklich nützlich, aber sie sind kein Ersatz für einen farbverwalteten Druckworkflow.

Für farbkritischen Druck gleichen Sie stets mit dem tatsächlichen ICC-Profil Ihres Druckers und einem Proof ab, denn das Gerät, das Papier und die Druckfarben verschieben allesamt das Ergebnis. Betrachten Sie die CMYK-Ausgabe hier als schnelle Schätzung, nicht als Garantie.

Benannte Farben und der Sprung in den weiten Farbraum

CSS liefert außerdem etwa 150 benannte Farben mit, Wörter wie tomato, rebeccapurple und slategray, von denen jedes nur ein Alias für einen bestimmten Hex-Wert ist. Sie sind praktisch für schnelles Prototyping und für einprägsame Töne, doch für ein echtes Designsystem geben Ihnen explizite Hex- oder HSL-Werte feinere Kontrolle und mehr Konsistenz. Benannte Farben sind bequeme Bezeichner, kein eigener Farbraum.

Mit Blick nach vorn gehen neuere CSS-Farbfunktionen über den klassischen sRGB-Farbraum hinaus, den diese Formate voraussetzen. Funktionen für Farbräume wie das wahrnehmungsgleichmäßige oklch und das weitere display-p3 können gesättigtere Farben ausdrücken, als HEX und RGB erreichen können – was an Bedeutung gewinnt, je leistungsfähiger moderne Bildschirme werden. Die Werte HEX, RGB, HSL und HSV, mit denen dieses Tool umgeht, bleiben die alltägliche Währung des Webs, und sie zu verstehen ist das Fundament, um jene neueren Farbräume mit Zuversicht zu übernehmen.

Häufig gestellte Fragen

Wie wandle ich eine HEX-Farbe in RGB um?

Fügen Sie Ihren HEX-Code, etwa #f5530c, in das HEX-Feld ein. Der RGB-Wert – in diesem Fall rgb(245, 83, 12) – erscheint sofort darunter, zusammen mit HSL, HSV und CMYK. Die Umrechnung ist exakt, da HEX und RGB dieselben 8-Bit-Farbkanäle beschreiben.

Was ist der Unterschied zwischen HSL und HSV?

Beide beschreiben eine Farbe über ihren Farbton, doch HSL kombiniert ihn mit Sättigung und Helligkeit (Lightness), während HSV (auch HSB genannt) Sättigung und einen Hellwert (Value bzw. Brightness) nutzt. HSL ist in CSS verbreitet, während HSV in vielen Bildbearbeitungsprogrammen und Farbauswahlen vorkommt. Dieser Konverter zeigt beide an, sodass Sie zwischen Design-Tools wechseln können, ohne von Hand zu rechnen.

Wird auch die dreistellige HEX-Kurzschreibweise unterstützt?

Ja. Ein Kurzcode wie #f50 wird als #ff5500 gelesen – genau so, wie ein Browser ihn erweitert. Sie können den HEX-Wert mit oder ohne führendes Rautezeichen eingeben, in Groß- oder Kleinschreibung.

Wofür wird CMYK verwendet?

CMYK – Cyan, Magenta, Gelb und Key, also Schwarz – ist das Farbmodell der Druckfarben und wird beim Drucken verwendet. Die hier angezeigten Werte sind eine direkte mathematische Umrechnung aus RGB; gleichen Sie sie bei farbkritischen Druckarbeiten stets mit dem spezifischen Profil Ihres Druckers ab, da Bildschirme und Druckfarben Farben unterschiedlich wiedergeben.

Werden meine Daten auf einen Server hochgeladen?

Nein. Jede Umrechnung läuft vollständig in Ihrem Browser. Nichts von dem, was Sie eingeben, wird hochgeladen, protokolliert oder gespeichert, sodass Ihre Arbeit vollkommen privat bleibt und das Tool sogar offline weiterarbeitet.