Hilfe:Farbpalette

Die SELFHTML-Farbtabelle ist die Ausgangslage für das Erscheinungsbild von SELFHTML.

Die SELFHTML-Farbpalette basiert auf den Farben des SELFHTML-Logos und zwei Akzentfarben. Die Farbtabelle wurde 2010 von schuer aus dem gekauften Waipoua-Theme für den Wordpress-Blog entwickelt und 2012-2014 von performer für die ganze SELF-Welt angepasst.

Farbpalette

Im Wiki-Makeover 2022 wurden weitere Zwischentöne entwickelt, bei denen auch im Dark Mode alle Texte im SELF-Wiki ausreichend Kontrast haben.

heller3	heller2	heller1	Vollton	dunkler	dunkelste
--blue3 hsl(201 50% 90%)	--blue2 hsl(… 75%)	--blue1 hsl(… 60%)	--blue hsl(201 50% 40%)	--blue-darker hsl(… 25%)	--blue-darkest hsl(201 50% 15%)
--yellow3 hsl(44 75% 90%)	--yellow2 hsl(… 80%)	--yellow1 hsl(… 70%)	--yellow hsl(44 75% 50%)	--yellow-darker hsl(… 40%)	--yellow-darkest hsl(44 75% 30%)
--green3 hsl(80 45% 80%)	--green2 hsl(… 70%)	--green1 hsl(… 60%)	--green hsl(80 45% 50%)	--green-darker hsl(… 40%)	--green-darkest hsl(80 45% 30%)
--red3 hsl(13 96% 90%)	--red2 hsl(… 75%)	--red1 hsl(… 65%)	--red hsl(13 96% 40%)	--red-darker hsl(… 30%)	--red-darkest hsl(13 96% 20%)
--grey3 hsl(202 16% 90%)	--grey2 hsl(… 75%)	--grey1 hsl(… 60%)	--grey hsl(202 16% 45%)	--grey-darker hsl(… 30%)	--grey-darkest hsl(202 16% 15%)

Die Farbtöne sind in einer hsl()-Funktion mit durch Leerzeichen separierten Werten notiert. Sie können diese Werte in allen Browsern und in Mediawiki verwenden. Beim Upload von SVGs in das Wiki werden keine passenden png-Vorschauen gerendert (sie benötigen hex-Werte) - durch unseren SVG-Replacer spielt dies aber keine Rolle mehr!

Codeblock zum Kopieren

Code-Block zum schnellen Einfügen in SELF-Beispiele

:root{
   color-scheme: light dark;
    --blue:  hsl(201 50% 40%);
    --blue1: hsl(201 50% 60%);
    --blue2: hsl(201 50% 75%);
    --blue3: hsl(201 50% 90%);
    --blue-darker: hsl(201 50% 25%);
    --blue-darkest: hsl(201 50% 15%);
    --yellow:  hsl(44 75% 50%);
    --yellow1: hsl(44 75% 70%);
    --yellow2: hsl(44 75% 80%);
    --yellow3: hsl(44 75% 90%);
    --yellow-darker: hsl(44 75% 40%);
    --yellow-darkest: hsl(44 75% 30%);
    --green:  hsl(80 45% 50%);
    --green1: hsl(80 45% 60%);
    --green2: hsl(80 45% 70%);
    --green3: hsl(80 45% 80%);
    --green-darker: hsl(80 45% 40%);
    --green-darkest: hsl(80 45% 30%);
    --red:  hsl(13 96% 40%);
    --red1: hsl(13 96% 65%);
    --red2: hsl(13 96% 75%);
    --red3: hsl(13 96% 90%);
    --red-darker: hsl(13 96% 30%);
    --red-darkest: hsl(13 96% 20%);
    --grey:  hsl(202 16% 45%);
    --grey1: hsl(202 16% 60%);
    --grey2: hsl(202 16% 75%);
    --grey3: hsl(202 16% 90%);
    --grey-darker: hsl(202 16% 30%);
    --grey-darkest: hsl(202 16% 15%);
    --bgcolor: #fff;
    --text-color: var(--blue-darker);
    --link-color: var(--blue);
    background-color: var(--bgcolor);
    color: var(--text-color);
}

