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

Billets similaires

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

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

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

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

Laisser un commentaire

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