Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

Grafik/Farbkonzept/Beispiele für Paletten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

SELF-Farbpalette[Bearbeiten]

S-Logo-vektor.svg

2012 wurde das klassische Braun durch ein frisches Design ergänzt: Der SELF-Blog erschien in frischem Blau-gelb mit dazugehörendem neuen Logo. Die Farben wurden ebenfalls vom Wiki und dem Forum übernommen und bieten heute ein durchdachtes Gesamtkonzept für den gesamten SELF-Raum:

Farbe Grundton Heller Verwendung
gelb #dfac20
hsl(44, 75%, 50%)
hsla(44, 75%, 50%,.1) Beispiele
grün #8db243
hsl(80, 45%, 48%)
hsla(80, 45%, 48%,.2) Hinweise, Empfehlungen
rot #c32e04
hsl(13, 96%, 39%)
hsla(13, 96%, 39%,.1) (System)-Warnungen, Achtung
blau #306f91
hsl(201, 50%, 38%)
hsla(201, 50%, 38%,.1) links, Info-Boxen

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #333
hsl(0, 0%, 20%)
#5d7380

hsl(202, 16%, 45%)

hsla(202, 16%, 45%, .75) hsla(202, 16%, 45%, .5) hsla(202, 16%, 45%, .1)
  • Self-Farbtabelle (mit weiteren Reservefarben, dadurch aber nicht so übersichtlich)

Das klassische braun-beige[Bearbeiten]

Netz-Logo(1995-2012)

Von manchen immer noch vermisst: Ausgehend von den Farben des Netz-Logos (für das mit Hypertext verwobene Internet; nicht für einen Ammoniten) wurde 1998 mit der Version 7.0 ein braun-beiges Design eingeführt.

Farbe Heller Grundton Dunkler
Grundfarbe #ffeedd
(Hintergrund für Navigation)
#AA5522
a
#772200
a:visited
Akzentfarbe #FFFFE0
(Hintergrund für Beispiele)
#0000C0
code
Grau #eeeeee
(Hintergrund)

Die braunen Töne wurden aber nur für Links verwendet und waren so trotz allem dezent. Ein wirklich „braunes Design“ wurde erst mit der nicht verwirklichten SELFHTML 9 und testweise im Wiki versucht:

TV-Farbpalette[Bearbeiten]

Farbe Heller-2 Heller Grundton Dunkler Dunkler-2
Grundfarbe hsl(55, 97%, 92%)
#fefbd9
hsl(55, 97%, 82%)
#fdf381
hsl(55, 97%, 62%)
#fcec40
hsl(55, 97%, 42%) hsl(55, 97%, 22%)
Akzentfarbe 1 hsl(357, 66%, 80%) hsl(357, 66%, 60%) hsl(357, 66%, 40%)
#cb2a32
hsl(357, 66%, 30%) hsl(357, 66%, 15%)
Akzentfarbe 2 hsl(120, 100%, 90%) hsl(120, 100%, 70%) hsl(120, 100%, 25%)
#00 80 00
hsl(120, 100%, 20%) hsl(120, 100%, 10%)
Linkfarben hsl(256, 90%, 80%)
hsl(256, 90%, 60%)
#3b0ac2
hsl(256, 90%, 40%)
hsl(256, 90%, 30%)
hsl(256, 90%, 15%)

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #F1F1F1 #ECECEC #DBDBDB #C8C8C8 #a0a0a0

ZUM-Palette[Bearbeiten]

Farbe Heller-2 Heller Grundton Dunkler Dunkler-2
primär #FFF0A2 #FFEA77 #F1D850 #DDC128 #AE9612
sekundär-1 #E993BF #D965A0 #C64285 #B6216D #8F0F50
sekundär-2 #84C5CE #52A1AC #338894 #1B7A88 #0D5F6B
komplementär #A591D7 #7B62BC #5E43A5 #482998 #321878
Linkfarben #0077dd #005599

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #F1F1F1 #ECECEC #DBDBDB #C8C8C8 #a0a0a0

Quelle: Farbenvielfalt (zum-unterrichten)

Im nächsten Kapitel zeigen wir, dass es beim Einsatz solcher Paletten aber durchaus einiges zu beachten gibt.