Farbumwandler: HEX, RGB, HSL, CMYK, OKLCH
Farbumwandler für Web und Design: HEX in RGB, RGB in HEX, HSL, HSV, CMYK und OKLCH umrechnen, mit Farbwähler, Vorschau und Farbtönen.
| Format | Wert |
|---|
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
HEX, RGB, HSL, CMYK und OKLCH umrechnen
Der Farbumwandler liest eine Farbe in fast jeder üblichen Schreibweise und zeigt sie sofort in allen anderen: HEX in RGB, RGB in HEX, dazu HSL, HSV (auch HSB genannt), HWB, CMYK, OKLCH und OKLab. Sie können einen Wert eintippen, aus einem Stylesheet kopieren oder den Farbwähler nutzen. Auch CSS-Farbnamen wie teal oder rebeccapurple und HEX-Codes mit Alpha-Kanal wie #e8541c80 werden erkannt.
HEX und RGB beschreiben dieselben drei Kanäle Rot, Grün und Blau, einmal hexadezimal, einmal dezimal: #e8541c ist rgb(232 84 28). HSL und HSV ordnen die Farbe nach Farbton, Sättigung und Helligkeit, was beim Abwandeln einer Farbe hilft. OKLCH ist ein neuerer, wahrnehmungsnaher Farbraum aus CSS Color Level 4: Gleiche Werte für die Helligkeit L sehen auch über verschiedene Farbtöne hinweg ähnlich hell aus. Deshalb sind die Farbtöne unter der Tabelle in OKLCH berechnet. Alle aktuellen Browser verstehen oklch().
Grenzen: Der CMYK-Wert ist eine rein rechnerische Umrechnung ohne Farbprofil. Für den Druck rechnet Ihr Layoutprogramm oder die Druckerei mit einem ICC-Profil, das kann deutlich andere Werte ergeben. Farben aus OKLCH oder OKLab, die außerhalb des sRGB-Farbraums liegen, werden auf den nächsten darstellbaren Wert begrenzt; der Umwandler weist dann darauf hin.
Anleitung: Farbumwandler in 4 Schritten
- Im Eingabefeld eine Farbe als HEX, RGB, HSL, HSV, CMYK, OKLCH oder CSS-Farbnamen eintippen oder den Farbwähler nutzen.
- In der Vorschau prüfen, ob die Farbe stimmt, oder mit einem der Beispiele beziehungsweise „Zufallsfarbe“ starten.
- In der Tabelle alle Schreibweisen ablesen und einzeln oder mit „Alle kopieren“ übernehmen.
- Bei Bedarf unter „Hellere und dunklere Töne“ passende Abstufungen im gleichen Farbton wählen.
Typische Anwendungsfälle
- HEX in RGB für Präsentationen: Eine Markenfarbe aus dem Styleguide in RGB-Werte für PowerPoint oder Office übertragen.
- Designsystem aufbauen: Akzentfarben in OKLCH umrechnen und gleichmäßig helle Abstufungen für Buttons und Flächen erzeugen.
- CSS modernisieren: Farben aus alten Stylesheets in die Schreibweise mit Leerzeichen oder in oklch() überführen.
- Grobe Druckvorbereitung: Einen ersten CMYK-Richtwert ablesen, bevor die Druckerei mit dem Farbprofil rechnet.
Häufige Fragen
Wie rechne ich HEX in RGB um?
Ein sechsstelliger HEX-Code besteht aus drei Paaren für Rot, Grün und Blau. Jedes Paar ist eine Hexadezimalzahl von 00 bis FF, also 0 bis 255. Aus #e8541c wird so rgb(232 84 28). Der Farbumwandler erledigt das automatisch, auch für dreistellige Kurzformen wie #f60.
Was bedeuten die acht Stellen bei HEX-Codes wie #e8541c80?
Die letzten beiden Stellen sind der Alpha-Kanal, also die Deckkraft. 80 hexadezimal entspricht 128 von 255, das sind etwa 50 Prozent. In RGB schreibt man das als rgb(232 84 28 / 0.502).
Warum stimmen die CMYK-Werte nicht mit meinem Druckprogramm überein?
CMYK hängt vom Druckverfahren, Papier und Farbprofil ab. Die Umrechnung hier ist die einfache Formel ohne Farbprofil. Für verbindliche Druckfarben nutzen Sie das ICC-Profil Ihrer Druckerei in Ihrem Layoutprogramm.
Wofür ist OKLCH gut?
OKLCH trennt Helligkeit, Buntheit und Farbton so, dass Änderungen gleichmäßiger wirken als in HSL. Das hilft beim Erstellen von Farbskalen und Designsystemen, etwa wenn mehrere Akzentfarben gleich hell wirken sollen.
Welche Eingaben versteht der Umwandler?
HEX mit 3, 4, 6 oder 8 Stellen, rgb() und rgba(), hsl(), hsv(), hwb(), cmyk(), oklch(), oklab() sowie CSS-Farbnamen. Kommas und die moderne Schreibweise mit Leerzeichen und Schrägstrich funktionieren beide.
Wie finde ich den HEX-Code einer Farbe auf einer Website?
Öffnen Sie die Entwicklerwerkzeuge mit F12, wählen Sie das Element aus und klicken Sie in den Styles auf das Farbfeld. Der Farbwähler zeigt den Wert und bietet eine Pipette, mit der Sie jede Farbe auf der Seite aufnehmen können.
Wie rechne ich RGB in CMYK um?
Die RGB-Werte durch 255 teilen, dann ist K = 1 − das Maximum der drei Werte und zum Beispiel C = (1 − R − K) / (1 − K), entsprechend für M und Y. Das Ergebnis ist eine rechnerische Näherung ohne Farbprofil.
Das könnte auch helfen
Farbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
ÖffnenCSS-Grid-Generator
Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.
Öffnen