Tendances Web 2007 : 60 palettes de couleur élégantes pour vos sites Web

Peintre en bâtiment imitant une palette Web 2007

Il y a quelques semaines, le magazine en ligne Smashing Magazine publiait une liste de 60 designs de sites élégants, professionnels et visuellement attractifs (en anglais). Assez convaincu par la qualité de cette sélection, j'ai voulu étudier l'un des éléments clés de leur réussite : les couleurs.

Concevoir une palette de couleurs est un exercice délicat : assurer la lisibilité du texte, créer un contraste entre les zones, ne pas fatiguer l'oeil, et surtout... être au goût du jour. Pour ceux qui, comme moi, n'ont pas le talent inné d'associer les couleurs, cette liste de palettes pourra fournir une source d'inspiration attrayante pour leurs designs Web.

Deux remarques :

Seules les couleurs dominantes ont été conservées : par souci d'efficacité, les couleurs les moins visibles n'ont pas été prises en compte. Pour les dégradés légers, la couleur de début et de fin suffisent. Pour les dégradés contrastés, une troisième couleur intermédiaire a été sélectionnée.
La taille des pastilles est indicative de l'importance de chaque couleur, mais pas proportionnelle : il ne s'agit pas d'une étude scientifique mais de la recherche de tendances globales. De même, certaines couleurs sont approximatives (notamment lorsque la page comporte des dégradés ou des motifs complexes). Il y a une part d'arbitraire dans la sélection que j'ai opérée mais j'ai essayé d'être fidèle à l'impact visuel de chaque site.

Enfin, certains pourront critiquer la sélection et débattre des qualités de tel ou tel site. Je vous invite à intervenir sur le site de l'éditeur Smashing Magazine ou à me suggérer votre propre liste à la place.

La liste des 60 palettes

http://www.tomas-design.com/

#FFFFFF

#C8C8C8

#DEDEDE

#E9E9E9

#626262

#4A4A4A

#53B455

#0FAF11

#35BE30

#DE4D54

http://intype.info/home/index.php

#FFFFFF

#F5F5F5

#013162

#13518C

#2D7CC1

#C8E596

#A5D529

#F8F8F8

#9E9E9E

#2B2B35

#A4A4A4

#87B3D8

http://www.bigfilebox.com/

#FFFFFF

#961357

#000000

#4B0625

#BB2275

#D8348B

#EE85C0

#CE521C

#FEBD0D

#9B9B9B

http://freelanceswitch.com/

#FDFDFF

#EBEAE5

#6E6335

#908653

#C3BC9F

#C4D10F

#AAA591

#55253F

#CAC9C5

#B7C8D8

#D55041

#832D36

#FE663D

http://www.fluidbook.com/

#FFFFFF

#1E201D

#4E4B46

#F4F4F2

#A4A792

#DB4723

#C1CE62

#FFFFFF

#67741A

#636152

http://www.panic.com/coda/

#EAF2F5

#EBEBEB

#4BB320

#75CF3A

#001B63

#25519A

#444444

#3F4447

#6388B4

http://www.boo-box.com/html/en/

#C5E7E6

#EBF5F4

#0A1010

#385F5C

#91B2AB

#FFFFFF

#5E8A6F

#D9E464

#91B2AB

#F55F0A

#F9D47C

#5E6366

http://www.futureofwebapps.com/

#FFFFFF

#694930

#5A9897

#553924

#3D7876

#C7532C

#FFA900

#A0433F

http://www.freshview.com/

#FFFFFF

#272F32

#78C14C

#F3F3F3

#5A5A5C

#5FBC51

#1B308B

#CACACA

http://revyver.com/

#F8F8F8

#223039

#23313A

#E0E0E0

#EFEFEF

#081213

#202731

#6B0105

#7E0306

#FFFFFF

#0B355B

#0C4473

http://www.allpaymedia.com/

#FFFFFF

#361623

#1E1E1E

#BCE936

#91C211

#14B7CA

#0772A0

#BF0046

#A7181A

#E93237

http://www.stuffandnonsense.co.uk/

#FFFFFF

#5D1115

#F72D3B

#252527

#411E24

#C43233

#606060

#C6C0CA

http://stylespion.de/

#FFFFFF

#333335

#3A3A3A

#2F96E1

#6AB3E8

#E6E8D2

