LA COULEUR

 

 

 

 

 

 

 

TEINTE SATURATION ET LUMINOSITÉ

 

Si vous avez déjà ouvert la fenêtre de sélecteur de couleur dans Photoshop ou Illustrator, vous avez dû voir que la teinte à l'écran s'utilise en combinaison avec une luminosité ainsi qu'une saturation. Le modèle TSL est fréquemment utilisé car c'est celui qui se rapproche le plus de la perception de l'oeil humain.

        

Dans cette fenêtre, la teinte sélectionnée correspond à la couleur d'arrière-plan de ce site. On la retrouve dans la palette de couleur.

 

 

LA TEINTE

Dans la première fenêtre, on peut voir à gauche une partie réservée au prélèvement de couleur, au centre une échelle verticale de Teinte et à droite les boutons de valeurs des Teintes, Saturations et Luminosités correspondant à la couleur actuellement sélectionnée. Celle-ci se trouve dans les tons verts. La couleur prélevée s'affiche dans les cases placées au dessus des boutons de valeurs TSL.

La teinte s'exprime en degrés sur la roue chromatique (de 0 à 360°) et est affichée à droite du bouton radio T.

Pour choisir une couleur, abaissez ou relevez le curseur de teintes. Vous allez voir la partie de droite et les cases de couleurs changer en fonction du niveau du curseur.

La teinte actuellement sélectionnée est représentée par le cercle affiché dans la partie gauche de la fenêtre. C'est au moyen d'un clic dans cette partie que vous prélevez un échantillon de couleur.

 

 

LA SATURATION



La saturation exprime la pureté d'une couleur. Plus une couleur est pure, moins elle comporte de gris. La saturation de la couleur s'exprime de 0% (gris) à 100% (pureté maximale). Elle est affichée en pourcentage, dans la case à droite du bouton radio S.

 

          

Dans la fenêtre de gauche, la saturation a été fixée à 0%. Visualisez le cercle de prélèvement de couleur. Le pourcentage de saturation s'affiche, dans la partie de gauche, suivant un axe horizontal.

À 0%, le cercle (couleur prélevée) se place donc au minimum de l'intensité de la couleur (vers le gris). C'est la désaturation donc l'absence de couleur.

Dans la fenêtre de droite, la saturation a été fixée à 100%. À 100%, le cercle (couleur sélectionnée) se place donc au maximum d'intensité de couleur (vert très pur).

 

 

LA LUMINOSITÉ


La luminosité exprime l'intensité lumineuse d'une couleur. Plus une couleur est lumineuse, moins elle comporte de noir. La luminosité de la couleur s'exprime de 0% (noir) à 100% (luminosité maximale). Elle est affichée en pourcentage dans la case à droite du bouton radio L.

 

          

Dans la fenêtre de gauche, la luminosité a été fixée à 0%. Le pourcentage de luminosité s'affiche, dans la partie de gauche, suivant un axe vertical.

À 0%, le cercle (couleur sélectionnée) se place donc au minimum de luminosité de la couleur (noir comme un pixel éteint).

Dans la fenêtre de droite, la luminosité a été fixée à 100%. À 100%, le cercle de prélèvement (couleur sélectionnée) se place donc au maximum de luminosité de couleur (couleur très claire).

 

 

SYNTHÈSE ADDITIVE

Le rouge, le vert et le bleu sont les couleurs qu'utilisent les luminophores de votre écran d'ordinateur pour constituer les pixels.
Ces trois couleurs (RVB) représentent les couleurs «primaires» dans la vidéo;

Si vous prenez ces trois couleurs et que vous les superposez, elles formeront à leur tour, le Cyan, le Magenta, le Jaune. Ce sont les couleurs complémentaires.

 

La combinaison du rouge et du vert forme le jaune.
La combinaison du vert et du bleu forme le cyan.
La combinaison du bleu et du rouge forme le magenta.

L'addition du rouge du vert et du bleu forme le blanc : C’est la synthèse additive des couleurs.

Le rouge, vert et bleu sont les couleurs de base de la lumière. On pourrait donc dire qu'un rayon de lumière, qui est constitué du rouge, du vert et du bleu, est égal au RVB (donc blanc).

 


