2007
Posté dans 
Le Web 2.0 se distingue d’une part par les nouvelles methodes de programmation telles qu’Ajax mais également par un style visuel bien particulier faisant intervenir des couleurs simples mais reconnaissables au premier coup d’oeil.
Voici la liste des couleurs utilisées sur les “grands sites Web 2.0″. Celle-ci est divisée en 3 catégories :
- les tons neutres (couleurs passepartout)
- les tons flashis (couleurs très contrastées)
- les tons pastels (couleus douces)
La technique pour avoir un site aux couleurs Web 2.0 est simple:
- choisissez une couleur flashie
- choisissez une couleur pastelle
- et enfin choisissez autant de couleurs neutres que vous le souhaitez…
… et voilà, votre site ressemblera à une merveille du Web 2.0! Du moins en ce qui concerne les couleurs…
N’hésitez pas à montrer votre site en commentant cet article 
tons neutres
Shiny silver [#EEEEEE]
Reddit white [#FFFFFF]
Magnolia Mag.nolia [#F9F7ED]
Interactive action yellow [#FFFF88]
Qoop Mint [#CDEB8B]
Gmail blue [#C3D9FF]
Shadows Grey [#36393D]
tons flashis
Mozilla Red [#FF1A00]
Rollyo Red [#CC0000]
RSS Orange [#FF7400]
Techcrunch green [#008C00]
Newsvine Green [#006E2E]
Flock Blue [#4096EE]
Flickr Pink [#FF0084]
tons pastels
Ruby on Rails Red [#B02B2C]
Etsy Vermillion [#D15600]
43 Things Gold [#C79810]
Writely Olive [#73880A]
Basecamp Green [#6BBA70]
Mozilla Blue [#3F4C6B]
Digg Blue [#356AA0]
Last.fm Crimson [#D01F3C]
Edit du 2 novembre 2007…
Vous pouvez télécharger la palette reprenant toutes ces couleurs pour photoshop au format .aco . Merci à BurningHat pour sa contribution, cela me fait très plaisir de voir des personnes s’investir pour mon blog 
Merci également à lui pour l’image en haut de cet article
Prenez un café et consultez les articles traitant du même sujet
Ajoutez cet article à votre Bookmark favoris
Un tutorial sur les couleurs Web 2 !
Du grand n’importe quoi…
Le web 2 c’est un palier technologique qui permet de nouveau usage…
Il n’existe pas de style web 2.
Ce qu’on nomme le style web 2 c’est le style que l’on voit partout et accessible aux amateurs : Dégradés, glossy degeu partout et des arrondis partout…
En clair vous n’avez rien compris
Hello,
Afin de profiter plus facilement et pleinement de la palette proposée dans cet article, je me suis “amusé” à faire un jpeg et un nuancier pour photoshop…
Je me suis dis que tu serais peut-être intéressé de pouvoir les mettre à disposition de tes lecteurs en ressource à télécharger ? Je te mail volontiers tout ça si ça t’intéresse.
Bonne journée !
PS: j’ai essayé de te contacter par ton formulaire de ton contact mais il y a du y avoir un bug: aucune confirmation d’envoi du message :s
pour Edouard :
“Un tutorial sur les couleurs Web 2 !”
=> Où as-tu vu que c’était un tutorial?
“Le web 2 c’est un palier technologique qui permet de nouveau usage…”
=> C’est très vague, cela dit je dirais “oui mais pas seulement”… il s’agit d’une approche totalement différente des sites internet. Pas seulement dans les technologies utilisées mais également dans l’accès aux informations, le style graphique, etc…
“Il n’existe pas de style web 2″, “le style web 2 c’est le style que l’on voit partout et accessible aux amateurs”
=> Ca existe ou pas alors le style web2.0?…
Je pense que tu n’as pas lu mon article Edouard… Je ne résume pas le Web2.0 à des couleurs… D’ailleurs si tu avais tout lu, tu aurais remarqué que je parle de quelques couleurs qui sont utilisées dans quelques gros sites communautaires dits “web2.0″ et ces couleurs sont là plutot à titre indicatif. De plus, informer les débutants de la façon d’établir une palette de couleurs selon 3 catégories de couleurs me semble intéressant…
En clair, je m’efforce d’offrir une vision globale aux personnes qui veulent découvrir le monde web et tu viens me contredire sur un sujet que tu ne maitrises vraissemblablement pas du tout… Quel intérêt?
pour burningHat:
je te contacte au plus vite et mettrai cette palette à disposition dans cet article!
merci pour ta contribution
ps: je regarderai pour le formulaire de contact
Yep j’attends ton mail alors ça marche
Oh, ben flute alors, j’aurais dû être patient, je viens de faire le nuancier photoshop et le jpeg. Je venais te le proposer en contribution… Bien joué burningHat.
Je te rejoins dans l’idée que le web est une autre conception de l’internet, de son usage et donc de l’aspect graphique. Il me semble que le but étant de faire intéragir l’utilisateur, le choix des couleurs n’est pas anodins (faciliter la lecture par le choix des contrastes par exemple…) Cette palette n’est bien sûr qu’indicative et il me semblait que c’était évident… Merci à toi
Tant pis Mika
Biensur que le choix des couleurs est important pour la séparation du contenu telle qu’on la connait actuellement(délimitations par zones de couleurs différentes entre header / center / footer par exmple).
Mais cet article est totalement neutre et ne propose qu’un aperçu des couleurs utilisées sur d’autres sites très connus et ce à titre informatif seulement. C’est pourquoi je n’ai pas vraiment compris la réaction d’Edouard…
@Mika: merci
@Cedric: bof, des gens qui ne se donnent pas vraiment la peine de lire/comprendre un billet et réagissent brutalement, y en a plein le web… Faut pas y faire attention !
@Cédric: de rien, ça m’a fait plaisir ! (l’utopie du web à la base, c’était bien le partage de la connaissance non ? :D). Je me suis fendu d’une petite note chez moi pour présenter ton article à mes lecteurs
Belle récolte de couleurs : typiquement le genre de truc qu’on aime avoir sans pour autant trouver la motivation de le faire
Merci à toi ! Allez, hop dans l’aggrégateur 
merci à tous! N’hésitez pas à lire d’autres articles et à les commenter
@Edouard : raison ou pas, ce n’est pas ça qui te donne le droit d’être aussi agressif.
Liste pratique, mais ce serait bien de citer les sources parfois
http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette
Sans rancune, j’ai pris plaisir a parcourir ton site et je reviendrai surement
Exact Jaafar! Pour tout avouer, j’ai repris un article que j’avais écrit il y a presque un an pour avoir une version française de l’article et j’avais déjà dû oublier la source la 1ere fois!
N’hésitez pas à aller sur ce site de qualité, mais en anglais…
Techniquement le web 2.0 n’existe même pas
celà dit, chouette article ! merci
“Techniquement le web 2.0 n’existe même pas ;)”
-> alors le Web 2.0 aura fait couleur autant sinon plus d’encre que le Dahu
La critique est facile Edourd mais y a rien de constructif dans ce que tu dis.
Moi je trouve cette artice très intéressant.
Certe le Web 2 ce n’est pas que du graphique, c’est aussi de l’ajax, l’amélioation du cms et du php mais ce qui saute surtout au yeux c’est les nouveaux designs qui en découle.
Beaucoup d’effects mirroirs, glossys, et d’arrondis, le tout avec un savant mélange des couleurs.
Moi en tout cas je trouve que ça en jète après tout est une question de gout.
Outre l’agressivité du ton employé par Edouard (style qui me blaze sur les blogs, mais c’est un autre débat), je suis tout à fait d’accord avec le fond de sa réaction : “Le web 2 c’est un palier technologique qui permet de nouveaux usages”, après pour ce qui est du style bien sur la lisibilité, l’ergonomie sont essentiels à un site, mais dire que l’orange et le bleu sont plus lisibles que d’autres couleurs est aberrant, il s’agit d’une mode, le orange était à la mode dans les années 70, ringard dans les années 80-90 et de nouveau à la mode aujourd’hui. Je trouve ça dommage de formater les styles. L’ergonomie est essentielle à un site et, heureusement, il n’y a pas une mais toute une diversité de manière de mettre en avant un produit, une information, sans pour autant bouleverser les habitudes de l’internaute.
Ce billet est intéressant à titre “sociologique”, comme marqueur de notre temps en terme de design, dans ce sens je l’apprécie. Si celui-ci s’inscrit dans une “norme” ou comme modèle pour des graphistes là je suis choqué. Je ne fais pas de procès d’intention à l’auteur de ce site que j’apprécie, mais ce qui me fait rejoindre Edouard est cette dernière phrase “… et voilà, votre site ressemblera à une merveille du Web 2.0″. On peut faire du web 2.0 avec d’autres couleurs.
Je suis tout à fait d’accord avec toi sur le fait qu’il existe plusieurs façons de mettre en avant un produit, que la lisibilité et l’ergonomie sont essentiels à un site etc…
Par contre, et une fois de plus, où vas-tu trouver que le billet se veut un “modèle pour des graphistes”? Tout comme Edouard, j’ai l’impression que vous faites dire à l’article ce qui n’est pas écrit.
Quant à ta dernière phrase “On peut faire du web 2.0 avec d’autres couleurs”, je te renvois à ma réponse à Edouard (cf: “D’ailleurs si tu avais tout lu, tu aurais remarqué que je parle de quelques couleurs qui sont utilisées dans quelques gros sites communautaires dits “web2.0″ et ces couleurs sont là plutot à titre indicatif.[…]”) tout simplement et je n’y reviendrai pas.
Tout ce qui tourne autour de la notion flou du web 2.0 n’a pas fini de diviser les gens. Ce que je retiens de manière pragmatique, c’est qu’un bidule qualifié de 2.0, aussi vague soit-il, a donné naissance à des pratiques bien réelles comme le choix de combinaisons de couleurs qu’on ne voyaient pas beaucoup en dehors des magazines de mode ou du catalogue de la redoute.
Du coup, les catalogues de vente par correspondance sont condamnés à mettre Clara Morgane en Une pour se démarquer. Si c’est pas malheureux
Bref, qu’on soit pour ou contre, on ne peut pas nier que certaines combinaisons de couleur parmi celles qui fonctionnent le mieux actuellement sur le web était plus réservées à l’art contemporain qu’au caddie de madame Michu.
C’est peut-être ça la révolution du web 2.0
D’où l’intérêt de ce genre de travail de compilation sur les palette de couleurs faire ressortir les tendances.
Sinon, je suis un peu déçu que cette article ne soit qu’une traduction sans que les sources aient été citées…
Très bien, je pense avoir lu le billet en entier et ne pas avoir eu une impression claire à ce sujet sur l’intention. Je disais d’ailleurs “SI celui-ci s’inscrit dans une “norme” ou comme modèle pour des graphistes” en m’attachant à employer le conditionnel et pas l’affirmatif.
Mon intervention était une précision personnelle sur le débat, pas spécialement un jugement sur l’article en soit, comme je l’ai dit “Ce billet est intéressant à titre “sociologique”, comme marqueur de notre temps en terme de design, dans ce sens je l’apprécie” tout simplement et je n’y reviendrai pas non plus
Bonne continuation.
PS: une petite remarque en terme d’ergonomie du site, un feed-back utilisateur : postant pour la première fois ici j’ai mis un petit temps de réaction avant de comprendre que le bouton de validation du message est “Dites-le!”. Sans forcement en changer le design, ce serait peut-être plus intuitif qu’il soit placé à droite sous le champs du formulaire plutôt que à gauche.
pour !GZA : J’ai remplacé “dites le” par “poster le commentaire”
c’est un peu plus lisible je pense… J’ai ajouté également un cursor:pointer dessus pour plus de confort.
Bonne continuation à vous toutes et vous tous
XRdCPa eeeerrrffddgggggggccccc