Farben in Abhängigkeit von Grundfarbe

[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