#FB3099

#0A0A0A

#2E8ACB

http://www.08designs.com/

#333333

#FFFFFF

#F69314

#A8CE00

#040203

#62CEFF

#0A8FCA

#FFB213

#FFCC34

#FFF09B

#B1CE11

#E2F355

http://svenigson.com/

#323232

#424242

#111111

#A7A7A7

#C9C9C9

#F4F4F4

#FFFFFF

#E7E7E7

#3A6DA6

#3D3D3D

#DDDDDD

#BF8F83

#B59389

#DDB9AB

http://iconkits.com/

#FFFEFD

#E6F7FE

#D6F2FD

#A9ECA9

#C5F6C9

#03070A

#1A3843

#A9CADD

#FEB00E

#FCE970

#3E8297

http://www.thebignoob.com/

#0A396F

#031020

#04274F

#FDFDFD

#D6D5DA

#0B386F

#366090

#B1847E

#F1D5D1

#6A493A

#9A745D

#497621

http://www.cometemallorca.com/

#000000

#0E0E0E

#3C3C3C

#232323

#B1EB1A

#C8C6C7

#F4F4F4

#614B26

#C35ED4

http://www.dna11.com/

#000000

#565158

#796973

#242424

#FB7760

#F6923D

#C0D84C

#FEFCFF

#99AA4A

#49C4C2

#179098

#D55B10

http://www.smashlab.com/

#000000

#0B0801

#2F190B

#623A20

#8C5630

#BA8364

#FFFBF8

#344885

#061131

#DC1416

http://www.playgroundblues.com/

#000000

#222222

#FFFFFF

#F70066

#D70055

#AC0147

#F66A00

#D65D00

#B34E00

#6E8F00

#5F7D01

#486000

#00809D

#006C85

#0A505C

http://designworkflows.com/

#111111

#181818

#1C5C9C

#3096FA

#FDFDFD

#4DDAF8

#AAAAAA

http://www.idecollection.se/

#1C292F

#FFFFFF

#80302F

#7E7E7E

#CA8D3F

#008BB0

#B5CD2D

http://www.elliotjaystocks.com/blog/

#000000

#171717

#282A1C

#616034

#524123

#787856

#5B5C4E

#FFFFFF

#B6E587

#3F2214

#674C37

#8A4734

http://geniantsandbox.com/

#272C32

#FFFFFF

#F4F79E

#000000

#E2F4FE

#9E400E

#436682

#F4E289

http://northxeast.com/

#FFFFFF

#134F4F

#0A3635

#EFF1F0

#F4F6F5

#EF601E

#DE410E

#000000

#849090

http://blog.criticalwebdesign.co.uk/

#E8E8E8

#D6D6D6

#AEDBF2

#FEFFFF

#222222

http://shiflett.org/

#E4E4E2

#FEFEFE

#F5F4EF

#6D7367

#E18D19

#DB7700

#360F00

#3A6EAC

#472406

#CACBC6

#97261E

http://www.inspiredweb.com.au/

#353C42

#111B24

#FFFFFF

#E6E6DA

#030B0F

#6E1914

#CBCCBE

http://nitram-nunca.com/

#F7F4EB

#DBD9CC

#534E48

#2F2822

#C0D66A

#5E566D

#829819

http://itsunfortunate.com/

#F9F8DC

#F6EDD0

#FDF8FE

#9A0000

#009100

#FEFEFF

#12110F

#4451C3

#D29441

#A96C11

#E1E1C7

http://3daysafter.net/

#FAF7F0

#403C31

#366371

#3A7C18

#5A9D2A

#575347

#DB7338

http://www.krabi.ee/

#D6CABC

#F3F0EB

#6D5D46

#928574

#FFDB9D

#FAC673

#F7991B

#FFFFFF

#A60800

#73737B

#888F7F

#060F0C

http://www.okapistudio.com/

#F1EEDB

#261C12

#30261C

#3B2E25

#1FA3AF

#F6571F

http://www.globalzoo.de/

#BBE9CC

#DCF5CE

#FDFCD0

#44433F

#6B6A65

#FFFFFF

#69B5CD

#FF0B3F

#FF7E88

#ADCC4B

#94BE4E

#9D7436

#8A6D4D

http://www.outline2design.com/

#C1A866

#AA8C50

#764F28

