Ce cours est visible gratuitement en ligne.

Got it!
Last updated on Tuesday, January 8, 2013

Les couleurs

Dans ce chapitre, comme vous l'avez compris, nous allons parler des couleurs. Mais attention, il ne s'agit pas ici de faire un petit passage en revue des couleurs, du genre "il y a trois couleurs primaires" (ce qui est faux, en plus ^^ ). Nous allons tenter d'aller plus loin, histoire d'élargir vos connaissances dans le domaine de l'infographie.

Toutes ces notions vous seront utiles tôt ou tard et, même si vous ne vous en servez pas, un infographiste qui comprend ce qu'il fait, c'est mieux qu'un infographiste qui "sait faire" tout court.
De plus, avoir des connaissances en matière de couleurs vous aidera dans le domaine de la retouche photographique, mais aussi du web design ! Les couleurs jouent un rôle très important dans l'habillage d'un site. Savoir mélanger les couleurs, utiliser les bons contrastes, ... est un plus non négligeable que l'étude des couleurs vous aidera à acquérir.

Même si ce chapitre est essentiellement théorique, ne vous inquiétez pas ! Tout sera expliqué pas à pas comme d'habitude pour ne perdre personne. :)

Comme ce chapitre est essentiellement théorique, vous retrouverez à la fin de chaque sous-partie un bref récapitulatif de ce qui a été dit. Si vous ne deviez retenir qu'une chose, ne retenez que ces synthèses.

Qu'est-ce qu'une couleur ?

Déjà, il faudrait peut-être commencer par définir ce qu'est une couleur, non ? Même si je me doute que vous savez ce que c'est, je suis certaine que vous ne seriez pas capable de sortir une définition précise pour ce terme.

J'ai tout prévu ! Voici une définition tirée de Wikpédia pour commencer le chapitre (je n'aurais pas non plus été capable de vous en donner une aussi complète :-° ):

Citation : Wikipédia

La couleur est la perception subjective qu'a l'œil d'une ou plusieurs fréquences d'ondes lumineuses, avec une (ou des) amplitude(s) donnée(s).

On distingue :

  • les couleurs pigmentaires, dites chimiques, car produites par la présence dans la matière de colorants ou de pigments (qui absorbent une partie de la lumière blanche et ne réfractent que certaines longueurs d'ondes)

  • les couleurs structurelles, dites physiques, provoquées par des phénomènes d'interférence liés à la structure microscopique de l'objet qui diffracte la lumière reçue. Les couleurs pigmentaires sont généralement instables, tandis que les couleurs structurelles sont pérennes et iridescentes.

Si vous n'avez pas compris toute la définition, c'est normal, elle est assez compliquée. Ce qu'il vous faut retenir, c'est que l'œil perçoit la couleur grâce à la lumière. En effet, si vous éteignez la lumière dans une pièce obscure, vous ne pouvez plus rien voir, juste "du noir". Nous ne pouvons pas voir des couleurs sans lumière.

Perception des couleurs

Nous avons vu que pour voir de la couleur, l'œil humain a besoin de lumière. Or, la lumière est elle aussi d'une couleur. Il s'agit du blanc. Contrairement à ce que l'on pourrait penser, en théorie, la lumière au naturel n'est pas jaune, elle est bel et bien blanche (ceci à nuancer cependant car cela peut varier dans la réalité, il s'agit ici de la théorie).
Si l'on décompose un rayon de lumière blanche, on obtient ce que l'on appelle un spectre lumineux, comportant toutes les couleurs visibles par l'œil.

Image utilisateur

Les couleurs du spectre de lumière vont du rouge au violet, en passant par divers tons comme le vert, l'indigo, l'orange ou le jaune. On obtient une sorte de dégradé regroupant toutes les couleurs de l'arc-en ciel. :)

En pratique, comment je peux voir toutes ces couleurs dans un seul rayon de lumière ?

