HEX, RGB, HSL: Was ist der Unterschied zwischen Farbformaten?
Schauen wir uns vier Farbformate an: HEX, RGB, HSL und CMYK. Verwendungszweck, Konvertierung, Codebeispiele.
Farbformate im Web
In der Webentwicklung und im Webdesign werden Farben auf verschiedene Arten spezifiziert. Jedes Format hat seine Vorteile.
HEX (#RRGGBB)
Die Hexadezimalschreibweise ist das im Internet am häufigsten verwendete Format.
„css
Farbe: #4f46e5; /* Indigo */
Farbe: #09090b; /* Fast schwarz */
Farbe: #fff; /* Kurzform #ffffff */
„
Vorteile: Kürze, Klarheit für Designer, überall unterstützt.
RGB (Rot, Grün, Blau)
Legt die Farbe über die Intensität von drei Kanälen von 0 bis 255 fest.
„css
Farbe: RGB (79, 70, 229); /* Indigo */
Farbe: RGBA (79, 70, 229, 0,5); /* Mit Transparenz */
„
Vorteile: Intuitiv, praktisch für die programmgesteuerte Farbmanipulation.
HSL (Farbton, Sättigung, Helligkeit)
Das „menschlichste“ Format: Farbton (°), Sättigung (%), Helligkeit (%).
„css
Farbe: HSL (243, 75 %, 59 %); /* Indigo */
Farbe: HSL (243, 75 %, 45 %); /* Dunkler */
Farbe: HSL (243, 75 %, 75 %); /* Leichter */
„
Vorteile: Erstellen Sie ganz einfach Tonpaletten, indem Sie nur die Helligkeit ändern.
CMYK (Cyan, Magenta, Gelb, Key/Schwarz)
Wird beim Drucken verwendet.
„
cmyk(66 %, 69 %, 0 %, 10 %) = Indigo
„
Vorteile: Exakte Farbübereinstimmung beim Drucken.
Wann was verwenden?
| Problem | Formatieren |
|---|---|
| --- | --- |
| CSS-Stile | HEX oder HSL |
| Animationen und Berechnungen | HSL oder RGB |
| Druck, Markenbuch | CMYK |
| Transparenz | rgba() oder hsla() |
Farben online konvertieren mit unserem Tool – HEX-, RGB-, HSL-, CMYK- und WCAG-Kontrastprüfer.