#83512E

#E5D69D

#FBFAF5

#F1F2ED

#FEA593

#F91009

#C11000

#605E5F

#B3AEAA

#0D070B

#698D00

#B6C707

#DCED15

http://www.immovarro.be/

#ECECE0

#FFFFF6

#DA1F00

#990000

#373A3F

#323639

#E8E3CF

#FFFFFF

#DCD7C4

#5E5C50

#6A8CB1

#698086

http://kaimueller.org/

#FFFFFF

#56B5E5

#343434

#616861

#4A7F95

#DCE7E1

http://snook.ca/jonathan/

#A1D40B

#92C101

#628301

#FFFFFF

#000000

#333333

#E1F0B5

#C2E15F

#8E4906

#FF8700

#385C79

http://www.feelbreeze.com/

#FFFFFF

#00964E

#94E86F

#D2F6CA

#AAF179

#00904D

#7FE659

#E7E8EC

#F2F6F7

#EEEEEE

#37432B

#0175BE

http://thetlc.org.uk/

#FECB32

#FFFFFF

#983132

#FEF1CF

#DB6D00

#2C2C2E

#000000

#3D8F9B

http://jogger.pl/

#FFFFFF

#A2D2E0

#F5EFCB

#EDDAB2

#ED4F4E

#6099AC

#E5F4FB

#FBEB4D

#CFC643

#323A3D

#958D69

http://beta.bigmedium.com/

#DFEFEF

#346667

#E0E9E8

#98C7C1

#FFFFFF

#ADD6DA

#77A976

#82B483

#386261

#A9DEA6

#303030

#FBA000

#9A0400

http://www.quo.com.au/

#50382C

#583C30

#2E1A0F

#977462

#E8DAC1

#ED667A

#432C21

http://mezzoblue.com/

#FFFFFF

#63705E

#454D40

#C0C5BE

#6A8D49

#E2FAE4

#372526

#131612

http://www.skalinada.org/

#E8E8DE

#570916

#EEEEE4

#45060F

#DFD5B3

#EB9F0A

#333333

#B99865

#EED9BA

http://www.period-three.com/

#2F281E

#FFFFFF

#DAA061

#F36A22

#908874

#3AC3DD

#E86A1A

http://www.express4j.org/

#2B4965

#2A4864

#1D354D

#385773

#B2D800

#D1EB03

#FFFFFF

http://tony2nice.com/

#FBFDD5

#0A1616

#081414

#B5D609

#E4F920

#214845

#7B1314

#E1E3BE

http://spousenotes.com/

#162329

#2D3740

#0D0D0D

#C44300

#B63300

#D87440

#FFFFFF

http://www.elixirgraphics.com/

#282828

#080808

#E5E5E7

#D6E6E6

#88A016

#E1AC06

#E4A49B

http://www.ergonomind.com/

#000000

#343434

#1F1F1F

#99BE18

#FFFFFD

http://www.nathancarnes.com/

#252935

#40424E

#7BC472

#61B857

#FDFDFD

http://www.nclud.com/work/

#1C5870

#004964

#104A62

#E9FFFF

#FFFFFF

#8DCC49

http://www.eutelnet.biz/indexe.php

#01344F

#02344F

#011D29

#FFFFFF

#AAC8EC

#F2CD7C

#B53301

http://www.buzzrecruitment.co.nz/

#02070B

#25B1E6

#191A1C

#FFFFFF

#42BCEB

#F27403

#FFB62F

http://www.none-design.de/

#202020

#02070B

#98CF74

#63A029

#FFFFFF

#2D2D2D

http://blog.bistrianiosip.com/

#121212

#FFFFFF

#E9EADA

#CFD825

#434345

http://www.wesc.com/letsgetphysical/

#004016

#00A141

#F7F6FC

#020300

#282128

#EFCF1C

#2FC997

#DEE0DF

#EF628D

#F3E216

#566062

http://www.mhq.nl/

#FFFAE6

#DBF4FB

#ECE9D8

#EAF8FB

#157F8D

#DB8D34

#94918A

Mise à jour 30 août 2007 : autres sources d'inspiration

9rules logo color : une palette par jour

tutorialblog.org : 30 outils pour créer des palettes de couleur

MAJ Janvier 2008 : la nouvelle version de Colorzilla vous permet de copier la palette d'un site Web