Pour pouvoir voir toutes les couleurs que transporte un rayon lumineux, il faut décomposer ce rayon. Mais avant, je pense qu'un petit rappel sur le blanc et le noir s'impose. Retenez bien une chose: le blanc et le noir ne sont pas des couleurs:

  • Le noir représente l'absence de couleurs, c'est à dire que lorsqu'il n'y a plus de couleurs, il y a du noir. Voilà pourquoi lorsqu'une pièce est non éclairée et qu'il n'y a pas de couleurs, on voit "du noir".

  • Le blanc par contre représente toutes les couleurs réunies ! C'est un peu comme si on avait pris toutes les couleurs existantes et que l'on les avait mélangées entre elles.

Maintenant que vous savez cela, on peut en conclure que puisqu'un rayon lumineux est de couleur blanche, il est en réalité composé d'une infinité de couleurs mélangées pour former du blanc. :) Pour séparer ces couleurs, il existe une méthode simple: on fait passer ce rayon de lumière à travers un prisme (une figure géométrique qui dans notre cas peut être en cristal. Ne vous en préoccupez pas trop, c'est juste pour l'explication).

Image utilisateur

© lumiere-spectacle.org

Ce phénomène est visible à l'état naturel. C'est ce que l'on appelle un arc-en-ciel. Dans la nature, la lumière provient du soleil et une simple goutte d'eau peut faire office de prisme. Si la lumière traverse la goutte d'eau, elle va se décomposer et laisser apparaitre le spectre lumineux qui sera visible dans le ciel. :)

Tout ceci est assez théorique. Nous allons nous arrêter là. Ce que nous venons de voir constitue une bonne base pour appréhender les modes colorimétriques qui sont au programme pour la suite.

À la découverte du mode RVB

Maintenant que vous êtes plus à l'aise avec les notions relatives aux couleurs, nous allons parler des modes colorimétriques que vous serez amenés à rencontrer.
Avant que vous ne me posiez la question, les modes nous permettent, en quelque sorte, de "voir de manière différente une même couleur" et même par la suite, une même image.

Même notre œil utilise un mode colorimétrique: il s'agit du mode RVB, aussi surprenant que cela puisse paraître. ^^ Aussi, je vais vous demander de prendre les informations vues plus haut avec des pincettes. Il était sous entendu que je parlais du point de vue de l'oeil humain et donc du mode RVB (attention, il ne faut pas croire non plus que l'oeil fonctionne exactement comme le mode RVB).

Mode RVB

C'est le mode utilisé par votre ordinateur pour afficher des couleurs. D'ailleurs, l'œil humain voit aussi en mode RVB, comme je viens de vous le dire. Il peut être considéré un peu comme un "mode par défaut" ou "naturel".

Et RVB ça veut dire quoi ?

RVB signifie RougeVertBleu (vous pouvez aussi rencontrer son cousin anglais du nom de RGB pour RedGreenBlue).
En effet, l'ordinateur utilise ces trois couleurs pour afficher toutes les autres couleurs, soit pas moins de 16 millions de couleurs !

C'est le mode que je vous recommande pour la majorité de vos travaux car c'est, à mon avis, le plus souple.
Voici un petit schéma qui résume bien comment ce mode gère les couleurs:

Image utilisateur

Le rouge, le vert et le bleu sont appelés des couleurs primaires. Les autres, à savoir le cyan, le magenta et le jaune sont des couleurs dites secondaires.
Le blanc, au centre, est issu de l'ajout de toutes les couleurs.

Le mode RVB se révèle être très pratique et adapté à toute création sur support informatique. Étant donné qu'il gère plus de 16 millions de couleur, il est idéal pour vos photos.
Il permet une grande souplesse et une grande liberté. :)

