Hilfe:Farbtabelle

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

Grundfarben

Die SELFHTML-Farbpalette besteht aus vier Grundfarben:

Farbe	Farbwert	Verwendung	Beispiel	Kontrast
blau	#337599 hsl(201 50% 40%)	SELF-Logo, Fortsetzung	background-color: #337599; color: white;	5.51:1
gelb	#dfac20 hsl(44 75% 50%)	SELF-Logo, Quelltextbeispiele	background: #dfac20; background: #dfac20;	2.09:1 6.05:1
grün	#93b946 hsl(80 45% 50%)	Suche auf Startseite, Hinweis, Empfehlung	background-color: #93b946; color: white;	2.26:1
rot	#c82f04 hsl(13 96% 40%)	Signalfarbe Achtung, Beachten, ToDo,	background-color: #c82f04; color: white;	5.43:1

Grund- und Pastelltöne

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. Außer für grün, dass mit einem Alphawert von 0.1 sehr blass wirkt, sind alle Farbtöne gleich aufgebaut.

Farbe	Farbwert	Verwendung	Beispiel	Kontrast
blau	#306f91 hsl(201 50% 40%)	SELF-Logo, Links, Fortsetzung		5.55:1
lichtes blau	hsl(201 50% 38% /.1)		background-color: #e6f2f7; border: #3983ab	11.08:1
gelb	#dfac20 hsl(44 75% 50%)	SELF-Logo, Quelltextbeispiele	background-color: #dfac20;	6.05:1
lichtes gelb	hsl(44 75% 50% /.1)	Quelltextbeispiele	background-color: #fdfcf3; Linktext	6.05:1 5.36:1
grün	#93b946 hsl(80 45% 50%)	Suche auf Startseite, Hinweis, Empfehlung	background-color: #93b946; color:white;	2.45:1
lichtes grün	hsl(80 45% 50% /.2)		background-color: #ebf5d7; border: #93b946	5.16:1
rot	#c82f04 hsl(13 96% 40%)	Achtung, Beachten, ToDo	background-color: #c82f04; color:white;	5.43:1
lichtes rot	hsl(13 96% 40% /.1)		background-color: #ffebe6; border: #c32e04	11.00:1

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.

Daneben gab es noch weitere, nicht verwendete Reservefarben.

abgestufte Farbtöne

Die bis 2022 im SELF-Wiki verwendete Linkfarbe #2673bf hatte auf weißem Hintergrund einen Kontrast von 4.90:1, was für großen Text ausreichte, für kleinen Fließtext und auf farbigen Hintergründen aber nicht akzeptabel war.

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

Siehe auch:

• SELF-Blog: Zeit für ein Makeover
• SELF-Blog: Oranger Text auf weißem Grund?

.1	.2	.4	.6	.8	Vollton
--blue1   #eaf1f5 hsl(201 50% 40% /.1)	--blue2 #d6e3eb	--blue4 #adc8d6	--blue6 #85acc2	--blue8 #5c91ad	--blue   #337599 hsl(201 50% 40%)
--yellow1   #fcf7e8 hsl(44 75% 50% /.1)	--yellow2 #f9eed2	--yellow4 #f2dea6	--yellow6 #eccd79	--yellow8b #e5bd4d	--yellow   #dfac20 hsl(44 75% 50%)
--green1   #f3f7ec hsl(80 45% 50% /.1)	--green2 #ebf5d7	--green4 #d1e0b4	--green6 #bbd08e	--green8 #a4c169	--green #93b946 hsl(80 45% 50%)
--green1   #f3f7ec hsl(80 45% 50% /.1)	--green2 #ebf5d7	--green4 #d1e0b4	--green6 #bbd08e	--green8 #a4c169	--green #93b946 hsl(80 45% 30%)
--red1   #f9eae5; hsl(13 96% 40% /.1)	--red2 #f4d5cd	--red4 #e9ac9b	--red6 #de8268	--red8 #d35936	--red #c82f04 hsl(13 96% 40%)
--grey1   #e7e7ea hsl(240 50% 13% /.1)	--grey2 #cfcfd6	--grey4 #a0a0ad	--grey6 #707084	--grey8 #41415b	--black   (#113) hsl(240 50% 13%)
--bluegrey1 #eff1f3 hsl(202 16% 45% /.1)	--bluegrey2 #dfe4e7	--bluegrey4 #bfc9ce	--bluegrey6 #a0aeb6	--bluegrey8 #80939d	--bluegrey #607885; hsl(202 16% 45%)

Beachten Sie: Die Farbtöne werden heller, wenn man über den Alphakanal den weißen Hintergrund durchscheinen lässt. Im Dark Mode müssen entsprechende HEX-Werte verwendet werden, da sie bei einem dunklen Hintergrund (#113) sonst dunkler würden!

Codeblock zum Kopieren

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

:root { 
	--blue: #337599;
	--blue1: #eaf1f5;
	--blue2: #d6e3eb;
	--blue4: #adc8d6;
	--blue6: #85acc2;	
	--green: #93b946;
	--green2: #ebf5d7; 
	--orange: #df6c20;
	--orange1: #ffede0;	
	--red: #c82f04;
	--red1: #f9eae5;	
	--yellow: #dfac20;
	--yellow2: #f9eed2; 
	--black: #113;
	--grey1: #e7e7ea;
	--bluegrey: #607885;
}

Siehe auch

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

Fußnoten