Grau wird gerne als langweilig oder trist abgestempelt, dabei hat die Farbe gerade für Webdesigner jede Menge zu bieten. Mit Grau als Grundfarbe eines Design kommt jede Kontrastfarbe wunderbar zur Geltung, und in Kombination mit einem hellen Grün, kräftigen Blau oder leuchtenden Rot wirkt die Farbpalette auf einmal überhaupt nicht mehr langweilig. Zur Inspiration habe ich 18 moderne und erfrischende Webseiten mit Grau als Grundfarbe ausgesucht, und auch gleich die wichtigsten Farbwerte des jeweiligen Designs zusammen gestellt. Um dir die Auswahl eines Farbschemas für dein nächstes Design zu erleichtern, stelle ich außerdem meine liebsten Farb-Tools kurz vor.

1. Image The Music

Webdesign Grey Colors

#777777
#E6E2E1
#F0EDE8
#DE5A51

Image The Music ist tolles Beispiel dafür, dass Grau nicht unbedingt kühl wirken muss. Die Grauwerte auf der Seite sind alle mit ein bisschen Rot gemischt. Rot als eigentliche Farbe wird dann ebenfalls als Link-Hoverfarbe verwendet.

2. Yoshihiko Ueda

Webdesign Grey Colors

#050505
#0F0F0F
#4D4D4D
#B3B3B3

Auf der Webseite des Fotografen Yoshihiko Ueda ist schon das animierte Logo ein Hingucker und auch hier wird bereits auf elegante Weise mit der Wirkung von Farbe gespielt. Durch den dezenten Einsatz von Farbe und einem dunklen, grauen Grundton kommen die Arbeiten des Künstlers hervorragend zur Wirkung.

3. Fill Studio

Webdesign Grey Colors

#1a1a1a
#666666
#999999
#FF6C00
#AEFF00

Auch im Webdesign von Fill Studio wird mit dem Kontrast zwischen Grautönen und kräftigen Farben gespielt. Im extravaganten Portfolio kommt dieser Kontrast besonders zur Geltung.

4. Weightshift

Webdesign Grey Colors

#31363C
#999999
#CCCCCC
#CC9900
#FFCC33

Das Webdesign von Weightshift ist ein schönes Beispiel dafür, dass es nicht vieler Farben bedarf, um Highlights und Kontraste zu schaffen. Die gelbe Farbe wird nur sehr dezent eingesetzt, und kommt daher besonders stark zum Ausdruck.

5. Pierrick Calvez

Webdesign Grey Colors

#272725
#7B7B78
#E3E3E0
#F9F9F6

Die Webseite von Art Director Pierrick Calvez verzichtet komplett auf weitere Farben und wirkt durch die unterschiedlichen Grautöne und die vielen Schwarz-weiß Fotos sehr elegant.

6. Mike Davis

Webdesign Grey Colors

#333333
#3A3A3C
#595959
#565555
#D9D9D9

Die Webseite von Mike Davis ist im Stil einer Zeitung gehalten, und kommt ebenfalls lediglich mit unterschiedlichen Grauwerten aus.

7. Global Humanitarian Assistance

Webdesign Grey Colors

#151515
#262626
#333333
#929292
#FFD600

Auf der extravaganten Webseite von Global Humanitarian Assistance bildet die Farb-Kombination Grau/Gelb spannende und sehr moderne Kontraste.

8. Visualise.ca

Webdesign Grey Colors

#101010
#1E1E1E
#4B4B4B
#6B88A1

Da auf dem Micro-Blog Visualise.ca hauptsächlich Fotos präsentiert werden, kommen die Bilder auf dem dunkelgrauen Hintergrund besonders gut zur Geltung.

9. Andy Taylor

Webdesign Grey Colors

#232627
#FFDCB2

Eine schöne Umsetzung mit der Grundfarbe Grau ist auch die moderne Webseite von Andy Taylor. Andy verwendet für sein Design lediglich ein dunkles Grau in Kombination mit einem ganz leichten Apricot-Farbton.

10. Combine Studio

Webdesign Grey Colors

#000000
#181818
#565656

Auf der Webseite von Combine Studio wird wieder ganz auf weitere Farben verzichtet. Der dunkle Grauton als Hintergrund eignet sich besonders für die Präsentation der Bilder.

11. Reactive

Webdesign Grey Colors

#3B3934
#56534D
#767572
#DCD9D2
#EDEBE7
#CFE107

Bei Reactive ist ein helles Grau als Hintergrund gewählt, Signalfarbe ist ein grelles Grün.