En résumé ...

  • Le mode RVB définit les couleurs en leur attribuant une certaine quantité de rouge, de vert et de bleu.

  • Ses couleurs primaires sont le rouge, le vert et le bleu (d'où le nom).

  • C'est le mode associé à la lumière, donc il est "utilisé" par votre écran ainsi que vos yeux.

Autres modes courants

Vous savez, il n'y a pas que le mode RVB qui permet de gérer les couleurs sur ordinateur (et imprimante). Nous allons voir les autres modes les plus courants que vous risquez de rencontrer en dehors du mode RVB et dont vous risquez de vous servir tôt ou tard. :)

Mode CMJN pour l'impression

C'est le mode utilisé lors de l'impression.
CMJN signifie CyanMagentaJaune Noir.

Comme tout à l'heure, voici un schéma pour vous aider à comprendre comment ce mode gère les couleurs:

Image utilisateur

Cette fois, les couleurs sont inversées. Les couleurs dites primaires sont devenues secondaires et les couleurs secondaires sont devenues primaires !
Au centre, on n'a plus du blanc mais du noir, qui est associé à l'absence de couleurs.

Je ne comprends pas pourquoi on rajoute le noir dans CMJN ? Ça ne devrait pas plutôt être CMJ ?

Bonne question. Le mode CMJN étant destiné à l'impression, on s'est aperçu que pour imprimer du noir en suivant la technique consistant à mélanger toutes les couleurs, on obtenait une espèce de gris foncé et pas du noir.
Pour palier à ce problème, on a décidé de rajouter directement de l'encre noire, et de ne plus s'embêter à mélanger toutes les couleurs.
De plus, utiliser de l'encre noire indépendamment des autres couleurs permet de réduire le coup de l'impression: faire appel à trois couleurs pour obtenir du noir, c'est plus cher que d'avoir une encre noire prévue à cet effet.
C'est ce qu'on appelle une impression en quadrichromie. :)

Le schéma du haut est donc incomplet ! Et oui, si le noir est une couleur primaire de ce mode, il doit se retrouver aux côtés des autres couleurs primaires et non plus au milieu. Le schéma final est donc celui-ci:

Image utilisateur

Je vous recommande donc de passer vos images à imprimer en mode CMJN, pour une meilleure qualité d'impression.
Normalement, la conversion se fait automatiquement. Toutefois, les professionnels le font manuellement car il peut y avoir une perte de qualité lors de la conversion automatique.

Mode couleurs indexées

Le mode Couleurs indexées est un mode que je trouve assez limité, étant donné qu'il ne supporte qu'une palette de 256 couleurs. Je vous le présente toutefois pour que vous sachiez que ça existe, et au cas où vous en auriez besoin.
Il allège considérablement le poids des images, donc il se peut que vous ayez à l'utiliser sur le Web s'il vous faut des images légères.
Le format GIF est le seul format courant qui travaille en mode Couleurs indexées.

Voici un exemple de Wilber en mode Couleurs indexées.

Image utilisateur

On est bien loin du Wilber "tout lisse" que nous connaissons. :lol: Vous pouvez voir que les contours sont "en escaliers", les pixels sont notables ainsi que les dégradés qu'il y avait. Le résultat est très passable et c'est pourquoi dans la pratique, on n'utilisera pas le mode Couleurs Indexées très souvent.
On obtient le même résultat avec des dégradés ou des photos. Des "décalages" de couleurs sont visibles (surtout avec les photos).

Mode Niveaux de gris

Le mode Niveaux de gris est assez particulier car il ne gère pas la couleur. Il supporte juste une palette allant du noir au blanc, en passant par divers tons de gris.
Pas la peine de s'étendre sur ce mode, je pense que vous avez compris.

Je vous conseille de d'abord travailler en mode RVB, puis de passer votre image en mode Niveaux de gris. C'est quand même plus pratique, après à vous de voir.
Tout comme pour le mode Couleurs indexées, il est assez limité car il ne supporte aucune couleur. Cependant, il peut être intéressant si vous recherchez un effet "Noir & Blanc". ^^