Billets sur ce thème

Commentaires

1. Le jeudi, 30 août 2007, 20:31 par Bruno Bichet

Salut,
C'est un billet très original que celui-ci : je me suis amusé à imaginer à quoi pouvait bien ressembler les sites à partir de la charte couleur. Dommage que ma pauvre connexion RTC m'empêche de tous les tester...
A++

2. Le jeudi, 30 août 2007, 23:35 par Damien Ravé - Le Caphar

Bloguer en RTC, c'est une belle preuve de courage. Un exemple pour nous tous, bravo Bruno !

3. Le vendredi, 31 août 2007, 10:51 par Fran6

Vraiment très intéressant comme article ! C'est marrant parce que certaines palettes sont vraiment moches mais arrivé sur le site, c'est pas si mal ! :D

4. Le mercredi, 12 septembre 2007, 13:45 par Mac

Oui superbe étude, Il manque juste la corrélation entre toutes ces palettes de couleurs. Par exemple, on a souvent une dominante Blanche ou Noire (disons très claire ou très sombre) suivit de bleu ou de vert. Les palettes comme thetlc.org.uk/ ou snook.ca/jonathan sont quand même très rare dans cette sélection. Peut être une relation avec l'élégance ?

5. Le mercredi, 12 septembre 2007, 14:54 par Romain

Belle étude qui a du prendre du temps pour être réalisée.
Elle va devenir une de mes sources d'inspiration. Merci.

6. Le mercredi, 12 septembre 2007, 18:37 par Maxime ( Tendances Web )

Interessant, ça va beaucoup m'aider car j'ai quelques petits problèmes avec les couleurs :-D

7. Le mercredi, 23 avril 2008, 12:57 par coquine

C'est tres interessant d'avoir ces palettes de couleur, effectivement ca a du te prendre du temps pour composer ces palettes. Ce blog vas devenir ma source d'inspiration pour mes compositions.
Merci encore !

8. Le mercredi, 28 mai 2008, 14:31 par Horoscope

Ton étude est tres interessante, je pense que tu as du y passer pas mal de temps, alors merci !

9. Le mardi, 8 juillet 2008, 19:21 par eNick website ontwikkeling

Ton étude est tres interessante! Ce blog vas devenir ma source d'inspiration pour mes compositions.

www.enick.nl

10. Le lundi, 15 septembre 2008, 15:31 par rencontre

Très très intéressant cet article. D'ailleurs je le delicious! merci

11. Le jeudi, 25 septembre 2008, 20:07 par video amateur

beaucoup d'infos pas faciles a trouver, merci

12. Le lundi, 27 octobre 2008, 19:41 par tchat

Tres interessant et visiblement fastidieux a realiser, double merci

13. Le samedi, 1 novembre 2008, 19:10 par creation site internet nice

Ca va m être extrêmement utile! :-)

14. Le mardi, 9 décembre 2008, 01:26 par S4PH1R3

Bravo! C'est exactement ce dont j'avais besoin!
Hop, dans mes favoris! ;)

15. Le vendredi, 12 décembre 2008, 04:48 par rencontre gratuite

Y'a de bonnes notions d'associations de couleur à apprendre sur cette page, je met ça dessuite en favoris également

16. Le dimanche, 1 février 2009, 01:44 par en ligne

les coulaurs c'est vraiment pas mon truc moi !

17. Le dimanche, 8 février 2009, 11:12 par boutique de lingerie sexy

et bien finalement, je m'aperçois que mon site correspond a une de vos palettes, comme quoi je ne suis pas si mauvais :) !

18. Le samedi, 14 février 2009, 15:15 par Forum pompe a chaleur

Cela est vraiment intéressant surtout lorsque on n'est pas doué en graphisme, cela est un bon guide !

19. Le dimanche, 15 février 2009, 13:30 par creation site internet

Très bon résumé en effet, pratique, je délicious!

20. Le dimanche, 15 février 2009, 13:30 par formation massage

Oui je vais m en servir sur mon site!

21. Le dimanche, 15 février 2009, 13:31 par anti tabac

Très pratique merci

22. Le lundi, 13 avril 2009, 04:31 par blog voyance

Vraiment très pratique en effet

23. Le lundi, 13 avril 2009, 18:04 par xhtmlownz

