Farben in Abhängigkeit von Grundfarbe

[Mirko Schieder]

Hallo,

ich bin auf der Suche, Farben für Überschriften zu definieren in Abhängigkeit von einer Grundfarbe.

Sprich: Ich würde eine Grundfarbe definieren, z.B. im CSS über

:root { --farbe1: #c32e04; h1 { color: var(--farbe1);

Dann soll h2 z.B. 10% heller oder dunkler sein, kann gerne auch über Transparenz gelöst sein, also etwas in Richtung:

h2 { color:rgba(var(--akzentfarbe), 0.15);

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

Vielleicht geht auch eine Art Overlay in schwarz mit 90% Transparenz oder so (bin eigentlich Grafiker, denke also eher in Photoshop...)

Fällt euch eine Möglichkeit ein, wie das geht? Freund Google ist leider keine Hilfe.

LG, Mirko Schieder

[Mitleser]

Womöglich können Dir die Cracks hier eine reine CSS-Lösung für Dein Anliegen bieten. Ich bin dafür nicht fit genug. Womit das bestimmt geht: CSS-Präprozessorn.

Nur: da Du ja schreibst, von Photoshop zu kommen... womöglich sogar vom Print? Deine anvisierten 10%-Schritte erscheinen mir fürs Web vom Kontrast zu dünn.

Wenn Du dann mit Transparenz arbeitest, wird es irgendwann von der Lesbarkeit zu dünn ;-)

[Rolf B]

Hallo Mirko,

wenn es Dir nur um heller/dunkler geht, dann solltest Du die Farbe im HSL Modell definieren. H=Hue (Farbton, 0-359), S=farbSättigung (0%-100%), L=Luminanz (0%-100%).

Bei der Luminanz ist 0%=Schwarz, 50%=Volle Farbe und 100%=Weiß. Eine geringere Farbsättigung als 100% bringt Grau in die Farbe.

Der Farbton ist eine Winkelangabe auf dem Farbkreis. Wenn man sich 0=360=rot, 120=grün und 240=blau merkt, kommt man über die bekannten Mischverhältnisse schnell auf 60=gelb, 180=cyan und 300=Magenta - und der Rest ist ein bisschen Gefühl 😉

Mittels calc() Funktion kann man auch ganze Farbmodelle berechnen, aber man muss aufpassen, dass noch Kontrast übrig bleibt...

Beispiel:

body {
  --baseHue: 120;   
}

header {
  background-color: hsl(var(--baseHue, 100%, 60%);
  padding: 1em;
}

header h1 {
  background-color: hsl(var(--baseHue), 50%, 60%);
  margin: 0; padding: 0;
}

header p {
  color:  hsl(calc(var(--baseHue) + 180), 90%, 85%);
  background-color: hsl(var(--baseHue), 50%, 20%);
  margin: 0; padding: 0;
}

<header>
<h1>Die Überschrift des Tages</h1>
<p>Liefert Informationen zu besonderen Themen</p>
</header>

Rolf

[Gunnar Bittersmann]

@@Rolf B

S=farbSättigung

Dann doch bitte auch H=farbtHon und L=HeLligkeit. 😉

Der Farbton ist eine Winkelangabe auf dem Farbkreis. 0=360=rot, 120=grün und 240=blau

Weshalb man für grün auch 0.333turn und für blau 0.666turn schreiben kann.

LLAP 🖖

[Raktenwissenschaftler]

Weshalb man für grün auch 0.333turn und für blau 0.666turn schreiben kann.

Das ist ziemlich interessant im Hinblick darauf, dass ich schon Farbschema-Generatoren gesehen habe, welche selbst angaben, mit Winkeln zu arbeiten.

Obiges ließe sich dann sozusagen live berechnen.

[Rolf B]

Hallo Raktenwissenschaftler,

genau.

Findest Du in meinem Beitrag gestern 16:09 für Selektor header p 😉

Es ist allerdings eine heikle Sache. Man muss höllisch aufpassen, das es noch genug Kontrast gibt. Orange auf Lila oder Cyan auf Grün ist urgh

Rolf

[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 🖖