Farben zwischen HEX, RGB, HSL & CMYK umrechnen, Paletten generieren und Kontrast prüfen.
{{ line }}Ein Color Converter ermöglicht die sofortige Umrechnung von Farbwerten zwischen verschiedenen Farbräumen wie HEX, RGB, HSL und CMYK. Webdesigner und Entwickler nutzen verschiedene Farbformate je nach Kontext — HEX für CSS, RGB für Bildbearbeitung, HSL für intuitive Farbanpassung und CMYK für den Druck.
HEX ist ein 6-stelliger Hexadezimalwert (#RRGGBB), der häufig in CSS verwendet wird. RGB definiert Farben über Rot-, Grün- und Blauwerte (0–255). HSL beschreibt Farben über Farbton (0–360°), Sättigung und Helligkeit — ideal für intuitive Farbanpassungen. CMYK (Cyan, Magenta, Gelb, Key/Schwarz) wird für den Druck verwendet.
Farbharmonien basieren auf der Position von Farben im Farbkreis. Komplementärfarben liegen sich gegenüber (180°) und erzeugen maximalen Kontrast. Analoge Farben sind benachbart (±30°) und wirken harmonisch. Triadische Farben sind gleichmäßig verteilt (120°) und bieten lebhafte Kombinationen. Gespalten komplementäre Farben verwenden die beiden Nachbarn der Komplementärfarbe für einen weicheren Kontrast.
RGB ist additiv und gerätenah: Drei Werte (0–255) beschreiben, wie viel Rot, Grün und Blau ein Pixel auf einem sRGB-Bildschirm emittiert. Das CSS Color Module Level 4 standardisiert sRGB als Default-Farbraum für klassische Werte wie #0d9488 und rgb(13 148 136). Wichtig: RGB-Werte sind gamma-encodiert, nicht linear. Für Mischungen oder Luminanz-Berechnungen müssen sie über die Formel v <= 0.03928 ? v/12.92 : ((v+0.055)/1.055)^2.4 in lineares Licht zurückgerechnet werden — das ist exakt der Schritt, der beim WCAG-Kontrast passiert.
HSL (Hue, Saturation, Lightness) ist eine Reorientierung von RGB für menschliche Intuition: Hue 0–360° beschreibt den Farbton im Farbkreis, Saturation die Sättigung, Lightness die wahrgenommene Helligkeit zwischen Schwarz (0 %) und Weiß (100 %). HSL eignet sich perfekt für Tinten/Shades — eine Sekundärfarbe entsteht oft als hsl(185 93% 50%), eine dunklere Variante einfach durch Lightness-Reduktion. Wer aber Akzentfarben über Hue-Sprünge generiert, sollte wissen, dass HSL nicht perzeptuell uniform ist: 60° Gelb wirkt viel heller als 240° Blau bei gleicher Lightness.
LAB und das modernere OKLCH wurden geschaffen, um perzeptuelle Gleichheit zu garantieren: Eine Distanz von 10 Einheiten im LAB-Raum entspricht einer ähnlichen wahrgenommenen Differenz, egal wo im Farbraum man sich befindet. Das CSS Color Module 4 erlaubt heute lab(54% -36 -9) und oklch(0.7 0.15 200) nativ im Browser. Display-P3 erweitert das Gamut um etwa 25 % gegenüber sRGB — Apple-Geräte nutzen es seit 2016, moderne Android-Smartphones zunehmend. Designer sollten beide Werte hinterlegen: color: #0d9488; color: color(display-p3 0.05 0.58 0.53); als progressive Enhancement.
Der Converter ist mehr als Hex-zu-RGB — er liefert dir die ganze Farbidentität, die du fürs Designsystem brauchst.
color: hsl(...) in dein CSS statt Hex, wenn du Hover-States generieren willst: filter: brightness(0.9) oder eine HSL-Variante hsl(185 93% 28%) macht Tonalitäten reproduzierbar.Diese Beispiele zeigen, wie sich die Notationen ineinander übersetzen lassen.
#0d9488 = rgb(13, 148, 136) = hsl(173, 84%, 32%) = cmyk(91%, 0%, 8%, 42%).#ff0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%) — als HSL klarer ableitbar (Hue 0 = Rot).#3f51b5 = rgb(63, 81, 181) = hsl(231, 48%, 48%). Sättigung 48 % verrät: kein Vollton, eher tonal.color: oklch(0.7 0.15 200); liefert ein perzeptuell helles Cyan, das auf Display-P3-Geräten satter wirkt als die sRGB-Konvertierung.#3c4858 wird in CMYK zu cmyk(32%, 19%, 0%, 65%) — viel Schwarzanteil, kaum Buntheit, perfekt für saubere Druckergebnisse.Die mathematische Konvertierung Hex -> RGB -> HSL -> CMYK ist exakt, aber sie sagt nichts über die wahrgenommene Wirkung. Wide-Gamut-Displays (P3) zeigen denselben Hex-Wert satter als günstige Notebook-Panels, weil mehr Gamut zur Verfügung steht. CMYK ist nur eine Näherung: Tatsächliches Druckergebnis hängt vom ICC-Profil der Druckmaschine, vom Papier (gestrichen vs. ungestrichen) und vom Übertragungsverhalten der Druckfarben ab — verlasse dich niemals auf die CMYK-Werte des Tools für offizielle Druckdaten. Auch CSS-Filter-Effekte (z. B. backdrop-filter: blur() oder mix-blend-mode) verschieben die wahrgenommene Farbe stark. Schließlich: Farbenblindheit, Sonnenlicht und Display-Kalibrierung sind nicht numerisch erfassbar — teste deine Palette immer im echten Kontext, idealerweise auf mindestens drei Geräten und einmal mit deaktiviertem Farbprofil.
#abc ist äquivalent zu #aabbcc — jedes Zeichen wird verdoppelt. Vorteil: kürzer. Nachteil: nur 4096 Farben darstellbar (statt 16 777 216). Für präzise Markenfarben immer die 6-stellige Form nutzen.#0d9488cc bedeutet 80 % Alpha. Alle modernen Browser unterstützen das. Alternativ rgba(13 148 136 / 0.8) oder die moderne Schreibweise rgb(13 148 136 / 80%).@supports.color: color(display-p3 ...)) und vergleiche Mockups auf realen Geräten — nie nur auf einem Monitor.