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

<< Ecouter de la musique gratuitement : enfin une solution
>> Candidats à l'embauche : comment se griller auprès d'un employeur en une seule phrase ?

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

Par Damien Ravé - Le Caphar, mercredi 29 août 2007 à 23:02 :: Webdesign :: #95 :: rss

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

Ce billet

Envoyez ce billet à un ami
Abonnez-vous au flux RSS
Tags : couleurs, identité visuelle, inspiration, mode, tendance, webdesign
Rétrolien : http://www.lepotlatch.org/tb.php?id=95

A lire sur le même thème

Commentaires

1. Le jeudi 30 août 2007 à 20:31, par Bruno Bichet

Bruno Bichet a posté 6 commentaires dans les articles suivants :

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. Le jeudi 30 août 2007 à 23:35, par Damien Ravé - Le Caphar

Damien Ravé - Le Caphar a posté 37 commentaires dans les articles suivants :

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

3. Le vendredi 31 août 2007 à 10:51, par Fran6

Fran6 a posté 1 commentaire dans les articles suivants :

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

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. Le mercredi 12 septembre 2007 à 13:45, par Mac

Mac a posté 1 commentaire dans les articles suivants :

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

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. Le mercredi 12 septembre 2007 à 14:54, par Romain

Romain a posté 1 commentaire dans les articles suivants :

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

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

6. Le mercredi 12 septembre 2007 à 18:37, par Maxime ( Tendances Web )

Maxime ( Tendances Web ) a posté 1 commentaire dans les articles suivants :

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

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

7. Le mercredi 23 avril 2008 à 12:57, par coquine

coquine a posté 1 commentaire dans les articles suivants :

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

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 !

8. Le mercredi 28 mai 2008 à 14:31, par Horoscope

Horoscope a posté 1 commentaire dans les articles suivants :

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

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

9. Le mardi 8 juillet 2008 à 19:21, par eNick website ontwikkeling

eNick website ontwikkeling a posté 1 commentaire dans les articles suivants :

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

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

www.enick.nl

10. Le lundi 15 septembre 2008 à 15:31, par rencontre

rencontre a posté 2 commentaires dans les articles suivants :

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

11. Le lundi 27 octobre 2008 à 19:41, par tchat

tchat a posté 2 commentaires dans les articles suivants :

Tres interessant et visiblement fastidieux a realiser, double merci

12. Le mardi 9 décembre 2008 à 01:26, par S4PH1R3

S4PH1R3 a posté 1 commentaire dans les articles suivants :

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

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

13. Le vendredi 12 décembre 2008 à 04:48, par rencontre gratuite

rencontre gratuite a posté 1 commentaire dans les articles suivants :

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

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

Ajouter un commentaire

L'auteur

Explorateur infatigable des nouvelles technologies, je travaille dans le monde alternatif de l'économie sociale. Je fabrique et anime des sites et des applications en ligne.

Me contacter

Rechercher