Pour reprendre l'exemple avec Wilber, il donne ceci en mode Niveaux de gris:

Image utilisateur

Wilber a perdu ses couleurs !

Changer de mode colorimétrique dans GIMP

Pour changer de mode colorimétrique, rendez-vous dans Image > Mode et choisissez le mode qui vous convient. :)

En résumé ...

  • On choisit le mode RVB pour tous les types d'images (logos, photos, ...). C'est le mode par défaut et il adapté à tous les travaux.

  • Pour les images destinées à l'impression, il est préférable de les passer en mode CMJN pour une meilleure qualité d'impression.

  • Les images comportant très peu de couleurs peuvent utiliser le mode Couleurs indexées qui ne gère qu'une palette de 256 couleurs (que l'on peut tout de même paramétrer). Ce mode est à proscrire sur les dégradés ou les photos.

  • Pour avoir une image en noir et blanc, vous pouvez utiliser le mode Niveaux de gris.

Voilà, nous en avons terminé avec les modes colorimétriques. :)

Sélectionner une couleur: méthode avancée

Vous vous souvenez de la fenêtre des couleurs dont je vous avais parlé ? Vous savez, la fenêtre qui permettait de sélectionner n'importe quelle couleur, de la plus claire à la plus foncée en passant par diverses teintes ?
Nous allons la voir maintenant plus en détails car elle a plus d'un tour dans son sac ! Nous n'avons pas tout vu et elle est plus riche en fonctionnalités que ce qu'il parait aux premier abords.

Notation des couleurs

Avant de s'intéresser directement à la fenêtre des couleurs, nous allons apprendre à nommer une couleur. Non, il ne s'agit pas ici de dire "c'est du vert, c'est du rouge...". Je suppose que tout le monde connait ses couleurs. L'ordinateur lui, n'emploie pas la même méthode que vous pour nommer des couleurs et les reconnaitre.

Je m'explique. Vous savez déjà que votre écran peut afficher 16 millions de couleur en mode RVB. Oui mais voilà, comment savoir comment s'appelle chaque couleur ?
Et bien c'est simple, on a donné des noms un peu particuliers aux couleurs, que nous allons voir maintenant. ;)

Notation RVB

"Notation RVB" ? Ça a quelque chose à voir avec le mode RVB ?

Et bien oui ! Vous allez voir que ces deux notions sont étroitement liées.

La notation RVB permet de donner un nom à chaque nuance de couleurs disponibles dans le mode RVB.
Pour vous aider à comprendre, laissez moi vous ressortir le schéma montrant comment le mode RVB génère des couleurs:

Image utilisateur

Les trois couleurs primaires (pour rappel: le rouge, le vert et le bleu) vont servir à définir toutes les autres couleurs.
Chaque couleur contient un degré d'intensité de rouge, un degré d'intensité de vert et un degré d'intensité de bleu, c'est à dire que si vous mélangez une certaine quantité de rouge, une certaine quantité de vert et une certaine quantité de bleu, vous obtiendrez votre couleur.
Cette quantité de couleur se mesure entre 0 et 255.

Par exemple, une couleur x pourrait avoir comme valeurs de quantité:

  • rouge: 152;

  • vert: 56;

  • bleu: 214.

Il s'agit en fait, d'un violet vif.

Vous voyez, ce n'est pas compliqué. :) Il suffit d'indiquer vos quantité de rouge, vert et bleu et vous avez une couleur toute prête.

Notation CMJN

Comme vous vous en doutez, cette notation est liée au mode CMJN.
Revoici le schéma pour le mode CMJN, histoire de vous le remettre en tête:

Image utilisateur

Comme pour la notation RVB, vous allez devoir indiquer la quantité de cyan, de magenta, de jaune et de noir qui composent votre couleur.

Par contre, cette quantité se mesure de 0 à 100 et son unité est le % .

