Abstufungen
    
 HomeFarben • Farbabstufungen BEISPIEL  Farben-HEX-Codes 

  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.

 zur Rennmausseite GERBILS CROSSING
#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








NACH OBEN