Hilfe:Farbtabelle
Inhaltsverzeichnis
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%) |
#113
) sonst dunkler würden!Codeblock zum Kopieren
: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
- ↑
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 - ↑ 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%)
#5a9900kühles blau
hsl(222 62% 61%)
#5c82d9lila
#9357b9
hsl(277 53% 73%)einzige Verwendung:
sociallink-Spenden der Landing Page