Abstufungen
    


WWW.WEB-TOOLBOX.NET

BEISPIEL   Farben-HEX-Codes ZURÜCK SITEMAP  

  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.

... 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 Farben auswählen.

 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.


Harmonische Abstufungen der verwendeten Farben erhalten Sie durch gleichmäßige Veränderungen von 2 der 3 Farbwerte!
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