Prenons un autre exemple, pour une autre couleur y qui pourrait avoir comme valeurs:

  • cyan: 29 % ;

  • magenta: 0 % ;

  • jaune: 44 % ;

  • noir: 4 %.

Cette fois-ci, on obtient un petit vert clair. ^^

C'est possible d'avoir une quantité égale à zéro ? :o

Oui tout à fait. D'ailleurs, si vous avez bien suivi, vous n'aurez pas de mal à comprendre ces valeurs:

Cyan

Magenta

Jaune

Noir

C: 100%
M: 0%
J: 0%
N: 0%

C: 0%
M: 100%
J: 0%
N: 0%

C: 0%
M: 0%
J: 100%
N: 0%

C: 0%
M: 0%
J: 0%
N: 100%

Ces couleurs étant les couleurs primaires du mode CMJN, elles sont "pures" et ne sont pas mélangées aux autres couleurs.

Notation hexadécimale

Voici une autre méthode de noter une couleur. Cette méthode utilise encore le mode RVB (vous allez voir, on le retrouve partout celui-la :p ).

Cette fois-ci, pour noter notre couleur, on utilise un code hexadécimal. Ce code utilise les chiffres de 0 à 9 et les lettres de A à F précédées d'un dièse (#).
Un code hexadécimal est toujours constitué d'un dièse suivi de 6 lettres ou chiffres.

Ne vous inquiétez pas, vous n'aurez pas à le trouver tout seul, GIMP vous le donnera tout prêt. ;)
Pour le lien avec le mode RVB, les deux premiers chiffres ou lettre indiquent une quantité de rouge, les deux suivants une quantité de vert et les deux derniers, une quantité de bleu.

Voici par exemple le code hexadécimal d'un orange vif: #F68B23.

Vous êtes désormais prêt(e)s à découvrir l'outil de sélection de couleurs de GIMP.

Aller plus loin avec la fenêtre des couleurs

Nous allons maintenant voir comment sélectionner une couleur dans la fenêtre des couleurs en passant par ces diverses notations ! :)

Petit rappel: pour ouvrir la fameuse fenêtre des couleurs, il faut cliquer sur l'icône représentant la couleur de premier plan, à savoir le grand premier carré:

Image utilisateur

Lorsque vous cliquez sur le carré de la couleur de premier plan, une fenêtre comme celle-là apparait:

Image utilisateur

Il s'agit de la fameuse fenêtre des couleurs que nous avons déjà un peu étudié auparavant. Nous ne nous étions concentré que sur la manière de sélectionner une couleur graphiquement. On utilisait le grand carré au centre avec le rectangle "arc-en-ciel" à côté pour sélectionner une couleur.
En pratique, on peut passer par la méthode "graphique", mais on peut utiliser aussi les différentes notations que nous avons vu.
Si par exemple, je veux que vous retrouviez la même couleur que moi, au lieu de vous laisser le faire "au feeling" avec la méthode graphique, je vais vous donner l'une de ses notations que vous rentrerez dans la fenêtre des couleurs. Celle-ci s'occupera de sélectionner la couleur correspondante automatiquement. On sera alors certains de travailler sur la même couleur. :)

Sélectionner une couleur ...

... avec les valeurs RVB

Nous allons de suite mettre en pratique ce que nous avons vu plus haut.
Vous pouvez sélectionner une couleur si vous connaissez ses valeurs RVB.

Rentrez simplement les valeurs ici, à côté des trois dernières réglettes:

Image utilisateur

La lettre devant chacune d'elles vous indique de qu'elle réglette il s'agit (rouge, vert ou bleu).
Rentrez la quantité de rouge dans la case en face de la première réglette, la quantité de vert dans la seconde case et la quantité de bleu dans la troisième case. N'oubliez pas que vous ne pouvez pas rentrer une valeur supérieure à 255 !

Facile, hein ? ;)

... avec les valeurs CMJN