OKLCH Variante (gerundet):

heller3	heller2	heller1	Vollton	dunkler	dunkleste
--blue3 oklch(.93 .021 231)	--blue2 oklch(.81 .05 232)	--blue1 oklch(.7 .09 234)	--blue oklch(.54 .09 235)	--blue-darker oklch(.39 .06 235)	--blue-darkest oklch(.28 .04 234)
--yellow3 oklch(.95 .04 90)	--yellow2 oklch(.9 .08 90)	--yellow1 oklch(.86 .11 90)	--yellow oklch(.77 .15 86)	--yellow-darker oklch(.65 .13 86)	--yellow-darkest oklch(.53 .1 87)
--green3 oklch(.9 .06 123)	--green2 oklch(.84 .09 123)	--green1 oklch(.79 .12 124)	--green oklch(.73 .15 126)	--green-darker oklch(.62 .12 125)	--green-darkest oklch(.51 .1 125)
--red3 oklch(.91 .05 36)	--red2 oklch(.79 .12 36)	--red1 oklch(.72 .17 37)	--red oklch(.55 .2 34)	--red-darker oklch(.44 .16 34)	--red-darkest oklch(.34 .11 36)
--grey3 oklch(.92 .01 233)	--grey2 oklch(.81 .02 233)	--grey1 oklch(.69 .03 233)	--grey oklch(.56 .03 234)	--grey-darker oklch(.42 .03 234)	--grey-darkest oklch(.27 .014 234)

Siehe auch: oklch() - das okaye Farbmodell!

Grundfarben

Zu jeder Grundfarbe existiert zusätzlich ein heller Pastellton. Ursprünglich waren alle Farbangaben in hex-Werten notiert. In einer hsl-Notierung wurde klar, dass sich die hellen Pastelltöne direkt aus den Volltönen herleiten lassen:

Farbe	Farbwert	Verwendung	Kontrast
blau	#337599 hsl(201 50% 40%)	SELF-Logo, Fortsetzung	5.06:1
lichtes blau	hsl(201 50% 40% /.1)		13.69:1
gelb gelb	#dfac20 hsl(44 75% 50%)	SELF-Logo, Quelltextbeispiele	2.08:1 7.46:1
lichtes gelb	hsl(44 75% 50% /.1)	Quelltextbeispiele	14.56:1
grün grün	#93b946 hsl(80 45% 50%)	Hinweis, Empfehlung	2.26:1 6.88:1
lichtes grün	hsl(80 45% 50% /.2)		13.43:1
rot	#c82f04 hsl(13 96% 40%)	Signalfarbe Achtung, Beachten, ToDo,	5.43:1
lichtes rot	hsl(13 96% 40% /.1)		13.44:1

Daneben gab es noch weitere, nicht verwendete Reservefarben. Nur bei grau, bzw. graublau entzogen sich die Farbtöne einer solchen Logik. Hier gab es viele graue und graublaue Abstufungen - helle Grautöne wurden allerdings nicht für Text sondern nur für Akzentuierungen verwendet.

Beachten Sie: Die Farbtöne werden heller, wenn man über den Alphakanal den weißen Hintergrund durchscheinen lässt. Im Dark Mode scheint dann aber der dunkle Hintergrund (#113) durch. Deshalb müssen entweder entsprechende HEX-Werte verwendet oder die Helligkeit des Alphakanals gleich in den hsl()-Wert integriert werden.

Siehe auch

• Hilfe:SELFHTML-Logos
• Hilfe:Wiki/MediaWiki/Vorlagen

Quellen

Fußnoten