@@Mirko Schieder > ~~~css > :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: ~~~css :root { --akzentfarbe: 195 46 4 } h1 { color: rgb(var(--akzentfarbe)) } h2 { color: rgb(var(--akzentfarbe) / 0.15) } ~~~ Level 3: ~~~css :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](https://codepen.io/gunnarbittersmann/pen/bGdoOQw) ~~~scss $akzentfarbe: #c32e04; h1 { color: $akzentfarbe } h2 { color: lighten($akzentfarbe, 10%) } ~~~ * HSL-Farbmodell: ~~~css :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 🖖 -- Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.

@@Mirko Schieder > ~~~css > :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: ~~~css :root { --akzentfarbe: 195 46 4 } h1 { color: rgb(var(--akzentfarbe)) } h2 { color: rgb(var(--akzentfarbe) / 0.15) } ~~~ Level 3: ~~~css :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](https://codepen.io/gunnarbittersmann/pen/bGdoOQw) ~~~scss $akzentfarbe: #c32e04; h1 { color: $akzentfarbe } h2 { color: lighten($akzentfarbe, 10%) } ~~~ * HSL-Farbmodell: ~~~css :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))) } ~~~ LLAP 🖖 -- Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.

@@Mirko Schieder > ~~~css > :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: ~~~css :root { --akzentfarbe: 195 46 4 } h1 { color: rgb(var(--akzentfarbe)) } h2 { color: rgb(var(--akzentfarbe) / 0.15) } ~~~ Level 3: ~~~css :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](https://codepen.io/gunnarbittersmann/pen/bGdoOQw) ~~~scss $akzentfarbe: #c32e04; h1 { color: $akzentfarbe } h2 { color: lighten($akzentfarbe, 10%) } ~~~ * HSL-Farbmodell: ~~~css :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))) } ~~~ LLAP 🖖 -- Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.

@@Mirko Schieder > ~~~css > :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: ~~~css :root { --akzentfarbe: 195 46 4 } h1 { color: rgb(var(--akzentfarbe)) } h2 { color: rgb(var(--akzentfarbe) / 0.15) } ~~~ Level 3: ~~~css :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()`: ~~~scss $akzentfarbe: #c32e04; h1 { color: $akzentfarbe } h2 { color: lighten($akzentfarbe, 10%) } ~~~ * HSL-Farbmodell: ~~~css :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))) } ~~~ LLAP 🖖 -- Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.