Farben in Abhängigkeit von Grundfarbe

[Gunnar Bittersmann]

@@Mirko Schieder

:root { --farbe1: #c32e04 }
h1 { color: var(--farbe1) }
h2 { color:rgba(var(--akzentfarbe), 0.15) }

(Wäre schön, wenns so einfach ginge...)

Geht auch so einfach – nur nicht mit der Hex-Schreibweise. (Und die Bezeichner sollten schon übereinstimmen. 😉)

Level 4:

:root { --akzentfarbe: 195 46 4 }
h1 { color: rgb(var(--akzentfarbe)) }
h2 { color: rgb(var(--akzentfarbe) / 0.15) }

Level 3:

:root { --akzentfarbe: 195, 46, 4 }
h1 { color: rgb(var(--akzentfarbe)) }
h2 { color: rgba(var(--akzentfarbe), 0.15) }

0.15 heißt übrigens nicht 15% transparent, sondern das Gegenteil: 15% opak (85% transparent). Das ist sowohl auf Weiß auch auch auf Schwarz so gut wie nicht zu sehen.

Nun hat ein Browser bei Transparenz aber viel zu rechnen. Er kann nicht einfach Pixeln eine Farbe zuweisen, sondern muss für jeden Pixel aus dessen Hintergrundfarbe und der teiltransparenten Vordergrundfarbe die resultierende Farbe berechnen – Pixel für Pixel.

Wenn man keine Transparenz will, sollte man keine einsetzen.

Andere Möglichkeiten wurden ja schon genannt:

• Präprozessor (Sass, PostCSS o.ä.) mit Farbfunktionen wie darken() und lighten(): ☞ Codepen

  $akzentfarbe: #c32e04;
  h1 { color: $akzentfarbe }
  h2 { color: lighten($akzentfarbe, 10%) }
  

• HSL-Farbmodell:

  :root { --akzent-h: 13deg; --akzent-s: 96%; --akzent-l: 39% }
  h1 { color: hsl(var(--akzent-h) var(--akzent-s) var(--akzent-l)) }
  h2 { color: hsl(var(--akzent-h) var(--akzent-s) calc(1.1 * var(--akzent-l))) }
  

  (Level 4; Level 3 wäre ohne deg und mit Kommas)

LLAP 🖖