Vous pouvez aussi choisir votre couleur en fonction de ses valeurs CMJN.
Cliquez sur l'icône en forme d'imprimante:

Image utilisateur

Vous n'avez plus qu'à rentrer les valeurs à côté des réglettes correspondantes.

Image utilisateur
... avec la notation hexadécimale

Si vous le connaissez déjà, vous pouvez rentrer le code hexadécimal ici:

Image utilisateur

Pourquoi il y a écrit "notation HTML" et pas "notation hexadécimale" comme tu nous l'avais appris ?

Et bien il se trouve que les deux noms conviennent. Figurez-vous qu'on se sert énormément de la notation hexadécimale dans le web design, pour définir par exemple la couleur de tel ou tel texte.
Et pour créer un site web, on utilise deux langages connus sous le nom de (X)HTML et CSS (il en existe beaucoup d'autres, se sont juste les langages de base).
Voilà d'où vient cette appellation. ^^

... avec l'historique des couleurs

Lorsque vous sélectionnez une couleur, celle-ci s'enregistre automatiquement dans l'historique des couleurs. Cet historique est constitué de 12 couleurs et se remplit au fur et à mesure que des nouvelles couleurs sont sélectionnées et efface les anciennes couleurs. Ainsi, vous pouvez retrouver facilement une couleur sélectionnée précédemment.

Image utilisateur
... avec l'outil pipette

Vous vous souvenez de l'outil Pipette dont je vous avez parlé ? Vous pouvez toujours vous en servir pour sélectionner une couleur. Son icône est même disponible dans la fenêtre des couleurs.

Image utilisateur

Je ne vais pas revenir sur son fonctionnement, nous avons déjà vu qu'il fallait l'utiliser pour absorber une couleur présente dans l'image en ciblant une zone.

N'oubliez pas que nous n'avons pas exploré toute la fenêtre des couleurs. Il existe encore d'autres façons de faire. Il reste des onglets que nous n'avons pas explorés qui vous proposent d'autres palettes pour sélectionner une couleur graphiquement.
Je vous laisse le soin de les découvrir par vous même, ce sera toujours plus intéressant que si je vous écrit un pavé sur toutes les palettes et toutes les fonctionnalités de la fenêtre des couleurs. ^^
Il me paraissait important cependant de vous montrer ces quelques méthodes car elles vous seront utiles tôt ou tard, par exemple dans le domaine du web design.

En résumé:

  • Chaque mode permet de définir précisément une quantité de chaque couleur primaire (en fonction du mode) pour chaque couleur.

  • Dans le cas du mode RVB, celle quantité se mesure de 0 à 255.

  • Dans le cas du mode CMJN, elle se mesure de 0 à 100%.

  • La notation hexadécimale donne un code unique pour chaque couleur, constitué d'un dièse suivi de 6 lettres ou chiffres.

Ce chapitre vous a permis d'acquérir de nouvelles connaissances en matière de couleurs, du moins je l'espère. Tôt ou tard ces notions vous resservirons quelques part, donc ce n'est pas du temps perdu. De plus, un peu de culture générale n'a jamais fait de mal à personne. ;)

Ce tutoriel n'est pas terminé. Il est en cours de rédaction. Vous pouvez venir faire un tour de temps en temps pour voir s'il y a de nouveaux chapitres. :)

Remerciements

  • Marie, pour ses commentaires ;

  • MitMat, pour son soutien et ses encouragements permanents ;

  • SimSonic, pour tout son travail pendant la validation et ses conseils ;

  • Photo-libre, pour ses nombreuses images qui m'ont permis d'illustrer le cours.

Merci à vous tous !

N'hésitez pas à laisser des commentaires (constructifs si possible) et votre avis sur le tutoriel ou vos suggestions. Ils me permettront d'améliorer au mieux le cours.
Bon GIMP ! :D

Example of certificate of achievement
Example of certificate of achievement