Hilfe:SELFHTML-Farbtabelle
Aus SELFHTML-Wiki
Die SELFHTML-Farbtabelle ist die Ausgangslage für das Erscheinungsbild von SELFHTML.
| Farbe | Farbwert | Verwendung | Beispiel | Kontrast |
|---|---|---|---|---|
| dunkelgrau | #333333 hsl(0, 0%, 20%) |
Schriften, allgemein | Schriften, allgemein | 12.63:1 |
| gelb | #dfac20 hsl(44, 75%, 50%) |
selfhtml-Logo, Quelltextbeispiele | background-color: #dfac20; color:white; | 2.09:1 |
| lichtes gelb | #fdfcf3 hsl(54, 71%, 97%) |
Hintergrundfarbe für BeispielCode, Forums-Posting | background-color: #fdfcf3; border: #e7c157 | 6.05:1 |
| grün | #8db243 hsl(80, 45%, 48%) |
Suche auf Startseite, Hinweis, Empfehlung | background-color: #8db243; color:white; | 2.45:1 |
| lichtes grün | #ebf5d7 hsl(80, 60%, 90%) |
background-color: #ebf5d7; border: #8db243 | 5.16:1 | |
| rot | #c32e04 hsl(13, 96%, 39%) |
Achtung, Beachten, Löschen | background-color: #c32e04; color:white; | 5.66:1 |
| lichtes rot | #ffebe6 hsl(12, 100%, 95%) |
background-color: #ffebe6; border: #c32e04 | 11.00:1 | |
| blau | #3983ab hsl(201, 50%, 45%) |
selfhtml-Logo, ToDo, Fortsetzung | 4.19:1 | |
| lichtes blau | #e6f2f7 hsl(198, 52%, 94%) |
background-color: #e6f2f7; border: #3983ab | 11.08:1 | |
| grau | #bfbfbf hsl(0, 0%, 75%) |
selfhtml-Logo, spitze Klammern | <!selfhtml/> | [1.84:1] |
| lichtes grau | #f1f3f4 hsl(200, 12%, 95%) |
Hintergrund für Sidebar, Inhaltsverzeichnis | background-color: #f1f3f4; border: #adadad | 11.35:1 |
| dunkles blaugrau | #5d7380 hsl(202, 16%, 43%) |
.autor a (Forum)
|
4.97:1 | |
| blaugrau | #8a9da8 hsl(202, 15%, 60%) |
selfhtml-Logo, Info, Autor (Forum) | Die Energie des Verstehens | 2.81:1 |
| lichtes blaugrau | #e4ebf2 hsl(210, 35%, 92%) |
background-color: #e4ebf2; border: #8a9da8 | 10.51:1 | |
| helles graublau | #c4d4da hsl(196, 23%, 81%) |
Strich, 2px | Strich, helles graublau, 2px | |
| #f6f9fc hsl(210, 50%, 98%) |
Forum, Antwort nicht verwendet |
background-color: #f6f9fc; border: #8a9da8 | ||
| #fcfcfc hsl(0, 0%, 99%) |
Forum, Quelltext nicht verwendet |
background-color: #fcfcfc; border: #8a9da8 |
unterschiedliche Linkfarben[Bearbeiten]
| Farbe | Farbwert | Beispiel | Kontrast |
|---|---|---|---|
| #2673bf | #2673bf hsl(210, 67%, 45%) |
aktuelle Linkfarbe im Wiki | 4.90:1 FAIL |
| #3481CD | #3481CD hsl(210, 60%, 50%) |
aktuelle Linkfarbe im Forum und Blog | 4.06:1 FAIL |
| blau | #3983ab hsl(201, 50%, 45%) |
Linktext in SELF-blau | 4.19:1 FAIL |
| dunkelblau | #337599 hsl(201, 50%, 40%) |
mein Vorschlag | 5.07:1 PASS |
| dunkelblau | #295E7A hsl(201, 50%, 32%) |
find ich zu dunkel zu wenig Unterschied zum plain text |
7.06:1 PASS |
| orange | #df6c20 |
a:hover im Wiki | 3.33:1 WTF |
nicht verwendete Reservefarben[Bearbeiten]
| Farbe | Farbwert | Verwendung | Beispiel |
|---|---|---|---|
| hsl(47, 100%, 53%) #866a00 |
background-color: #e7c157; color: #866a00 | ||
| helles gelb | hsl(44, 75%, 62%) #e7c157 |
||
| orange | #df6c20 hsl(24, 75%, 50%) |
||
| lichtes orange | #ffede0 hsl(25, 100%, 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 |
