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	dunkler2
--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(43 76% 90%)	--yellow2 hsl(… 80%)	--yellow1 hsl(… 70%)	--yellow hsl(44 75% 50%)	--yellow-darker hsl(… 40%)	--yellow-darkest hsl(45 77% 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 oklch()-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!

Siehe auch: oklch() - das okaye Farbmodell!

Codeblock zum Kopieren

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

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

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.51:1
lichtes blau	hsl(201 50% 40% /.1)		11.08:1
gelb gelb	#dfac20 hsl(44 75% 50%)	SELF-Logo, Quelltextbeispiele	2.09:1 6.05:1
lichtes gelb	hsl(44 75% 50% /.1)	Quelltextbeispiele	6.05:1 5.36:1
grün grün	#93b946 hsl(80 45% 50%)	Hinweis, Empfehlung	2.26:1 9.26:1
lichtes grün	hsl(80 45% 50% /.2)		5.16:1
rot	#c82f04 hsl(13 96% 40%)	Signalfarbe Achtung, Beachten, ToDo,	5.43:1
lichtes rot	hsl(13 96% 40% /.1)		11.00:1

Daneben gab es noch weitere, nicht verwendete Reservefarben. Nur bei grau, bzw. graublau entzogen sich die Farbtöne einer solchen Logik. Hier gabe 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