Jedes Farbformat beschreibt dasselbe in einer anderen Sprache: HEX für Stylesheets, RGB für Bildschirme und Code, HSL für den Aufbau von Paletten, CMYK für den Druck. Wähle die Umrechnung, die du brauchst, und erhalte den exakten Wert, eine Live-Vorschau und die Formel dahinter.
Die vier Farbformate
Was ist HEX?
Ein HEX-Code ist eine sechsstellige Hexadezimalzahl, die Rot-, Grün- und Blau-Kanal einer Farbe hinter einem # speichert. Jedes Ziffernpaar steht für einen Kanal, von 00 (nichts) bis FF (voll) — das ergibt dieselben 16,7 Millionen Farben wie RGB, nur deutlich kürzer notiert. HEX ist der Standard in CSS, Design-Tools und Markenrichtlinien.
- Syntax:
- #RRGGBB
- Ideal für:
- CSS, Design-Übergabe, Markenrichtlinien
Was ist RGB?
RGB beschreibt eine Farbe über drei Lichtkanäle — Rot, Grün und Blau — mit Werten von 0 bis 255. Das entspricht der Funktionsweise eines Bildschirms: alle drei auf 255 ergeben Weiß, alle auf 0 ergeben Schwarz. RGB ist die richtige Wahl, wenn du mit einer Farbe rechnen musst, und rgba() ergänzt zusätzlich Transparenz.
- Syntax:
- rgb(R, G, B)
- Ideal für:
- Code, Canvas, Transparenz mit rgba()
Was ist HSL?
HSL zerlegt eine Farbe in Farbton (0–360° auf dem Farbkreis), Sättigung (wie farbig, 0–100%) und Helligkeit (wie hell, 0–100%). Weil jeder Teil dem entspricht, wie Menschen über Farbe sprechen, ist HSL das einfachste Format für Abstufungen und konsistente Paletten — von Hand oder im Code.
- Syntax:
- hsl(H, S%, L%)
- Ideal für:
- Paletten, Farbabstufungen, Theming
Was ist CMYK?
CMYK ist das Vierfarbmodell des Drucks: Cyan, Magenta, Gelb und Key (Schwarz), jeweils als Prozentwert von 0 bis 100. Druckfarbe schluckt Licht, statt es auszusenden — deshalb deckt CMYK weniger Farben ab als ein Bildschirm, und leuchtende Bildschirmfarben wirken gedruckt oft matter.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Ideal für:
- Druck, Verpackung, druckfertige Daten