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
#C8C8C8
#DEDEDE
#E9E9E9
#626262
#4A4A4A
#53B455
#0FAF11
#35BE30
#DE4D54
#F5F5F5
#013162
#13518C
#2D7CC1
#C8E596
#A5D529
#F8F8F8
#9E9E9E
#2B2B35
#A4A4A4
#87B3D8
#961357
#000000
#4B0625
#BB2275
#D8348B
#EE85C0
#CE521C
#FEBD0D
#9B9B9B
#EBEAE5
#6E6335
#908653
#C3BC9F
#C4D10F
#AAA591
#55253F
#CAC9C5
#B7C8D8
#D55041
#832D36
#FE663D
#1E201D
#4E4B46
#F4F4F2
#A4A792
#A4A792
#DB4723
#C1CE62
#FFFFFF
#67741A
#636152
#EBF5F4
#0A1010
#385F5C
#91B2AB
#FFFFFF
#5E8A6F
#D9E464
#91B2AB
#F55F0A
#F9D47C
#5E6366
#223039
#23313A
#E0E0E0
#EFEFEF
#081213
#202731
#6B0105
#7E0306
#FFFFFF
#0B355B
#0C4473
#361623
#1E1E1E
#BCE936
#91C211
#14B7CA
#0772A0
#BF0046
#A7181A
#E93237
#FFFFFF
#F69314
#A8CE00
#040203
#62CEFF
#0A8FCA
#FFB213
#FFCC34
#FFF09B
#B1CE11
#E2F355
#424242
#111111
#A7A7A7
#C9C9C9
#F4F4F4
#FFFFFF
#E7E7E7
#3A6DA6
#3D3D3D
#DDDDDD
#BF8F83
#B59389
#DDB9AB
#E6F7FE
#D6F2FD
#A9ECA9
#C5F6C9
#03070A
#1A3843
#A9CADD
#FEB00E
#FCE970
#3E8297
#031020
#04274F
#FDFDFD
#D6D5DA
#0B386F
#366090
#B1847E
#F1D5D1
#6A493A
#9A745D
#497621
#0E0E0E
#3C3C3C
#232323
#B1EB1A
#C8C6C7
#F4F4F4
#614B26
#C35ED4
#565158
#796973
#242424
#FB7760
#F6923D
#C0D84C
#FEFCFF
#99AA4A
#49C4C2
#179098
#D55B10
#0B0801
#2F190B
#623A20
#8C5630
#BA8364
#FFFBF8
#344885
#061131
#DC1416
#222222
#FFFFFF
#F70066
#D70055
#AC0147
#F66A00
#D65D00
#B34E00
#6E8F00
#5F7D01
#486000
#00809D
#006C85
#0A505C
#171717
#282A1C
#616034
#524123
#787856
#5B5C4E
#FFFFFF
#B6E587
#3F2214
#674C37
#8A4734
#FEFEFE
#F5F4EF
#6D7367
#E18D19
#DB7700
#360F00
#3A6EAC
#472406
#CACBC6
#97261E
#F6EDD0
#FDF8FE
#9A0000
#009100
#FEFEFF
#12110F
#4451C3
#D29441
#A96C11
#E1E1C7
#F3F0EB
#6D5D46
#928574
#FFDB9D
#FAC673
#F7991B
#FFFFFF
#A60800
#73737B
#888F7F
#060F0C
#DCF5CE
#FDFCD0
#44433F
#6B6A65
#FFFFFF
#69B5CD
#FF0B3F
#FF7E88
#ADCC4B
#94BE4E
#9D7436
#8A6D4D
#AA8C50
#764F28
#83512E
#E5D69D
#FBFAF5
#F1F2ED
#FEA593
#F91009
#C11000
#605E5F
#B3AEAA
#0D070B
#698D00
#B6C707
#DCED15
#FFFFF6
#DA1F00
#990000
#373A3F
#323639
#E8E3CF
#FFFFFF
#DCD7C4
#5E5C50
#6A8CB1
#698086
#92C101
#628301
#FFFFFF
#000000
#333333
#E1F0B5
#C2E15F
#8E4906
#FF8700
#385C79
#00964E
#94E86F
#D2F6CA
#AAF179
#00904D
#7FE659
#E7E8EC
#F2F6F7
#EEEEEE
#37432B
#0175BE
#A2D2E0
#F5EFCB
#EDDAB2
#ED4F4E
#6099AC
#E5F4FB
#FBEB4D
#CFC643
#323A3D
#958D69
#346667
#E0E9E8
#98C7C1
#FFFFFF
#ADD6DA
#77A976
#82B483
#386261
#A9DEA6
#303030
#FBA000
#9A0400
#00A141
#F7F6FC
#020300
#282128
#EFCF1C
#2FC997
#DEE0DF
#EF628D
#F3E216
#566062
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

Ping : Les péchés capitaux du Webdesign : tout mettre sur la page d’accueil | Le Potlatch
Ping : 60 palettes de couleur pour vos sites Web | DLLWEBFULL