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

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

Tags

Commentaires

Ajouter un commentaire

La discussion continue ailleurs

Derniers commentaires

Rechercher

À retenir

Catégories

Tags

Liens

Copains copines

Webdesign

Photographie

L'auteur

Mes sites

Derniers billets

Billets les plus lus