Using HSL Colors in CSS

Toller Beitrag zum Thema Using HSL Colors In CSS:

Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.

Wenn Sie hsl() interessant finden, ist dieser Artikel eine echte Empfehlung.

Farben mischen mit HSL

Der HSL Color Picker hilft beim Denken in HSL:

  1. Hue (Farbton) auf dem »Farbkreis« wählen (oberster Balken):
    • Primäre Farben: 0/360° = Rot, 120° = Grün, 240° = Blau
    • Sekundäre Farben: 60° = Gelb, 180° = Cyan, 300° = Magenta
  2. Die reinste Form der Farbe erhalten Sie mit
    • Saturation (Farbsättigung) = 100
    • Lightness (Hellwert) = 50
  3. Saturation verringern bewegt die Farbe Richtung Grau.
  4. Lightness verändern:
    • erhöhen = Farbe geht Richtung Weiß
    • verringern = Farbe geht Richtung Schwarz
  5. Transparenz der Farbe: 0 = durchsichtig, 1 = nicht durchsichtig

Der Würfel links unten neben dem Farbfeld zeigt eine Zufallsfarbe.