Webdesign #3 : la partie technique sur les couleurs qui va vous donner mal à la tête
Pareil que la dernière fois : les liens sont à la fin.
Bien souvent, le plus gros problème d'un site web réside dans son agencement et ses couleurs. Eh oui, tous les goûts sont dans la nature mais ça ne veut pas dire pour autant qu'ils sont tous bons.
1) Culture G.
Les couleurs primaires, secondaires, complémentaires, le cercle chromatique, ça vous dit quelque chose ? Ça devrait.
Il existe deux types de couleurs primaires : synthèse additive et synthèse soustractive ; respectivement rouge (#FF0000), vert (#00FF00), bleu (#0000FF) et magenta (#FF00FF), cyan (#00FFFF), jaune (#FFFF00).
{ La synthèse additive est l'opération consistant à combiner des lumières pour donner une nouvelle couleur. Rouge + Vert + Bleu = Blanc (#FFFFFF).
La synthèse soustractive est l'opération consistant à combiner l'effet d'absorption de plusieurs couleurs pour en obtenir une nouvelle. Magenta + Cyan + Jaune = Noir (#000000). }
Les couleurs secondaires sont, pour la synthèse additive, les couleurs de la synthèse soustractive et vise-versa. En peinture, les couleurs secondaires sont l'orange (#FFA500), le violet (#660099) et le vert (#00FF00).
Les couleurs complémentaires sont bien repérables sur un cercle chromatique :
Cercle chromatique par synthèse additive Pour le rouge, c'est le cyan. Bleu → jaune ; Vert → magenta.
Toutes ces couleurs sont les couleurs de base.
2) Trucs de geeks et infographistes
Il existe plusieurs manières de noter les couleurs. Le plus courant et utilisé sur le Net est la norme héxadécimale. C'est une série de 6 lettres et chiffres, de A à F et de 0 à 9, précédé d'un dièse (#). Il est utilisé en HTML, CSS, BBCode aussi je crois... (sur les forums). On connaît rapidement les couleurs principales :
Noir : #000000;
Blanc : #FFFFFF;
Rouge : #FF0000 ;
Vert : #00FF00 ;
Bleu : #0000FF ;
Jaune : #FFFF00 ;
Comment retrouver ces codes ? Exemple avec une grille de noir au blanc :
C'est comme pour les multiplications =D On prend le nom de la ligne horizontale puis celui de la ligne verticale, ce qui nous donne un couple... qu'on recopie trois fois. Le noir est donc #000000. Le gris classique est #808080. Les gris sur ce LJ pour le background et le fond de post sont respectivement #E9E9E9 et #FAFAFA.
Plus dur maintenant ! On passe aux 216 couleurs web !
Cette fois-ci, on a trois couples de deux. En gros, c'est le couple "bloc". Pour trouver le code héxadécimal d'une couleur, on écrit : ligne horizontale + bloc + ligne verticale. Notre bleu primaire est bien #0000FF. Entraînez vous à retrouver les couleurs primaires qu'on a vues.
{ Ecrire #00FF00 ou #00ff00 n'a aucune importance. C'est une question de préférence. }
Bien sûr, on peut encore affiner la grille et compliquer les choses mais je n'ai pas pour but de vous faire apprendre par coeur le code héxadécimal de 256 millions de couleurs. Seulement, je pars du principe que pour utiliser quelque chose, il faut comprendre comment ça marche. Voilà pourquoi c'est une partie un peu compliquée.
Bon, on a vu l'héxa, mais y'a pas que l'héxa dans la vie ! En CSS3 nouvellement arrivé, on peut nommer les couleurs selon le code RGB. RGB ? Red Green Blue. Les utilisateurs Windows vont vite s'y retrouver car le sélecteur de couleur de bon nombre d'applications utilise ce système. On y écrit les couleurs sous cette forme : 0, 0, 0.
Il s'agit de quantifier la quantité de rouge, de vert et de bleu d'une couleur sur une échelle de 0 à 255.
Sous Photoshop 0, 0, 0 est donc du noir. 255, 255, 255, c'est du blanc.
Le premier nombre est la quantité de rouge. Pour obtenir le rouge primaire, le code sera donc... 255, 0, 0.
Vert ? 0, 255, 0.
Bleu ? 0, 0, 255.
Il existe encore une autre norme mais réservée aux graphistes cette fois. Cependant, ça ne fait pas de mal de la connaître. Il s'agit de la norme CMJN (ou CMYN en anglais : jaune → yellow) qui correspond au pourcentage de cyan, de magenta, de jaune et de noir dans une couleur.
C'est une question d'encre. Les encres utilisées pour imprimer sont le cyan, le magenta, le jaune et le noir (vous avez peut-être vu des tests de couleurs, des petits carrés sur des emballages).
C'est une norme qu'on utilise très peu sur le Net mais ça ne fait pas de mal de la connaître.
3) Choisir ses couleurs
Toujours en vie ? Bien.
Vous avez certainement des couleurs préférées. Individuellement, elles sont très bien. Ensemble, c'est souvent la catastrophe. Du coup, vous allez choisir celle que vous préférez, l'Unique, la Seule.
Je change d'avis comme de chemise dans ce domaine. J'ai eu une forte période rose pendant tout le printemps et j'en reviens maintenant au bleu. Pour en revenir à l'exemple d'aikon, je voulais quelque chose de léger, avec un côté layette. C'est une question d'adaptation au contenu, encore : le site est plein d'images, le layout ne doit pas surcharger l'ensemble ni attirer trop l'attention. Donc il fallait des couleurs pas trop vives. Même la police est "terne" : c'est un gris #585858.
Donc, j'étais en période rose mais il fallait un rose terne. J'ai donc jeté mon dévolu sur le rose #FF5EAA. Pour aller avec et rester dans le ton layette, il fallait un bleu (plus doux que le jaune mimosa) : #96B3D3. Ajoutons à ça un autre gris (#EEEEEE) et du blanc (#FFFFFF) et j'avais toutes mes couleurs !
C'est simple ? Eh bien non. J'ai une certaine notion des couleurs allant ensemble, depuis le temps que je me plante je bidouille.
Le mieux pour ce genre de cas, c'est de faire des tests. Si vous avez Photoshop, The Gimp, Illustrator, même Paint, faites vous des palettes. De simples fichiers avec des taches de couleur suffisent.
Une fois que vous êtes satisfait, enregistrez et gardez précieusement car ce sera la référence absolue de votre gamme de couleur, celle à laquelle vous vous référerez à chaque doute (même si vous allez très vite apprendre par coeur les codes héxa, à force de les écrire...).
Au passage, limitez-vous. Cinq, six couleurs suffisent généralement. On peut ensuite jouer sur les nuances mais ne vous choisissez pas une bibliothèque de couleur gros comme le catalogue de la Redoute.
3bis) Couleurs chaudes vs couleurs froides
Pour une question de ton et d'ambiance du site, vous devez aussi vous décider pour la gamme des couleurs à utiliser.
Du bleu, du vert, c'est "froid".
Du rouge, du violet, c'est "chaud".
Pour un site qui bouge et qui se renouvelle souvent, ou qui se veut convivial, préférez les couleurs chaudes.
Pour un site "sérieux", plus calme, préférez les couleurs froides.
4) Gestion des couleurs
Fond clair ou fond foncé ? La grande question... qui dépend aussi du contenu du site et de la manière dont vous voulez le présenter. C'est une question d'ambiance.
Un fond clair permet de mettre en avant le contenu en entier. Un fond foncé permet d'en mettre certains en relief (car la police sera plus claire).
Un fond clair bien géré ne fatigue pas les yeux. Un fond foncé ne permet pas une lecture prolongée (toujours à cause de la police claire).
Un fond clair permet l'utilisation de couleurs "légères". Un fond foncé privilégiera les couleurs frappantes.
Les fonds clairs sont utilisés sur des sites communautés, des journaux, des blogs à thème. Les fonds foncés sont utilisés sur des sites au message fort comme le site d'un candidat quelconque, d'une marque, d'un événement, etc.
Bien sûr, il existe des tas d'exemples et de contre-exemples. Il n'y a pas de "règles" établies en webdesign en dehors des normes de langage à respecter. Du coup, c'est plus du cas par cas et une question de goût.
Pour ma part, je suis en période "fond clair".
Et les autres couleurs, me direz-vous ? Il faut définir laquelle est la principale donc la plus présente sur le site (en dehors de la couleur de fond). Vous devez établir une hiérarchie : laquelle pour les titres ? laquelle pour le texte ? une couleur particulière pour les liens ?
Généralement, on utilise une gradation pour les titres. h1 sera plus vif/foncé que h2, qui sera lui-même plus vif/foncé que h3, etc. (comme il existe une gradation de taille pour ces balises).
Evitez les couleurs trop agressives pour le texte. On a tous le souvenir d'un texte imprimé sur la rétine après avoir lu un moment un texte clair sur un fond foncé. C'est suffisamment désagréable pour ne pas l'imposer aux autres.
Mettre en relief un lien, un gras, un italique, n'est pas forcément une mauvaise idée du moment que c'est bien fait et que ça s'intègre à ce que vous imaginez.
Et voilà =D Fin de la partie 3 ! Elle a dû bien vous saouler avec tout ce qui est technique mais je considère que c'est nécessaire. Maintenant que vous avez compris quelques trucs, vous allez pouvoir utiliser CatchColor, un tout petit logiciel qui vous permet en un clic de retrouver la couleur que vous voyez à l'écran et d'en copier le code sous la forme que vous voulez =D
Liens
Un peu de lecture
Codage informatique des couleurs (français)
Pourpre.com (français) avec plein d'outils
Outils/Ressources
Instant Color Schemes (anglais)
Colour Lovers (français bêta)
A propos de Colour Lovers
Le site propose des palettes de couleurs, très pratiques. N'EN PRENEZ PAS TROP !!
Je suis aussi tombée dans le piège, hein, à prendre toutes celles qui me plaisaient, jusqu'à ce que je me retrouve avec des centaines de Mo de palettes et un embarras grandissant quand il fallait en choisir une... Il faut se restreindre. "L'excès est mauvais en toute chose." Si une palette est très proche d'une que vous avez déjà, ne la prenez pas ; c'est aussi simple que ça.
La prochaine fois, on apprendra des trucs sur le HTML.
Bien souvent, le plus gros problème d'un site web réside dans son agencement et ses couleurs. Eh oui, tous les goûts sont dans la nature mais ça ne veut pas dire pour autant qu'ils sont tous bons.
1) Culture G.
Les couleurs primaires, secondaires, complémentaires, le cercle chromatique, ça vous dit quelque chose ? Ça devrait.
Il existe deux types de couleurs primaires : synthèse additive et synthèse soustractive ; respectivement rouge (#FF0000), vert (#00FF00), bleu (#0000FF) et magenta (#FF00FF), cyan (#00FFFF), jaune (#FFFF00).
{ La synthèse additive est l'opération consistant à combiner des lumières pour donner une nouvelle couleur. Rouge + Vert + Bleu = Blanc (#FFFFFF).
La synthèse soustractive est l'opération consistant à combiner l'effet d'absorption de plusieurs couleurs pour en obtenir une nouvelle. Magenta + Cyan + Jaune = Noir (#000000). }
Les couleurs secondaires sont, pour la synthèse additive, les couleurs de la synthèse soustractive et vise-versa. En peinture, les couleurs secondaires sont l'orange (#FFA500), le violet (#660099) et le vert (#00FF00).
Les couleurs complémentaires sont bien repérables sur un cercle chromatique :
Cercle chromatique par synthèse additive Pour le rouge, c'est le cyan. Bleu → jaune ; Vert → magenta.
Toutes ces couleurs sont les couleurs de base.
2) Trucs de geeks et infographistes
Il existe plusieurs manières de noter les couleurs. Le plus courant et utilisé sur le Net est la norme héxadécimale. C'est une série de 6 lettres et chiffres, de A à F et de 0 à 9, précédé d'un dièse (#). Il est utilisé en HTML, CSS, BBCode aussi je crois... (sur les forums). On connaît rapidement les couleurs principales :
Noir : #000000;
Blanc : #FFFFFF;
Rouge : #FF0000 ;
Vert : #00FF00 ;
Bleu : #0000FF ;
Jaune : #FFFF00 ;
Comment retrouver ces codes ? Exemple avec une grille de noir au blanc :
C'est comme pour les multiplications =D On prend le nom de la ligne horizontale puis celui de la ligne verticale, ce qui nous donne un couple... qu'on recopie trois fois. Le noir est donc #000000. Le gris classique est #808080. Les gris sur ce LJ pour le background et le fond de post sont respectivement #E9E9E9 et #FAFAFA.
Plus dur maintenant ! On passe aux 216 couleurs web !
Cette fois-ci, on a trois couples de deux. En gros, c'est le couple "bloc". Pour trouver le code héxadécimal d'une couleur, on écrit : ligne horizontale + bloc + ligne verticale. Notre bleu primaire est bien #0000FF. Entraînez vous à retrouver les couleurs primaires qu'on a vues.
{ Ecrire #00FF00 ou #00ff00 n'a aucune importance. C'est une question de préférence. }
Bien sûr, on peut encore affiner la grille et compliquer les choses mais je n'ai pas pour but de vous faire apprendre par coeur le code héxadécimal de 256 millions de couleurs. Seulement, je pars du principe que pour utiliser quelque chose, il faut comprendre comment ça marche. Voilà pourquoi c'est une partie un peu compliquée.
Bon, on a vu l'héxa, mais y'a pas que l'héxa dans la vie ! En CSS3 nouvellement arrivé, on peut nommer les couleurs selon le code RGB. RGB ? Red Green Blue. Les utilisateurs Windows vont vite s'y retrouver car le sélecteur de couleur de bon nombre d'applications utilise ce système. On y écrit les couleurs sous cette forme : 0, 0, 0.
Il s'agit de quantifier la quantité de rouge, de vert et de bleu d'une couleur sur une échelle de 0 à 255.
Sous Photoshop 0, 0, 0 est donc du noir. 255, 255, 255, c'est du blanc.
Le premier nombre est la quantité de rouge. Pour obtenir le rouge primaire, le code sera donc... 255, 0, 0.
Vert ? 0, 255, 0.
Bleu ? 0, 0, 255.
Il existe encore une autre norme mais réservée aux graphistes cette fois. Cependant, ça ne fait pas de mal de la connaître. Il s'agit de la norme CMJN (ou CMYN en anglais : jaune → yellow) qui correspond au pourcentage de cyan, de magenta, de jaune et de noir dans une couleur.
C'est une question d'encre. Les encres utilisées pour imprimer sont le cyan, le magenta, le jaune et le noir (vous avez peut-être vu des tests de couleurs, des petits carrés sur des emballages).
C'est une norme qu'on utilise très peu sur le Net mais ça ne fait pas de mal de la connaître.
3) Choisir ses couleurs
Toujours en vie ? Bien.
Vous avez certainement des couleurs préférées. Individuellement, elles sont très bien. Ensemble, c'est souvent la catastrophe. Du coup, vous allez choisir celle que vous préférez, l'Unique, la Seule.
Je change d'avis comme de chemise dans ce domaine. J'ai eu une forte période rose pendant tout le printemps et j'en reviens maintenant au bleu. Pour en revenir à l'exemple d'aikon, je voulais quelque chose de léger, avec un côté layette. C'est une question d'adaptation au contenu, encore : le site est plein d'images, le layout ne doit pas surcharger l'ensemble ni attirer trop l'attention. Donc il fallait des couleurs pas trop vives. Même la police est "terne" : c'est un gris #585858.
Donc, j'étais en période rose mais il fallait un rose terne. J'ai donc jeté mon dévolu sur le rose #FF5EAA. Pour aller avec et rester dans le ton layette, il fallait un bleu (plus doux que le jaune mimosa) : #96B3D3. Ajoutons à ça un autre gris (#EEEEEE) et du blanc (#FFFFFF) et j'avais toutes mes couleurs !
C'est simple ? Eh bien non. J'ai une certaine notion des couleurs allant ensemble, depuis le temps que je me plante je bidouille.
Le mieux pour ce genre de cas, c'est de faire des tests. Si vous avez Photoshop, The Gimp, Illustrator, même Paint, faites vous des palettes. De simples fichiers avec des taches de couleur suffisent.
Une fois que vous êtes satisfait, enregistrez et gardez précieusement car ce sera la référence absolue de votre gamme de couleur, celle à laquelle vous vous référerez à chaque doute (même si vous allez très vite apprendre par coeur les codes héxa, à force de les écrire...).
Au passage, limitez-vous. Cinq, six couleurs suffisent généralement. On peut ensuite jouer sur les nuances mais ne vous choisissez pas une bibliothèque de couleur gros comme le catalogue de la Redoute.
3bis) Couleurs chaudes vs couleurs froides
Pour une question de ton et d'ambiance du site, vous devez aussi vous décider pour la gamme des couleurs à utiliser.
Du bleu, du vert, c'est "froid".
Du rouge, du violet, c'est "chaud".
Pour un site qui bouge et qui se renouvelle souvent, ou qui se veut convivial, préférez les couleurs chaudes.
Pour un site "sérieux", plus calme, préférez les couleurs froides.
4) Gestion des couleurs
Fond clair ou fond foncé ? La grande question... qui dépend aussi du contenu du site et de la manière dont vous voulez le présenter. C'est une question d'ambiance.
Un fond clair permet de mettre en avant le contenu en entier. Un fond foncé permet d'en mettre certains en relief (car la police sera plus claire).
Un fond clair bien géré ne fatigue pas les yeux. Un fond foncé ne permet pas une lecture prolongée (toujours à cause de la police claire).
Un fond clair permet l'utilisation de couleurs "légères". Un fond foncé privilégiera les couleurs frappantes.
Les fonds clairs sont utilisés sur des sites communautés, des journaux, des blogs à thème. Les fonds foncés sont utilisés sur des sites au message fort comme le site d'un candidat quelconque, d'une marque, d'un événement, etc.
Bien sûr, il existe des tas d'exemples et de contre-exemples. Il n'y a pas de "règles" établies en webdesign en dehors des normes de langage à respecter. Du coup, c'est plus du cas par cas et une question de goût.
Pour ma part, je suis en période "fond clair".
Et les autres couleurs, me direz-vous ? Il faut définir laquelle est la principale donc la plus présente sur le site (en dehors de la couleur de fond). Vous devez établir une hiérarchie : laquelle pour les titres ? laquelle pour le texte ? une couleur particulière pour les liens ?
Généralement, on utilise une gradation pour les titres. h1 sera plus vif/foncé que h2, qui sera lui-même plus vif/foncé que h3, etc. (comme il existe une gradation de taille pour ces balises).
Evitez les couleurs trop agressives pour le texte. On a tous le souvenir d'un texte imprimé sur la rétine après avoir lu un moment un texte clair sur un fond foncé. C'est suffisamment désagréable pour ne pas l'imposer aux autres.
Mettre en relief un lien, un gras, un italique, n'est pas forcément une mauvaise idée du moment que c'est bien fait et que ça s'intègre à ce que vous imaginez.
Et voilà =D Fin de la partie 3 ! Elle a dû bien vous saouler avec tout ce qui est technique mais je considère que c'est nécessaire. Maintenant que vous avez compris quelques trucs, vous allez pouvoir utiliser CatchColor, un tout petit logiciel qui vous permet en un clic de retrouver la couleur que vous voyez à l'écran et d'en copier le code sous la forme que vous voulez =D
Liens
Un peu de lecture
Codage informatique des couleurs (français)
Pourpre.com (français) avec plein d'outils
Outils/Ressources
Instant Color Schemes (anglais)
Colour Lovers (français bêta)
A propos de Colour Lovers
Le site propose des palettes de couleurs, très pratiques. N'EN PRENEZ PAS TROP !!
Je suis aussi tombée dans le piège, hein, à prendre toutes celles qui me plaisaient, jusqu'à ce que je me retrouve avec des centaines de Mo de palettes et un embarras grandissant quand il fallait en choisir une... Il faut se restreindre. "L'excès est mauvais en toute chose." Si une palette est très proche d'une que vous avez déjà, ne la prenez pas ; c'est aussi simple que ça.
La prochaine fois, on apprendra des trucs sur le HTML.