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

#FFFFFF

#C8C8C8

#DEDEDE

#E9E9E9

#626262

#4A4A4A

#53B455

#0FAF11

#35BE30

#DE4D54

#FFFFFF

#F5F5F5

#013162

#13518C

#2D7CC1

#C8E596

#A5D529

#F8F8F8

#9E9E9E

#2B2B35

#A4A4A4

#87B3D8

#FFFFFF

#961357

#000000

#4B0625

#BB2275

#D8348B

#EE85C0

#CE521C

#FEBD0D

#9B9B9B

#FDFDFF

#EBEAE5

#6E6335

#908653

#C3BC9F

#C4D10F

#AAA591

#55253F

#CAC9C5

#B7C8D8

#D55041

#832D36

#FE663D

#FFFFFF

#1E201D

#4E4B46

#F4F4F2

#A4A792

#A4A792

#DB4723

#C1CE62

#FFFFFF

#67741A

#636152

#EAF2F5

#EBEBEB

#4BB320

#75CF3A

#001B63

#25519A

#444444

#3F4447

#6388B4

#C5E7E6

#EBF5F4

#0A1010

#385F5C

#91B2AB

#FFFFFF

#5E8A6F

#D9E464

#91B2AB

#F55F0A

#F9D47C

#5E6366

#FFFFFF

#694930

#5A9897

#553924

#3D7876

#C7532C

#FFA900

#A0433F

#FFFFFF

#272F32

#78C14C

#F3F3F3

#5A5A5C

#5FBC51

#1B308B

#CACACA

#F8F8F8

#223039

#23313A

#E0E0E0

#EFEFEF

#081213

#202731

#6B0105

#7E0306

#FFFFFF

#0B355B

#0C4473

#FFFFFF

#361623

#1E1E1E

#BCE936

#91C211

#14B7CA

#0772A0

#BF0046

#A7181A

#E93237

#FFFFFF

#5D1115

#F72D3B

#252527

#411E24

#C43233

#606060

#C6C0CA

#FFFFFF

#333335

#3A3A3A

#2F96E1

#6AB3E8

#E6E8D2

#FB3099

#0A0A0A

#2E8ACB

#333333

#FFFFFF

#F69314

#A8CE00

#040203

#62CEFF

#0A8FCA

#FFB213

#FFCC34

#FFF09B

#B1CE11

#E2F355

#323232

#424242

#111111

#A7A7A7

#C9C9C9

#F4F4F4

#FFFFFF

#E7E7E7

#3A6DA6

#3D3D3D

#DDDDDD

#BF8F83

#B59389

#DDB9AB

#FFFEFD

#E6F7FE

#D6F2FD

#A9ECA9

#C5F6C9

#03070A

#1A3843

#A9CADD

#FEB00E

#FCE970

#3E8297

#0A396F

#031020

#04274F

#FDFDFD

#D6D5DA

#0B386F

#366090

#B1847E

#F1D5D1

#6A493A

#9A745D

#497621

#000000

#0E0E0E

#3C3C3C

#232323

#B1EB1A

#C8C6C7

#F4F4F4

#614B26

#C35ED4

#000000

#565158

#796973

#242424

#FB7760

#F6923D

#C0D84C

#FEFCFF

#99AA4A

#49C4C2

#179098

#D55B10

#000000

#0B0801

#2F190B

#623A20

#8C5630

#BA8364

#FFFBF8

#344885

#061131

#DC1416

#000000

#222222

#FFFFFF

#F70066

#D70055

#AC0147

#F66A00

#D65D00

#B34E00

#6E8F00

#5F7D01

#486000

#00809D

#006C85

#0A505C

#111111

#181818

#1C5C9C

#3096FA

#FDFDFD

#4DDAF8

#AAAAAA

#1C292F

#FFFFFF

#80302F

#7E7E7E

#CA8D3F

#008BB0

#B5CD2D

#000000

#171717

#282A1C

#616034

#524123

#787856

#5B5C4E

#FFFFFF

#B6E587

#3F2214

#674C37

#8A4734

#272C32

#FFFFFF

#F4F79E

#000000

#E2F4FE

#9E400E

#436682

#F4E289

#FFFFFF

#134F4F

#0A3635

#EFF1F0

#F4F6F5

#EF601E

#DE410E

#000000

#849090

#E8E8E8

#D6D6D6

#AEDBF2

#FEFFFF

#222222

#E4E4E2

#FEFEFE

#F5F4EF

#6D7367

#E18D19

#DB7700

#360F00

#3A6EAC

#472406

#CACBC6

#97261E

#353C42

#111B24

#FFFFFF

#E6E6DA

#030B0F

#6E1914

#CBCCBE

#F7F4EB

#DBD9CC

#534E48

#2F2822

#C0D66A

#5E566D

#829819

#F9F8DC

#F6EDD0

#FDF8FE

#9A0000

#009100

#FEFEFF

#12110F

#4451C3

#D29441

#A96C11

#E1E1C7

#FAF7F0

#403C31

#366371

#3A7C18

#5A9D2A

#575347

#DB7338

#D6CABC

#F3F0EB

#6D5D46

#928574

#FFDB9D

#FAC673

#F7991B

#FFFFFF

#A60800

#73737B

#888F7F

#060F0C

#F1EEDB

#261C12

#30261C

#3B2E25

#1FA3AF

#F6571F

#BBE9CC

#DCF5CE

#FDFCD0

#44433F

#6B6A65

#FFFFFF

#69B5CD

#FF0B3F

#FF7E88

#ADCC4B

#94BE4E

#9D7436

#8A6D4D

#C1A866

#AA8C50

#764F28

#83512E

#E5D69D

#FBFAF5

#F1F2ED

#FEA593

#F91009

#C11000

#605E5F

#B3AEAA

#0D070B

#698D00

#B6C707

#DCED15

#ECECE0

#FFFFF6

#DA1F00

#990000

#373A3F

#323639

#E8E3CF

#FFFFFF

#DCD7C4

#5E5C50

#6A8CB1

#698086

#FFFFFF

#56B5E5

#343434

#616861

#4A7F95

#DCE7E1

#A1D40B

#92C101

#628301

#FFFFFF

#000000

#333333

#E1F0B5

#C2E15F

#8E4906

#FF8700

#385C79

#FFFFFF

#00964E

#94E86F

#D2F6CA

#AAF179

#00904D

#7FE659

#E7E8EC

#F2F6F7

#EEEEEE

#37432B

#0175BE

#FECB32

#FFFFFF

#983132

#FEF1CF

#DB6D00

#2C2C2E

#000000

#3D8F9B

#FFFFFF

#A2D2E0

#F5EFCB

#EDDAB2

#ED4F4E

#6099AC

#E5F4FB

#FBEB4D

#CFC643

#323A3D

#958D69

#DFEFEF

#346667

#E0E9E8

#98C7C1

#FFFFFF

#ADD6DA

#77A976

#82B483

#386261

#A9DEA6

#303030

#FBA000

#9A0400

#50382C

#583C30

#2E1A0F

#977462

#E8DAC1

#ED667A

#432C21

#FFFFFF

#63705E

#454D40

#C0C5BE

#6A8D49

#E2FAE4

#372526

#131612

#E8E8DE

#570916

#EEEEE4

#45060F

#DFD5B3

#EB9F0A

#333333

#B99865

#EED9BA

#2F281E

#FFFFFF

#DAA061

#F36A22

#F36A22

#908874

#3AC3DD

#E86A1A

#2B4965

#2A4864

#1D354D

#385773

#B2D800

#D1EB03

#FFFFFF

#FBFDD5

#0A1616

#081414

#B5D609

#E4F920

#214845

#7B1314

#E1E3BE

#162329

#2D3740

#0D0D0D

#C44300

#B63300

#D87440

#FFFFFF

#282828

#080808

#E5E5E7

#D6E6E6

#88A016

#E1AC06

#E4A49B

#000000

#343434

#1F1F1F

#99BE18

#FFFFFD

#252935

#40424E

#7BC472

#61B857

#FDFDFD

#1C5870

#004964

#104A62

#E9FFFF

#FFFFFF

#8DCC49

#01344F

#02344F

#011D29

#FFFFFF

#AAC8EC

#F2CD7C

#B53301

#02070B

#25B1E6

#191A1C

#FFFFFF

#42BCEB

#F27403

#FFB62F

#202020

#02070B

#98CF74

#63A029

#FFFFFF

#2D2D2D

#121212

#FFFFFF

#E9EADA

#CFD825

#434345

#004016

#00A141

#F7F6FC

#020300

#282128

#EFCF1C

#2FC997

#DEE0DF

#EF628D

#F3E216

#566062

#FFFAE6

#DBF4FB

#ECE9D8

#EAF8FB

#157F8D

#DB8D34

#94918A

Outil de référencement professionnel - essai gratuit Cette entrée a été publiée dans Webdesign, avec comme mot(s)-clef(s) , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

39 réponses à Tendances Web 2007 : 60 palettes de couleur élégantes pour vos sites Web

  1. Bruno Bichet dit :

    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. Damien Ravé - Le Caphar dit :

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

  3. Fran6 dit :

    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. Mac dit :

    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. Romain dit :

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

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

  7. Tout est une question de couleur…

    Je suis tombe sur ce billet, qui presentait les palettes de couleurs utilisees dans les designs de 60 sites consideres comme elegants, professionnels et visuellement attractifs. Profitant du gros travail qui a ete fait, je me suis demande…

  8. coquine dit :

    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 !

  9. Horoscope dit :

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

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

    http://www.enick.nl

  11. rencontre dit :

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

  12. video amateur dit :

    beaucoup d’infos pas faciles a trouver, merci

  13. tchat dit :

    Tres interessant et visiblement fastidieux a realiser, double merci

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

  15. S4PH1R3 dit :

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

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

  17. en ligne dit :

    les coulaurs c’est vraiment pas mon truc moi !

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

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

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

  21. Oui je vais m en servir sur mon site!

  22. anti tabac dit :

    Très pratique merci

  23. blog voyance dit :

    Vraiment très pratique en effet

  24. xhtmlownz dit :

    ton blog bug on voit pas le fond d’écran du coup on voit rien…

  25. Le Caphar Damien Ravé dit :

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

  26. james dit :

    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

  27. Voyance dit :

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

  28. serybenzo dit :

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

  29. rencontre dit :

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

  30. 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…

  31. Blog Art dit :

    j’aime beaucoup, très utile.
    Laiza

  32. otaku geek dit :

    Très interessant , un bon résumé pratique!
    C’est exactement ce dont j’avais besoin….

  33. karmavoyance dit :

    hey, excellente cette infos !
    ça va beaucoup m’aider

    merci !

  34. Libertine dit :

    Sympa d’avoir quel couleurs vont avec d’autres, je vais tester ca sur un de mes blogs de rencontre voir si ca fait+ rester les visiteurs.

  35. Ping : Les péchés capitaux du Webdesign : tout mettre sur la page d’accueil | Le Potlatch

  36. Likimedia dit :

    Quelques bonnes idées d’assemblage je dois avouer, mais du coup est-ce que ça ne va pas forcer tout le monde (ou en tout cas tous les visiteurs) à adopter les mêmes styles ?

  37. @Likimedia : comme toute source d’inspiration, c’est un coup de pouce pour démarrer, pas une référence absolue. D’autant qu’elle date maintenant (presque cinq ans !) et que je n’ai pas vu le Web s’harmoniser depuis que je l’ai publiée :)

  38. Ping : 60 palettes de couleur pour vos sites Web | DLLWEBFULL

  39. Voyance elyna dit :

    On a le choix
    voyance elyna

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>