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:

heller3	heller2	heller1	Vollton	dunkler	dunkler2
--orange3 hsl(24 75% 90%)	--orange2 hsl(… 75%)	--orange1 hsl(… 60%)	--orange hsl(24 75% 50%)	--x hsl(… 40%)	--xx hsl(201 50% 25%)
--purple3 hsl(277 41% 90%)	--purple2 hsl(… 75%)	--purple1 hsl(… 60%)	--purple hsl(277 41% 50%)	--x hsl(… 40%)	--xx hsl((277 41% 25%)
			dunkelgrün hsl(85 100% 30%) #5a9900
			kühles blau hsl(222 62% 61%) #5c82d9

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.

Grautöne 2012-2022:

Farbe	Farbwert	Verwendung	Beispiel	Kontrast
schwarz	#333 hsl(0 0% 20%)	Schriften, allgemein	Schriften, allgemein	12.63:1
dunkles blaugrau	#5d7380 hsl(202 16% 45%)	.autor a (Forum)		4.97:1
blaugrau	hsl(202 16% 45% .75)	selfhtml-Logo, Info, Autor (Forum)	Die Energie des Verstehens	2.81:1
grau	hsl(202 16% 45% .5)	selfhtml-Logo, spitze Klammern	<!selfhtml/>	[1.84:1]
helles graublau	#c4d4da hsl(196 23% 81%)	Strich, 2px	Strich, helles graublau, 2px
lichtes blaugrau	hsl(202 16% 45% .2)		background-color: #e4ebf2; border: #8a9da8	10.51:1

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