Trick # 546 | Dieser Beitrag beinhaltet 1872 Wörter. – Geschätzte Lesezeit: ca. 10 Minuten.
Für Webprojekte verwenden Sie immer auch Farben – selbst dann, wenn es «nur» schwarz und weiss ist. Um meinem Farbkonzept treu zu bleiben und dennoch Nuancen zur Hand zu haben, habe ich mich auf die Suche nach Lösungen gemacht. Zwei patente Varianten stelle ich Ihnen heute vor.
Auf dieser Website sind die beiden Haupfarben das Blau #293280 und das Grün #59b14b. Für beide Farben verwende ich die Hexwerte.
Nun sind mir die Farben ab und an zu kräftig und ich möchte sie etwas aufgehellt darstellen – etwa als Hintergrundfarbe oder dergleichen. Das geht natürlich auch, wenn ich die Hexwerte in RGBa-Werte oder HSL-Werte umrechne; das aber ist mir zu umständlich.
Stattdessen helle ich die Farben mit ein wenig CSS-Code auf. Dafür habe ich zwei Varianten ausgeheckt, die ich Ihnen heute gerne zeigen möchte.
1. Designfarbe mit weiss mischen
Die erste Lösung verwendet die CSS-Funktion «color-mix()». Dabei verwende ich meine Ursprungsfarbe und gebe etwas weiss hinzu. Wir probieren es mal mit 60 % Ursprungsfarbe und 40 Prozent weiss.
Der entsprechende CSS-Code schaut so aus wie unten links – das Ergebnis rechts. Sie können den Code im CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) verwenden:
/* Ursprungsfarbe blau */
.element {
background-color: #293280;
}Ursprungsfarbe Blau
/* blau mit weiss gemischt */
.element {
background-color: color-mix(in srgb, #293280 60%, #ffffff 40%);
}60 % blau und 40 % weiss
/* Ursprungsfarbe grün */
.element {
background-color: #59b14b;
}Ursprungsfarbe Grün
/* grün mit weiss gemischt */
.element {
background-color: color-mix(in srgb, #59b14b 60%, #ffffff 40%);
}60 % grün und 40 % weiss
Natürlich lässt sich auch mit anderen Farben mische. Etwa grün und blau. Sieht dann so aus:
/* grün mit blau gemischt */
.element {
background-color: color-mix(in srgb, #59b14b 60%, #293280 40%);
}60 % grün und 40 % blau
Selbstverständlich lassen sich alle Farben und Prozentwerte im Code beliebig anpassen.
Doch es gibt eine zweite Möglichkeit innerhalb der Original-Designfarbe Hand anzulegen.
2. Farben aufhellen
Wer nicht mischen will, kann mit brightness() auch aufhellen. Wir machen unsere Ursprungsfarben mal 70 % heller.
Wiederum: Links der Code – rechts das Ergebnis. Auch diese CSS-Codes können Sie beliebig anpassen und in das CSS-Stylesheet (in WordPress unter Design/Customizer/Zusätzliches CSS) kopieren:
/* Ursprungsfarbe blau */
.element {
background-color: #293280;
}Ursprungsfarbe Blau
/* blau aufgehellt */
.element {
background-color: #293280;
filter: brightness(1.7); /* 70% heller */
}blau 70 % aufgehellt
/* Ursprungsfarbe grün */
.element {
background-color: #59b14b;
}Ursprungsfarbe Grün
/* grün aufgehellt */
.element {
background-color: #59b14b;
filter: brightness(1.7); /* 70% heller */
}grün 70 % aufgehellt
Recht einfach. Oder?
Werbung
Werbung