12. Eurico Sá Fernandes

Webdesign Grey Colors

#1C1C1C
#222222
#292929
#333333

Auch das interessante Webdesign von Eurico Sá Fernandes ist in dunklen Grautönen gestaltet, der Rollover-Effekt bei den Bildern kommt daher besonders gut heraus.

13. buildconf.com

Webdesign Grey Colors

#222222
#777777
#CCCCCC
#D7DF21

Das Webdesign für die Webdesign Conference Build spielt ebenfalls mit dem Kontrast zwischen dunklem Grau und der Signalfarbe Gelb/Grün. Durch den grauen Farbton des Backgrounds kommen auch hier wieder die Fotos sehr gut zum Vorschein.

14. Daring Fireball

Webdesign Grey Colors

#4A525A
#555E66
#606870
#DDDDDD
#EEEEEE

Ebenfalls sehr minimalistisch im Umgang mit Farbe ist die Webseite Daring Fireball gestaltet. Der Farbton des Hintergrundes ist sehr elegant gewählt und die Schrift ist angenehm lesbar.

15. LegiStyles

Webdesign Grey Colors

#121212
#5C5C5C
#8D8D8D
#DD462D

Eine sehr elegante Farbkombination ist auch der Grauton in Kombination mit einem dezenten Rot auf der Webseite LegiStyles.

16. Pulley Tour

Webdesign Grey Colors

#222222
#777777
#999999
#DDDDDD
#8EAC1A
#647912

Ebenfalls sehr modern wirkt das Farbschema der Webseite Pulley Tour. Hier werden verschiedene Grautöne mit zwei Grüntönen gemischt.

17. Chance Graham

Webdesign Grey Colors

#222222
#2B2B2B
#333333
#E3E3E3
#F1F1F1

Ein weiteres minimalistisches Beispiel im Bezug auf die Farbwahl ist die Portfolio-Seite von Chance Graham. Durch das schlichte Webdesign und die unterschiedlichen Grautöne wirkt die Webseite sehr modern und hochwertig.

18. Typeoneerror

Webdesign Grey Colors

#141210
#2F2D28
#514D4A
#03FFC1
#DFFFF7

Der spannende Kontrast zwischen Grauabstufungen und einer kräftigen Farbe kommt auch auf der Webseite von Typeoneerror Studios zum Einsatz. Durch den dunklen Grauton im Hintergrund hebt sich das helle Grün noch deutlicher ab.

Hilfreiche Online-Tools zur Farbauswahl

Um leichter ein Farbschema für ein neues Webdesign zu finden, und Kontraste und Farb-Wirkungen schon vorab testen zu können, kannst du diese hilfreichen Online-Farbtools nutzen.

Color Hex Color Codes

Auf der Webseite color-hex.com kannst du verschiedene Farbwerte ganz rechts oben in ein Feld eingeben und dann die unterschiedlichsten Werte für diesen Farbwert aufrufen. Besonders hilfreich finde ich dabei die Verlaufstabelle, die man unter dem Link “Click to get gradient colors” für jeden Farbton erstellen kann.

Webdesign Grey Colors
Ein tolles Tool, um einen bestimmten Farbton aus einer Farbpalette auszuwählen.

Colour Contrast Check

Um Farbkontraste zwischen Text- und Hintergrundfarben zu testen, ist das von Jonathan Snook entwickelte Colour Contrast Ckecker Tool eine sehr große Hilfe.

Webdesign Grey Colors

Colorsuckr

Willst du die Farbwerte eines Fotos oder Screenshots herausfiltern, kannst du das sehr schön aufbereitete Online-Tool Colorsuckr nutzen. Hier kannst du dich auch von den Farben aus der Flickr-Fotogalerie inspirieren lassen.

Webdesign Grey Colors

Browser-Erweiterungen

Neben dem beliebten Colorzilla Firefox-Addon gibt es für Chrome-User auch noch die praktische Erweiterung Eye Dropper, um Farbwerte aus dem Web zu sammeln. Eine weitere, sehr nützliche Farb-Extension für Chrome ist auch Color Pick. Mit der Erweiterung ist es besonders leicht, ganz detailliert Farbwerte im Web zu analysieren.

Wie gefällt dir Grau als Grundfarbe einer Webseite und fallen dir weitere schöne Webdesigns ein, die diesem Trend folgen? Über dein Feedback, sowie weitere Tipps zu praktischen Farb-Tools für Webdesigner freue ich mich sehr!