Hilfe:Farbtabelle

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Farbrad der SELF-Farbpalette
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.[1]

Daneben gab es noch weitere, nicht verwendete Reservefarben.[2]

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

Fußnoten

  1. 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
  2. nicht verwendete Reservefarben:
    Farbe Verwendung Beispiel
    braun #866a00
    hsl(44 75% 30%)
    background-color: #e7c157; color: #866a00
    orange #df6c20
    hsl(24 75% 50%)
    lichtes orange
    hsl(24 75% 94%)
    background-color: #ffede0; border: #df6c20
    dunkelgrün
    hsl(85 100% 30%)
    #5a9900
    kühles blau
    hsl(222 62% 61%)
    #5c82d9
    lila
    #9357b9
    hsl(277 53% 73%)
    einzige Verwendung:
    sociallink-Spenden der Landing Page