HEX, RGB und HSL
- HEX: 16 Zahlen im Format #RRGGBB. #FF0000 ist rot, #000000 ist schwarz, #FFFFFF ist weiß. Codes mit denselben geraden Ziffern können abgekürzt werden (#FFF).
- RGB: Rot-, Grün- und Blaukanal von 0 bis 255. rgb(255, 0, 0) ist Rot. Ein letzter „Alpha“-Wert (0–1) fügt Transparenz hinzu: rgba(0, 0, 0, 0,5) ist halbtransparentes Schwarz.
- HSL: Farbton (0–360°), Sättigung und Helligkeit (%). hsl(0, 100%, 50%) ist Rot. Um einen helleren oder dunkleren Ton einer Farbe zu erhalten, genügt es, nur die Helligkeit zu ändern.
Von HEX zu RGB
Jedes zweistellige Paar wird von der Basis 16 in die Basis 10 umgerechnet. #3B5998: 3B = 3×16+11 = 59, 59 = 5×16+9 = 89, 98 = 9×16+8 = 152 → rgb(59, 89, 152).
| Farbe | HEX | RGB | HSL |
|---|---|---|---|
| Rot | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Grün | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Blau | #0000FF | 0, 0, 255 | 240, 100%, 50% |
Achten Sie auf einen deutlichen Helligkeitsunterschied zwischen Text und Hintergrund (laut WCAG mindestens 4,5:1 für normalen Text).
Häufig gestellte Fragen
Kann der HEX-Code in Groß- oder Kleinbuchstaben geschrieben werden?
Ja, #ff0000 und #FF0000 ergeben dieselbe Farbe.
Kann ich CMYK-Werte auf einer Website verwenden?
Nein. CMYK ist für den Druck gedacht; am Bildschirm verwendet man HEX, RGB oder HSL.
Wie füge ich einer Farbe Transparenz hinzu?
Rechnen Sie den HEX-Wert in RGB um und geben Sie im Format rgba() als letzten Wert eine Transparenz zwischen 0 und 1 ein.