HEX-Farbmodell: #RRGGBB-Notation erklärt
Die HEX-Farbnotation ist eine hexadezimale Abkürzung für RGB-Werte. Das Format ist #RRGGBB wobei:
- RR = roter Kanal (00 bis FF = 0 bis 255)
- GG = grüner Kanal (00 bis FF = 0 bis 255)
- BB = blauer Kanal (00 bis FF = 0 bis 255)
| Farbe | HEX | Bedeutung |
|---|---|---|
| Rein rot | #FF0000 | R=255 G=0 B=0 |
| Rein grün | #00FF00 | R=0 G=255 B=0 |
| Rein blau | #0000FF | R=0 G=0 B=255 |
| Weiß | #FFFFFF | R=255 G=255 B=255 |
| Schwarz | #000000 | R=0 G=0 B=0 |
| ToolDolfen blau | #3B82F6 | R=59 G=130 B=246 |
HEX-Kurzschrift: Wenn beide Ziffern für jeden Kanal identisch sind, funktioniert eine dreistellige Kurzschrift: #F00 = #FF0000.
RGB-Farbmodell: Rote, grüne, blaue Kanäle
rgb(rot, grün, blau) – jeder Kanal reicht von 0 bis 255.
RGB ist ein additives Farbmodell – die Addition von Kanälen bewegt sich in Richtung Weiß. So funktioniert Licht (Fernsehbildschirme, Monitore).
In CSS:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */HSL-Farbmodell: Farbton, Sättigung, Helligkeit
HSL unterteilt Farbe in drei wahrnehmungsbedeutende Dimensionen:
- Farbton (0–360°): Die Farbe selbst – Rot bei 0°, Grün bei 120°, Blau bei 240°
- Sättigung (0–100 %): Farbintensität – 0 % ist grau, 100 % ist reine, lebendige Farbe Farbe
In CSS:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Vorteil des Designer-Workflows: So erstellen Sie eine 5-Farben-Palette aus einer einzelnen Farbe:
- 90 % Helligkeit → sehr heller Farbton
- 75 % Helligkeit → heller Farbton
- 50 % Helligkeit → Grundfarbe
- 35 % Helligkeit → dunkel Farbton
- 20 % Helligkeit → sehr dunkler Farbton
Passen Sie einfach den L-Wert an, während Sie H und S konstant halten.
Wann sollte HEX, RGB oder HSL in CSS verwendet werden?
Verwenden Sie HEX: Für einfarbige Referenzen, bei denen Sie den Wert eines Designsystems oder eines Markenleitfadens benötigen. HEX ist das am häufigsten verwendete Format in Designspezifikationen.
RGB verwenden: Wenn Sie Farbkanäle in JavaScript dynamisch bearbeiten müssen: rgb(${r}, ${g}, ${b}).
Verwenden Sie HSL: Beim Erstellen von Designsystemen, beim dynamischen Generieren von Paletten oder beim Arbeiten mit benutzerdefinierten CSS-Eigenschaften für eine barrierefreie Umschaltung zwischen Hell- und Dunkelmodus.
Konvertieren von Farben auf ToolDolfen
Verwenden Sie den Farbwähler & Farbkonverter (Color Picker), um:
- Wählen Sie visuell eine beliebige Farbe in einem Farbkreis und Spektrum aus
- Geben Sie einen beliebigen HEX-, RGB- oder HSL-Wert ein und sehen Sie sofort alle drei Formatäquivalente
- Kopieren Sie jedes Format mit einem in die Zwischenablage Klicken Sie auf
- Verwenden Sie die Pipette, um Farben von Ihrem Bildschirm zu testen (nur Chrome und Edge)
Empfohlene Begleithandbücher
Entdecken Sie ergänzende Tutorials und Dienstprogramme aus diesem Themencluster, um Ihren digitalen Workflow zu verbessern: