 Farbabstufungen
Eine Seite wirkt harmonisch in der Farbgebung, wenn sie mehrere Abstufungen der Grund- / Hauptfarbe verwenden. Nicht jedem Wemaster fällt es leicht, den richtigen Farbton per Schieberegler zu finden. Versuchen sie doch einmal die mathematische Methode der Farbabstufung in 3er-Schritten.
|
|
Farbabstufungen nach mathematischen Regeln entwickeln
... so gehts ganz einfach
Für das Design einer Webseite ist die Farbwahl ausschlaggebend. Abhängig vom Thema der Präsenz oder vom Firmenlogo werden Sie die Hauptfarbe auswählen. Von der Hauptfarbe leiten Sie weitere Farbtöne ab.
|
#AA99DD |
#BBAAEE |
#CCBBFF |
#DDCCFF |
Grundsätzlich sollte ihnen bekannt sein, das Farbangaben aus 3 Werten zusammengestellt werden. Der Begriff 'RGB-Farbsytem' läßt schon auf diese Technik schließen:
RGB = R für Rot, G für Grün, B für Blau
 Hintergrundwissen RGB-Farbsystem
Hintergrundwissen hexadezimale Farbwerte
Die drei Werte der Farbangabe (eingetragen mit hexadezimalen Zahlen) können Sie in gleichen Schritten verändern, um passende Abstufungen zu erhalten. Beispiel:
#AA99DD #BBAAEE #CCBBFF #DDCCFF
 Harmonische Abstufungen der verwendeten Hauptfarbe erhalten Sie durch gleichmäßige Veränderungen der Farbwerte für Rot, Grün und Blau. So entwickeln Sie ein freundliches Bild.
|
|
Farbabstufung in 3er-Schritten
Die erste Tabelle zeigt ein Beispiel für eine Farbabstufung in 3er-Schritten
00 33 66 99 AA CC FF
Diese Folge können Sie auf- oder absteigend einsetzen, natürlich.
| #FF3399 |
#CC0066 |
#990033 |
#660000 |
| #FF66AA |
#CC3399 |
#AA0066 |
#990033 |
| #FF99CC |
#FF66AA |
#CC3399 |
#AA0066 |
| #FFCCFF |
#FF99CC |
#FF66AA |
#CC3399 |
|
 |
|
|
Text Text Textbereich Texte - Farbe #AA0066
|
|
Und hier Beispiele in anderen Kombinationen
| #9999FF |
#8888FF |
#7777FF |
#6666FF |
| #FF9966 |
#FF8844 |
#FF6622 |
#FF4400 |
| #AA99DD |
#BBAAEE |
#CCBBFF |
#DDCCFF |
| #009999 |
#22BBBB |
#44DDDD |
#66FFFF |
| #FFAA33 |
#FFCC55 |
#FFEE77 |
#FFFF99 |
|
Die Hex-Farbcodes dieser Beispiele können Sie aus der Textdatei herauskopieren. Link oben in der Titelzeile.
Farbabstufungen als Vorlage
Die Farben kann man mit einem kostenlosen Tool der Grafik entnehmen.
Color-Picker / TrayColor
|
Home • Farben • Farbabstufungen
BEISPIEL