> konvertieren | vorschau | wählen <
// Konvertieren Sie zwischen HEX, RGB, HSL, HSV und CMYK Farbformaten
Farbvorschau
Live-Farbvorschau aktualisiert sich sofort beim Tippen oder Farbauswahl.
Jedes Format eingeben
Geben Sie eine Farbe in einem beliebigen Format ein und alle anderen Formate werden automatisch aktualisiert.
5 Farbformate
Konvertieren Sie zwischen HEX, RGB, HSL, HSV/HSB und CMYK. Kopieren Sie jedes Format mit einem Klick.
// ÜBER FARBFORMATE
Farbmodelle:
Farben können mit verschiedenen Modellen dargestellt werden: additives RGB (Rot, Grün, Blau) für Bildschirme, subtraktives CMYK (Cyan, Magenta, Gelb, Schwarz) für Druck, HEX-Notation als kompakte RGB-Darstellung und HSL/HSV für Farbton, Sättigung und Helligkeit/Wert.
Beispiel:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Häufige Anwendungsfälle:
- >Webentwicklung: CSS-Farben in HEX, RGB oder HSL
- >Druckdesign: Konvertierung von RGB zu CMYK
- >UI-Design: HSL für intuitive Farbanpassungen
- >Markenrichtlinien: Konsistente Farben über Formate hinweg
- >Barrierefreiheit: Überprüfung von Kontrastverhältnissen
>> häufig gestellte Fragen
F: Was ist der Unterschied zwischen HEX und RGB?
A: HEX und RGB repräsentieren dasselbe Farbmodell (Rot, Grün, Blau), aber in verschiedenen Notationen. HEX verwendet Hexadezimal (#FF5733), während RGB Dezimalwerte verwendet (rgb(255, 87, 51)).
F: Was ist HSL und warum sollte man es verwenden?
A: HSL steht für Farbton, Sättigung, Helligkeit. Es ist ein intuitiveres Farbmodell für Menschen. CSS unterstützt nativ die hsl()-Notation.
F: Wann sollte ich CMYK verwenden?
A: CMYK (Cyan, Magenta, Gelb, Schwarz) ist das Farbmodell für den Druck. Beachten Sie, dass nicht alle RGB-Farben in CMYK reproduziert werden können.
F: Welche CSS-Farbformate werden in Browsern unterstützt?
A: Moderne Browser unterstützen HEX, RGB, HSL, benannte Farben und neuere Formate wie hwb(), lab(), lch(), oklch().
F: Wie beeinflussen Farbformate die Barrierefreiheit?
A: Das Format beeinflusst die Barrierefreiheit nicht direkt, aber das Verständnis der Farbwerte hilft bei der Berechnung von Kontrastverhältnissen. WCAG 2.1 erfordert ein Minimum von 4,5:1 für normalen Text.
// Gängige Farben in HEX, RGB und HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// CSS-Farbnotationen und Umrechnung
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> Weitere Fragen
F: Wie rechne ich HEX von Hand in RGB um?
A: Teile den Code in Paare und wandle jedes Paar von Hex in Dezimal: #FF8000 → FF = 255, 80 = 128, 00 = 0, also rgb(255, 128, 0).
F: Was bedeuten Kurzform (#F80) und 8-stelliges HEX?
A: #F80 ist die Kurzform von #FF8800 (jede Ziffer wird verdoppelt). Bei 8 Stellen (#RRGGBBAA) sind die letzten beiden der Alphakanal, also die Deckkraft.
F: Warum sehen Farben im Druck anders aus als am Bildschirm?
A: Bildschirme mischen Licht additiv (RGB) und decken einen größeren Farbraum ab; Druck mischt Tinten subtraktiv (CMYK). Leuchtende Grün-, Blau- und Neontöne lassen sich oft nicht exakt drucken – prüfe Farben im Proof.