SYNTHÈSE SOUSTRACTIVE


Dans le cas d'un dessin que vous avez effectué au moyen de pigments ou d'un travail destiné à être traité au moyen d'encres de couleurs (comme l'impression), vous devrez utiliser le mode CMJN. Ce mode de couleur représente:

- le cyan
- le magenta
- le jaune

Dans l'industrie graphique, on utilise le CMJN dans le procédé dit de «quadrichromie». Chaque document qui sera destiné à être imprimé devra être converti dans ce mode de couleur.



La combinaison du magenta et du jaune forme le rouge.
La combinaison du jaune et du cyan forme le vert.
La combinaison du cyan et du magenta forme le bleu.


La superposition du cyan du magenta et du jaune forme le noir (en fait, il s'agit d'un brun foncé, c'est pourquoi on ajoute le noir). C’est la synthèse soustractive des couleurs.

On pourrait donc dire que l'absence de lumière est égale au CMJ (donc noir).

Tous les spectres de couleurs ne sont pas identiques. En effet, votre œil perçoit un plus grand nombre de teintes qu’un imprimeur n’est capable d’en reproduire. La gamme de couleur RVB est plus importante que la gamme de couleur CMJN.
Attention aux pertes de couleurs en cas de passage d'un mode à l'autre !

 

COULEUR RVB VERS CMJN

 

Imaginons que vous soyez en palette de couleur CMJN et que vous souhaitiez obtenir un rouge. Cette teinte n'apparaît pas directement dans la palette de couleur.

Vous devez placer les deux palettes (RVB et CMNJ) l'une au-dessus de l'autre. Pour obtenir une couleur d'un mode à partir d'un autre, il faut sélectionner les teintes qui ne se font pas face:

Pour obtenir du rouge, poussez les valeurs du magenta et jaune. On a retiré le cyan qui fait face au rouge.
Pour obtenir du vert, poussez les valeurs du cyan et le jaune. On a retiré le magenta qui fait face au vert.
Pour obtenir du bleu, poussez les valeurs du cyan et le magenta. On a retiré le jaune qui fait face au bleu.


               

Et inversement, si vous vous trouvez avec une palette de RVB et que vous souhaitiez obtenir du:

Cyan, poussez les valeurs du vert et bleu. On a retiré le rouge qui fait face au cyan.
Magenta, poussez les valeurs du rouge et le bleu. On a retiré le vert qui fait face au magenta.
Jaune, poussez les valeurs du rouge et le vert. On a retiré le bleu qui fait face au jaune.

        

 

LE CODE HEXADÉCIMAL

Lorsque vous voyez une couleur commençant par le signe dièse (#) et comprenant six lettres et/ou chiffres, vous avez devant vous un code hexadécimal.

Exemple: #DFEF9F (couleur d'arrière-plan du site)

Ce type de représentation permet à l'ordinateur de coder une couleur. En effet, vous savez ce à quoi correspond la couleur rouge, mais l'ordinateur lui ne saisira pas ce mot. C'est pourquoi la base hexadécimale a été créée.

La base hexadécimale se compose de ces dix premiers chiffres puis de ces six premières lettres (base 16) :

0,1,2,3,4,5,6,7,8,9 et A,B,C,D,E,F

On pourrait dire que cette suite de chiffres et de lettres compose "l'alphabet hexadécimal". Cet alphabet commence par la valeur 0 (valeur minimale de la couleur) et fini par la valeur F (valeur maximale de la couleur).

0,1,2............jusqu'à................255 (F)

Un code hexadécimal est représenté par trois paires définissant le Rouge, le Vert et le Bleu (mode RVB).

                    


La première paire représente une valeur de rouge, la seconde paire de vert et enfin la troisième paire, une valeur de bleu. Dans un code hexadécimal, il y a donc mélange des trois couleurs.

Prenons le code # FF 00 00          

Nous allons commencer par mettre de côté le dièse qui restera une constante de codage hexadécimal. Si on décompose ce code en trois paires, il nous reste FF (rouge), 00 (vert), 00 (bleu). Si on regarde notre alphabet, on peut dire que les valeurs de rouge FF sont placées en fin de série.

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

On sait que le F correspond à la valeur maximale d'une couleur. L'intensité de rouge maximum. Dans ce code, comme les valeurs vertes et bleus sont nulles (00 et 00), on sait que ce code n'est composé que de rouge.

Dans Photoshop, effectuez un clic sur la case de couleur de premier plan. La fenêtre de sélecteur s'affiche. Vous pouvez voir la case hexadécimale en bas de la fenêtre:

On voit qu'en donnant une valeur de 255 dans la case de Rouge, et des valeurs nulles dans le Vert et Bleu, la case hexadécimale
# s'adapte en inscrivant le code correspondant: FF0000.

Ci-dessous, un tableau montrant certaines teintes rouges (AA0000 jusqu'à FF0000) et leurs correspondances en hexadécimal et RVB.

Couleur

Code
hexadécimal

AA 00 00 

BB 00 00

CC 00 00

DD 00 00

EE 00 00

FF 00 00

Correspondance RVB

R:170

V:0

B:0

R:187

V:0

B:0

R:204

V:0

B:0

R:221

V:0

B:0

R:238

V:0

B:0

R:255

V:0

B:0

On peut constater que plus le code hexa s'approche du FF plus les rouges sont lumineux.

Mais les codes hexadécimaux ne sont pas composés que d'une seule couleur...

 

Mélange RVB hexadécimal


Chaque couleur hexadécimale comporte du rouge, vert et bleu et peut avoir de 0 à 255 (F) nuances possibles (du pixel éteint jusqu'à sa valeur maximale). En hexadécimale cette échelle débute à 0 et finie à F. Chacune des paires peut donc être composée de peu de couleur (0 dans notre alphabet) ou de beaucoup de couleur (F dans l'alphabet):

0,1,2,3,4,5,6,7,8,9, A,B,C,D,E,F

Nous savons qu'un code hexa est basé sur le RVB. Comme nous l'avons vu plus haut dans ce cours (voir correspondance RVC vers CMNJ), nous savons que :

- Le mélange du Rouge et du Vert forme le Jaune.
- Le mélange du Rouge et du bleu forme le Magenta.
- Le mélange du Vert et du bleu forme le Cyan.


Prenons le code D2 A2 F0

La première remarque que l'on peut faire sur ce code, c'est que chaque paire débute par une lettre. Ceci est important car il nous permet de simplifier le code hexadécimal.

Imaginons que vous deviez deviner l'âge d'une personne. Vous lui donnez "aux alentours de 35 ans". Il serait peu important que le second chiffre soit 5 ou 2. Cette personne serait "dans la trentaine". On peut donc dire que ce second chiffre est "relatif" mais moins important que celui des dizaines.
Par contre, si vous lui donniez la quarantaine, cela ferait une plus grande différence...

Il en va de même pour le code hexadécimal. On pourrait simplifier ce code en retirant le second chiffre qui nous apporte peu d'informations: le code résultant serait alors non plus D2 A2 F0 mais D2 A2 F0.


D = Rouge
A=Vert
F=Bleu

Regardons à présent les différentes valeurs et leurs places dans l'alphabet:

Le D y apparaît en fin donc il y a beaucoup de rouge dans le code.
Le A apparaît en milieu donc il y a moyennement de vert dans le code.
Le F apparaît en fin donc il y a un maximum de bleu dans le code.

Les teintes qui sont dominantes dans ce code sont le rouge (D2) et le bleu (F0). On sait donc qu'en mélangeant ces deux teintes, nous obtenons une couleur magenta:

           Les valeurs RVB dans le sélecteur de couleur de Photoshop.

L'ajout ensuite de la valeur de vert (A2) permet d'obtenir cette teinte:

          Les valeurs RVB dans le sélecteur de couleur de Photoshop.

 

 

TABLEAU DE VALEURS HEXADÉCIMALES

Vous pouvez trouver ci-dessous un tableau représentant 216 couleurs utilisées sur le Web et leur code hexadécimal.

 

#000000

 

#003300

 

#006600

 

#009900

 

#00CC00

 

#00FF00

 

#000033

 

#003333

 

#006633

 

#009933

 

#00CC33

 

#00FF33

 

#000066

 

#003366

 

#006666

 

#009966

 

#00CC66

 

#00FF66

 

#000099

 

#003399

 

#006699

 

#009999

 

#00CC99

 

#00FF99

 

#0000CC

 

#0033CC

 

#0066CC

 

#0099CC

 

#00CCCC

 

#00FFCC

 

#0000FF

 

#0033FF

 

#0066FF

 

#0099FF

 

#00CCFF

 

#00FFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

#330000

 

#333300

 

#336600

 

#339900

 

#33CC00

 

#33FF00

 

#330033

 

#333333

 

#336633

 

#339933

 

#33CC33

 

#33FF33

 

#330066

 

#333366

 

#336666

 

#339966

 

#33CC66

 

#33FF66

 

#330099

 

#333399

 

#336699

 

#339999

 

#33CC99

 

#33FF99

 

#3300CC

 

#3333CC

 

#3366CC

 

#3399CC

 

#33CCCC

 

#33FFCC

 

#3300FF

 

#3333FF

 

#3366FF

 

#3399FF

 

#33CCFF

 

#33FFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

#660000

 

#663300

 

#666600

 

#669900

 

#66CC00

 

#66FF00

 

#660033

 

#663333

 

#666633

 

#669933

 

#66CC33

 

#66FF33

 

#660066

 

#663366

 

#666666

 

#669966

 

#66CC66

 

#66FF66

 

#660099

 

#663399

 

#666699

 

#669999

 

#66CC99

 

#66FF99

 

#6600CC

 

#6633CC

 

#6666CC

 

#6699CC

 

#66CCCC

 

#66FFCC

 

#6600FF

 

#6633FF

 

#6666FF

 

#6699FF

 

#66CCFF

 

#66FFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

#990000

 

#993300

 

#996600

 

#999900

 

#99CC00

 

#99FF00

 

#990033

 

#993333

 

#996633

 

#999933

 

#99CC33

 

#99FF33

 

#990066

 

#993366

 

#996666

 

#999966

 

#99CC66

 

#99FF66

 

#990099

 

#993399

 

#996699

 

#999999

 

#99CC99

 

#99FF99

 

#9900CC

 

#9933CC

 

#9966CC

 

#9999CC

 

#99CCCC

 

#99FFCC

 

#9900FF

 

#9933FF

 

#9966FF

 

#9999FF

 

#99CCFF

 

#99FFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

#CC0000

 

#CC3300

 

#CC6600

 

#CC9900

 

#CCCC00

 

#CCFF00

 

#CC0033

 

#CC3333

 

#CC6633

 

#CC9933

 

#CCCC33

 

#CCFF33

 

#CC0066

 

#CC3366

 

#CC6666

 

#CC9966

 

#CCCC66

 

#CCFF66

 

#CC0099

 

#CC3399

 

#CC6699

 

#CC9999

 

#CCCC99

 

#CCFF99

 

#CC00CC

 

#CC33CC

 

#CC66CC

 

#CC99CC

 

#CCCCCC

 

#CCFFCC

 

#CC00FF

 

#CC33FF

 

#CC66FF

 

#CC99FF

 

#CCCCFF

 

#CCFFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

#FF0000

 

#FF3300

 

#FF6600

 

#FF9900

 

#FFCC00

 

#FFFF00

 

#FF0033

 

#FF3333

 

#FF6633

 

#FF9933

 

#FFCC33

 

#FFFF33

 

#FF0066

 

#FF3366

 

#FF6666

 

#FF9966

 

#FFCC66

 

#FFFF66

 

#FF0099

 

#FF3399

 

#FF6699

 

#FF9999

 

#FFCC99

 

#FFFF99

 

#FF00CC

 

#FF33CC

 

#FF66CC

 

#FF99CC

 

#FFCCCC

 

#FFFFCC

 

#FF00FF

 

#FF33FF

 

#FF66FF

 

#FF99FF

 

#FFCCFF

 

#FFFFFF

 

 

 

 

 

 

 

 

 

 

 

 

 

 

retour au début de la page