Grau als Trendfarbe im Webdesign

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!

Hallo, ich bin Manuel - Webdesigner, Illustrator und Blogger bei Elmastudio. Ich liebe Kunst und minimalistisches Design, Zeichnen, scharfes Essen, schwarzen Kaffee und dunkle Schokolade. Du findest mich auch bei Twitter, Facebook und Google+!

30 Kommentare

  1. Phantastisch – bin einfach mal nur begeistert.
    Super geschrieben – perfekt gestylt – und sehr informativ.
    Danke.

  2. Ja, grau finde ich auch sehr schön. Habe ich ebenfalls bei zwei Projekten verwendet.

    Danke für den Bericht und die Auflistung der Tools.

    Gruß
    Oliver

  3. Schöne Auswahl, die Farben von der ersten Seite kommen mir sehr bekannt vor habe bei mir fast die gleichen benutzt aber ohne das ich diese Seite kannte.

    Gruß Alex

  4. Mit Grau kann man einfach super eine andere (Signal-, Schmuck-) Farbe kombinieren. Das sieht (wenn gekonnt verwendet) super aus. Sehr feine Zusammestellung.

  5. @alle:

    Vielen herzlichen für das tolle Feedback zum Beitrag. Es freut mich sehr, dass euch die Inspirationen und Tipps so gut gefallen :-)

    Viele Grüße, Manuel

  6. Echt tolle Designs :)
    Wobei ich grau im Web schon lange nicht mehr als langweilig empfinde. Schließlich sind auch die Apple-Navigationsleisten und der Firefox seit Ewigkeiten grau.

    Gruß Kiwi!

  7. Eine Entwicklung im Webdesign, wie sie auch in anderen Designbereichen zu beobachten ist, beispielsweise strotzen (oder strotzen eben nicht, sondern sind zurückhaltend gestaltet) viele Publikationen mit unifarbenen Hintergründen in warmgrey, kombinieren Schwarz-weiß-Bilder oder zeigen direkt black&white.

    Anders als eine Reaktion auf schreiend-bunte oder überladen-farbige Seiten ist diese Entwicklung des Webdesigns schwer verständlich.

    Danke, Ellen und Manuel, für diese Zusammenstellung an Beispielen gelungenen Webdesigns. Ich würde diese Sammlung gern erweitern um ein Webdesign-Beispiel aus unserem Hause, im Herbst gelauncht: die Website des Französischen Doms, aka Französische Friedrichstadtkirche am Gendarmenmarkt Berlin.

    Jeder Bildschirm heute kann Farben darstellen. Dem Kunden zu vermitteln, dass es sich lohnen kann, auf einige davon zu verzichten, ist beim Gestaltungsprozess nicht nur im Webdesign ein wesentlicher Faktor.

  8. Hallo Manuel
    Danke für die vielen Inspirationen. Reactive gefällt mir besonders gut. Die dunkleren Seiten sind für Fotoseiten Ideal..

    LG

  9. @Kiwi, @BAR M Webdesign, @Lemi, @Rorie,

    vielen Dank für eure Kommentare und eure Ergänzungen / Tipps zum Thema „Grau im Webdesign“.

    Das stimmt, besonders spannend wird ein Grau, wenn es leicht mit einer Farbe gemischt oder noch mit helleren bzw. dunkleren Grautönen kombiniert wird. Meist kann man mit solchen, eher dezenten Effekten viel mehr erreichen :-)

    Gruß, Manuel

  10. Grau als Trendfarbe ja, aber die Beispiele sind größenteils schwarz :- )

    Ich persönlich setze eher auf leichtes dezentes helles grau, mir wirken viele Seiten einfach zu dunkel..

    lg :)

    • Nope…sie sind im Zweifelsfall dunkelgrau, wenn Du dir die Hexcodes mal genauer ansdchaust. Sehr dunkelgrau durchaus, aber eben dunkelgrau und das ist durchaus ein erheblicher Unterschied.

      Schau Dir mal den Unterschied z.B. zwischen einer Schrift #000 auf hellem Hintergrund und #333 an. Auf den ersten Blick nicht sehr auffällig, aber das sehr dunkle Grau wirkt einfach weniger hart.

      • Guter Tipp. Danke.

        Hatte zwar schon #222 auf #fff – habe es jetzt auf #333 gesetzt.
        Suche aber noch den Unterschied – egal. :-D

        • Der Unterschied ist marginal, vor allem bei normaler Schrift. Auf Flächen würde das vermutlich mehr auffallen. Aber vegleiche mal #222 oder #333 oder sonst einen sehr dunklen Grauton mit „echtem“ Schwarz #000 auf weißem Grund. Es ist sehr dezent, aber mir fällt es immer auf, dass grau – gleich wie nahe an Schwarz dran – immer irgendwie „weicher“ wirkt.

          Feinheiten halt ;-)

  11. Ich war schon immer der Auffassung, das Grau nicht langweilig ist, sondern eher edel, wenn man es richtig einsetzt. Ich habe auch gerade ein „Makeover“ meiner Themes-Website hinter mir und habe noch verstärkter auf Grau als Haupt- und Orange als Akzent-Farbe gesetzt.

    Ich finde man kann so das Auge des Betrachters perfekt auf den Inhalt fokusieren und es schaut eben auch noch schick aus.

  12. Danke für die schöne Auswahl, Manuel.

    Besonders gut gefällt mir Image The Music.
    Aber auch sonst, schöne Designs und wunderbare Farbkombinationen.

    Gruß
    Giulia

  13. Persönliche nutze ich seid Jahren schon immer zu meinen Lieblings Farbwert #CCCCCC oder auch #F2F2F2 für meine Blogprojekte meistens als Hintergrundfarben.

    Speziell die Farbwerte #999999 oder #333333 sowie #666666 haben es mir in puncto sehr angetan. Und als Favorit Linkfarbe nutze ich gerne #336699 als Alternative zu dem Blauton der bei WordPress per Standard drin ist.

    Favorit Rot Farbwert ist für mich nach wie vor #c80000 und dessen seichten Abstufungen.

    Die hier im Artikel gezeigten Webseiten und dessen Farbwerte sind alle samt sehr schön anzusehen für mich und ein paar sind sogar dabei, welche ich mal als Bookmark speichern werde um ein paar Farbvorlagen für alternative CSS Gestaltungen haben.

  14. Hi ihr beiden,

    ich glaube, ich besuche diesen Artikel schon zum hundertsten Mal – immer wieder kann ich mich von der tollen Zusammenstellung und den Farben inspirieren lassen und die Grau-Kombinationen sind einfach klasse! Vielen Dank für Eure Mühe!

    LG
    Jasmina

  15. Dies ist einer meiner Lieblings-Seiten, wenn es um Inspirationen geht. Ich bin auch ein großer Fan von schlichtem Design mit dem gewissen Etwas und du hast hier eine ganz fantastische Sammlung aufbereitet. Sehr gelungen und sehr hilfreich. Danke dafür!

    Lg Tyrat

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *