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

Publié le 29 août 2007 par caphar

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

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
Google+
Bookmark and Share

Billets similaires

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.

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

  1. Bruno Bichet dit :
    30 août 2007 à 20 h 31 min

    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 :
    30 août 2007 à 23 h 35 min

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

  3. Fran6 dit :
    31 août 2007 à 10 h 51 min

    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 :
    12 septembre 2007 à 13 h 45 min

    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 :
    12 septembre 2007 à 14 h 54 min

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

  6. Maxime ( Tendances Web ) dit :
    12 septembre 2007 à 18 h 37 min

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

  7. L-tz : the blog dit :
    13 septembre 2007 à 21 h 36 min

    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 :
    23 avril 2008 à 12 h 57 min

    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 :
    28 mai 2008 à 14 h 31 min

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

  10. eNick website ontwikkeling dit :
    8 juillet 2008 à 19 h 21 min

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

    http://www.enick.nl

  11. rencontre dit :
    15 septembre 2008 à 15 h 31 min

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

  12. video amateur dit :
    25 septembre 2008 à 20 h 07 min

    beaucoup d’infos pas faciles a trouver, merci

  13. tchat dit :
    27 octobre 2008 à 19 h 41 min

    Tres interessant et visiblement fastidieux a realiser, double merci

  14. creation site internet nice dit :
    1 novembre 2008 à 19 h 10 min

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

  15. S4PH1R3 dit :
    9 décembre 2008 à 1 h 26 min

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

  16. rencontre gratuite dit :
    12 décembre 2008 à 4 h 48 min

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

  17. en ligne dit :
    1 février 2009 à 1 h 44 min

    les coulaurs c’est vraiment pas mon truc moi !

  18. boutique de lingerie sexy dit :
    8 février 2009 à 11 h 12 min

    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. Forum pompe a chaleur dit :
    14 février 2009 à 15 h 15 min

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

  20. creation site internet dit :
    15 février 2009 à 13 h 30 min

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

  21. formation massage dit :
    15 février 2009 à 13 h 30 min

    Oui je vais m en servir sur mon site!

  22. anti tabac dit :
    15 février 2009 à 13 h 31 min

    Très pratique merci

  23. blog voyance dit :
    13 avril 2009 à 4 h 31 min

    Vraiment très pratique en effet

  24. xhtmlownz dit :
    13 avril 2009 à 18 h 04 min

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

  25. Le Caphar Damien Ravé dit :
    23 avril 2009 à 1 h 37 min

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

  26. james dit :
    22 mai 2009 à 1 h 26 min

    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 :
    23 septembre 2009 à 14 h 30 min

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

  28. serybenzo dit :
    18 mars 2010 à 13 h 12 min

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

  29. rencontre dit :
    11 mai 2010 à 15 h 22 min

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

  30. voyance gratuite dit :
    31 mai 2010 à 12 h 25 min

    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 :
    27 septembre 2010 à 19 h 59 min

    j’aime beaucoup, très utile.
    Laiza

  32. otaku geek dit :
    17 juin 2011 à 9 h 08 min

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

  33. karmavoyance dit :
    17 juin 2011 à 9 h 09 min

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

    merci !

  34. Libertine dit :
    18 juin 2011 à 16 h 13 min

    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 :
    15 mars 2012 à 15 h 00 min

    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. Damien Ravé (Le Caphar) dit :
    15 mars 2012 à 15 h 26 min

    @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

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>