ton blog bug on voit pas le fond d'écran du coup on voit rien...

24. Le jeudi, 23 avril 2009, 01:37 par Le Caphar Damien Ravé

J'ai corrigé le problème d'affichage, normalement tout va bien.

25. Le vendredi, 22 mai 2009, 01:26 par james

Première impression tout comme Fran6

Certaines palettes font carrément peur, les couleurs semblent sorties d'un Internet lointain et pourtant l'effet n'en est que plus saisissant tant l'utilisation de ces couleurs est judicieuse et de bon gout

Dans un même ordre d'idée : kuler.adobe.com

26. Le mercredi, 23 septembre 2009, 14:30 par Voyance

Il ne faut pas oublier que la palette de couleurs date de 2007.

27. Le jeudi, 18 mars 2010, 13:12 par serybenzo

Comment faire télécharger les palettes pour mon photoshop

28. Le mardi, 11 mai 2010, 15:22 par rencontre

Même si la charte couleur est finalement un affaire de bon sens, avoir quelques palettes à disposition est toujours une bonne chose

29. Le lundi, 31 mai 2010, 12:25 par voyance gratuite

Oui, c'est pas mal, mais ya déja des pallettes préchargées dans les editeurs, avec la possibilité de faire ses propres couleurs perso...

Abonnement aux commentaires

S'abonner pour recevoir les commentaires suivants par email

La discussion continue ailleurs

1. Le jeudi, 30 août 2007, 20:31 par Bruno Bichet
2. Le jeudi, 30 août 2007, 23:35 par Damien Ravé - Le Caphar
3. Le vendredi, 31 août 2007, 10:51 par Fran6
4. Le mercredi, 12 septembre 2007, 13:45 par Mac
5. Le mercredi, 12 septembre 2007, 14:54 par Romain
6. Le mercredi, 12 septembre 2007, 18:37 par Maxime ( Tendances Web )
7. Le mercredi, 23 avril 2008, 12:57 par coquine
8. Le mercredi, 28 mai 2008, 14:31 par Horoscope
9. Le mardi, 8 juillet 2008, 19:21 par eNick website ontwikkeling
10. Le lundi, 15 septembre 2008, 15:31 par rencontre
11. Le jeudi, 25 septembre 2008, 20:07 par video amateur
12. Le lundi, 27 octobre 2008, 19:41 par tchat
13. Le samedi, 1 novembre 2008, 19:10 par creation site internet nice
14. Le mardi, 9 décembre 2008, 01:26 par S4PH1R3
15. Le vendredi, 12 décembre 2008, 04:48 par rencontre gratuite
16. Le dimanche, 1 février 2009, 01:44 par en ligne
17. Le dimanche, 8 février 2009, 11:12 par boutique de lingerie sexy
18. Le samedi, 14 février 2009, 15:15 par Forum pompe a chaleur
19. Le dimanche, 15 février 2009, 13:30 par creation site internet
20. Le dimanche, 15 février 2009, 13:30 par formation massage
21. Le dimanche, 15 février 2009, 13:31 par anti tabac
22. Le lundi, 13 avril 2009, 04:31 par blog voyance
23. Le lundi, 13 avril 2009, 18:04 par xhtmlownz
24. Le jeudi, 23 avril 2009, 01:37 par Le Caphar Damien Ravé
25. Le vendredi, 22 mai 2009, 01:26 par james
26. Le mercredi, 23 septembre 2009, 14:30 par Voyance
27. Le jeudi, 18 mars 2010, 13:12 par serybenzo
28. Le mardi, 11 mai 2010, 15:22 par rencontre
29. Le lundi, 31 mai 2010, 12:25 par voyance gratuite

URL de rétrolien : http://www.lepotlatch.org/index.php/trackback/95

Fil des commentaires de ce billet

Le Potlatch

Tendances Web 2007 : 60 palettes de couleur élégantes pour vos sites Web

Deux remarques :

La liste des 60 palettes

Mise à jour 30 août 2007 : autres sources d'inspiration

Billets sur ce thème

Commentaires

Ajouter un commentaire

Abonnement aux commentaires

La discussion continue ailleurs

Derniers commentaires

Rechercher

À retenir

Catégories

Tags

Flux

Lecteurs

Liens

Copains copines

Webdesign

Photographie

L'auteur

Mes sites

Derniers billets