extrem

schlicht und schnell

Farben und Farbtöne im Webdesign

Ink

Farben üben ja eine gewissen Fas­zi­na­ti­on aus. So soll es Web­de­si­gner geben, denen geht bei der Farbaus­wahl (beinahe) einer ab. Oder so.

Auch gibt es recht viele Artikel darüber, welche psy­cho­lo­gi­schen Wirkungen durch Farben erzielt werden können. Oder was eben momentan “im Trend” ist.

Das geht mir al­ler­dings, meistens, am Arsch vorbei. Schwierig ist lediglich bei Farb­ab­stu­fun­gen ähnliche Farbtöne zu finden.

Weil Faulheit eine Gabe Gottes ist habe ich mich von den he­xa­de­zi­ma­len Farb­wer­ten ver­ab­schie­det. Ocker, das war die Farbe im Waelti-Blog, hatte bei­spiels­wei­se den Wert #DAA520. Das wird auch als “Goldenrod” be­zeich­net.

Den Wert (#DAA520) habe ich durch “hsl(43, 74%, 50%)” ersetzt. Das ist zwar nicht ganz genau Goldenrod aber kommt dem Ton sehr nahe. Die Text­be­gren­zung links und rechts setze ich dann, au­to­ma­ti­siert, auf “hsl(43, 74%, 90%)”.

“HSL” bedeutet Hue,Sa­tu­ra­ti­on,Lightness. Etwa: “Farbton, Sättigung, Hel­lig­keit”. Nun brauche ich für die ver­schie­de­nen Farbtöne eben nur den dritten Wert, die Hel­lig­keit, zu verändern. Das geht au­to­ma­tisch. Tech­Bla­Bla: über Includes. Das ist viel­leicht nicht optimal aber effizient.

Links

Zum letzten Link noch ein kleiner Auszug:

Einfache Be­deu­tungs­zu­ord­nun­gen von Farben stoßen schnell an Grenzen. "Es gibt wenige Zu­ord­nun­gen, für die sich ein Konsens finden lässt", sagt der Wahr­neh­mungs­psy­cho­lo­ge Heiko Hecht von der Uni Mainz.

Wobei hier “kein ge­fun­de­ner Konsens” bedeutet, dass sich die Spe­zia­lis­ten nicht einig sind. Farben wirken, meistens, auf Jede(n) ein bischen anders ;)


P.S.: HSL wird praktisch von allen Browsern un­ter­stützt. Kuckst Du.



01.11.2017 / Nachtrag: in­zwi­schen läuft beinahe alles mit hsla(43,74%,49%,X). Die ersten 3 Werte sind HSL-Werte für Ocker (DAA520). Die vierte Zahl steuert den Alpha-Kanal … wie “satt” die Farbe verwendet wird. Die Hel­lig­keit lasse ich in fast allen Fällen un­ver­än­dert.


impressum
home