1
Format eingeben
HEX, RGB, HSL, HSV oder CMYK
2
Alle 5 Formate sehen
Alle werden in Echtzeit aktualisiert
3
Kopieren & verwenden
Zum Kopieren klicken — für CSS, Design, Druck
5 Formate — HEX, RGB, HSL, HSV, CMYK — eines bearbeiten, alle live aktualisieren
HEX, RGB, HSL, HSV oder CMYK
Alle werden in Echtzeit aktualisiert
Zum Kopieren klicken — für CSS, Design, Druck
| Format | Beispiel | Verwendung |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, Webdesign — das universelle Web-Farbformat |
| RGB | rgb(59, 130, 246) | Bildschirme, Displays, digitales Design — additive Farbe (Licht) |
| HSL | hsl(217, 91%, 60%) | CSS, Designsysteme — intuitive farbtonbasierte Farbmanipulation |
| HSV | hsv(217, 76%, 96%) | Farbwähler, Bildbearbeitung (GIMP, Photoshop) — Künstlermodell |
| CMYK | cmyk(76, 47, 0, 4) | Druck, Verlagswesen — subtraktive Farbe (Tinte auf Papier) |
RGB ist additive Farbe: Beginnen Sie mit Schwarz (kein Licht) und fügen Sie rotes, grünes und blaues Licht hinzu, um Farben zu erzeugen. Bei voller Intensität ergibt R+G+B = Weiß. Bildschirme, Smartphones und Projektoren verwenden alle RGB. CMYK ist subtraktive Farbe: Beginnen Sie mit weißem Papier und subtrahieren Sie Licht durch das Übereinanderlegen von Cyan-, Magenta-, Gelb- und Schwarztinte. C+M+Y sollten theoretisch Schwarz ergeben, erzeugen aber tatsächlich ein schlammiges Braun — daher die separate K-Tinte (Key/Schwarz). RGB hat einen größeren Farbraum: Viele leuchtende Bildschirmfarben (Neongrün, Elektroblau) können mit CMYK-Tinten physisch nicht reproduziert werden. Wenn Sie sowohl für Bildschirm als auch Druck entwerfen, überprüfen Sie immer die CMYK-Vorschau, um unangenehme Farbverschiebungen beim Drucken zu vermeiden.
HSL (Farbton, Sättigung, Helligkeit) ist das CSS-native Farbmodell. Reine, lebendige Farben liegen bei H=50%. H=0% ist Schwarz; H=100% ist Weiß. Das macht HSL perfekt für die Erzeugung von Tönungen (Weiß hinzufügen: H erhöhen), Schattierungen (Schwarz hinzufügen: H verringern) und Abstufungen (S verringern). HSV (Farbton, Sättigung, Wert) ist das Künstlermodell, das von Photoshop- und GIMP-Farbwählern verwendet wird. Reine Farben liegen bei W=100%. W=0% ist Schwarz. Die HSV-Sättigung verhält sich eher wie das Mischen von Farbe — das Hinzufügen von Weiß reduziert die Sättigung in HSV, ändert aber nur die Helligkeit in HSL. Keines der Modelle ist „richtig" — es sind unterschiedliche Werkzeuge für unterschiedliche Aufgaben.
Geben Sie Ihren HEX-Code (z. B. #3B82F6) in das HEX-Feld ein. RGB wird sofort aktualisiert: rgb(59, 130, 246). Jedes Hex-Ziffernpaar = ein Kanal: 3B=59 (R), 82=130 (G), F6=246 (B).
Geben Sie RGB-Werte ein — HSL wird automatisch aktualisiert. HSL ist intuitiver: Farbton (0-360°) = Position auf dem Farbkreis, Sättigung (0-100%) = Intensität, Helligkeit (0-100%) = Leuchtkraft. Reine Farben liegen bei H=50%.
RGB = additives Licht (Bildschirm). CMYK = subtraktive Tinte (Druck). RGB hat einen größeren Farbraum — leuchtende Bildschirmfarben können im Druck nicht exakt reproduziert werden. Dieser Konverter zeigt das theoretische CMYK-Äquivalent, aber die tatsächlichen Druckergebnisse hängen von Drucker/Papier/Tintenprofilen ab.
Beide verwenden Farbton und Sättigung, unterscheiden sich aber in der Helligkeit: HSL-Helligkeit reicht von Schwarz→reine Farbe→Weiß (rein bei 50%). HSV-Wert reicht von Schwarz→reine Farbe (rein bei 100%). HSV wird in Farbwählern verwendet (GIMP/Photoshop); HSL eignet sich besser zum Erzeugen von Tönungen und Schattierungen in CSS.
Klicken Sie auf das Farbvorschaufeld, um den nativen Farbwähler Ihres Browsers zu öffnen. Wählen Sie eine beliebige Farbe visuell aus und alle 5 Formate werden sofort aktualisiert. Sie können auch auf „Zufällige Farbe" klicken, um Farbkombinationen zu erkunden.