Graphisme & web [Plan] > Couleur

g-w


Couleur : notion et utilisation, limitationsCouleurs Mondrian

Les composantes de la couleur

Les objets n’ont pas de couleur. Ils ont la propriété d’absorber ou de réfléchir les rayons lumineux. Une pomme rouge absorbe toute une gamme de radiations lumineuses, sauf celles situées dans une bande du spectre entre le magenta et le jaune.

Newton a découvert, en 1669, qu’une lumière blanche qui traverse un prisme se disperse et se décompose selon les couleurs de l’arc-en-ciel.
On rappelle que les longueurs d’onde du spectre visible sont comprises entre 380 nm (violet) et 780 nm (rouge).

Prisme

Prisme et ondes lumineuses

 

La vision

Notre œil est un organe complexe. La lumiè̀re qui provient d’un objet que l’on observe va pé́né́trer notre œil par la pupille et exciter les cellules nerveuses qui tapissent la ré́tine, au fond de l’œil.

La ré́tine est notamment composé́e de deux types de cellules : cônes et bâtonnets.

Les cônes, au centre de la rétine (la fovéa), permettent la vision chromatique (perception des couleurs).

Les bâtonnets sont des cellules sensibles à l’intensité lumineuse : ils traduisent pour notre cerveau le degré de luminosité d’une lumière et ils facilitent la distinction de formes.

La couleur n’est pas une propriété physique, mais le résultat d’une perception.
Le nom d’une couleur n’a que le rôle sémantique de désigner une perception humaine. Cette perception est sujette à de légères variations en fonction des individus, notamment à cause des facteurs biologiques et psychologiques intervenant dans l’évaluation.
On considère néanmoins que les couleurs rouges, vert et bleu correspondent aux longueurs d’onde suivantes

La sensibilité de l’œil dépend de :

Le daltonisme est une anomalie de la vision où un ou plusieurs types de cônes sont déficients.
Des tests, par exemple le test d’Ishihara, permettent le diagnostique du daltonisme.
Ainsi, le daltonisme touche environ 8 % d’hommes et 0,4 % de femmes.

Ishihara planche 8 Ishihara planche 11

Les daltoniens restent sensibles à la clarté.


La couleur ne doit donc être qu’un moyen supplémentaire de mise en évidence d’objets ou d’informations.
Il ne faut pas s’appuyer que sur ce moyen de présentation.
 

Illusions d'optique

Quelles valeurs de gris ont les cases A et B ?

Illustion sur les gris


Les codages de couleur

Dans la pratique, nous utiliserons différents codages suivant les domaines d’application.

On considère deux synthèses.

La synthèse additive :

Synthèse additive

En synthèse additive, les lumières colorées sont généralement utilisées au nombre de trois : le rouge, le vert et le bleu (RVB ou RGB).

Ces couleurs secondaires constituent les couleurs primaires de la synthèse soustractive utilisée en imprimerie.

La synthèse soustractive :

Synthèse soustractive

En synthèse soustractive, les couleurs primaires généralement utilisées sont au nombre de trois : le cyan, le jaune et le magenta.

Le codage TSL ou HSV

HSV, pour Hue, Saturation, Value, (soit TSL, pour Teinte, Saturation, Luminosité) correspond bien à la façon dont l’être humain perçoit la couleur.

Systèle TSL

Voici les paramètres du codage HSV :

 

Le codage RVB ou RGB

RVB pour Rouge, Vert, Bleu, ou RGB in english est adapté aux couleurs affichées sur un écran.

Ce codage indique la proportion de lumières rouge, vert et bleu projetées.

Une couleur, addition de trois couleurs primaires, résulte d’une synthèse additive.

Le codage CMYK

CMYK pour Cyan, Magenta, Yellow & Black, est le codage préféré des imprimeurs qui réalisent une synthèse soustractive par un mélange d’encres cyan, magenta, jaune et noire.

Exemple de couleurs saturées

Tableau de couleurs

Codage des images

Le pixel, souvent abrégé px, est l'unité permettant de mesurer la définition d'une image numérique matricielle.

Une image est donc représentée par un tableau à deux dimensions dont chaque case est un pixel. Pour représenter informatiquement une image, il suffit donc de créer un tableau de pixels dont chaque case contient une valeur. La valeur stockée dans une case est codée sur un certain nombre de bits déterminant la couleur ou l'intensité du pixel, on l'appelle profondeur de codage (parfois profondeur de couleur).

Il existe plusieurs standards de codage d'images :

Bitmap noir et blanc

C'est un codage à 2 niveaux (image au trait).

0 => noir
1 => blanc

 

Bitmap à 256 niveaux de gris

Codage à 256 niveaux de gris par pixel.

00000000 = noir
11111111 = blanc
11110000 = gris (à 50 %)

 

« Couleurs vraies » (True color) ou « couleurs réelles »

Chaque pixel est représenté par un entier comportant les trois composantes RGB, chacune codée sur un octet, c'est-à-dire au total 24 bits (16 millions de couleurs).

Il est possible de rajouter une quatrième composante permettant d'ajouter une information de transparence ou de texture, chaque pixel est alors codé sur 32 bits.

Image en couleurs indexées - Palette de couleurs (colormap)

On définit une palette, ou table des couleurs, contenant l'ensemble des couleurs pouvant être contenues dans l'image, à chacune desquelles est associé un indice.

Le nombre de bits réservé au codage de chaque indice de la palette détermine le nombre de couleurs pouvant être utilisées.
Ainsi en codant les indices sur 8 bits il est possible de définir 256 couleurs utilisables ; chaque case du tableau à deux dimensions représentant l'image va contenir un nombre indiquant l'indice de la couleur à utiliser.

On appelle ainsi image en couleurs indexées une image dont les couleurs sont codées selon cette technique. La palette accompagne l'image.

GIF et PNG sont des formats d'image en couleurs indexées.

Couleurs en HTML et CSS

Triplet hexadécimal RVB

En HTML ou en CSS, une couleur est souvent notée en RVB avec un nombre hexadécimal à 6 chiffres, soit 3 octets, précédé du caractère "#" :

.six-chiffres { color: #FFCC66; } /* notation en hexadécimal à 6 chiffres */

On peut aussi utiliser une notation à 3 chiffres :

.trois-chiffres { color: #FC6; }     /* notation en hexadécimal à 3 chiffres */
.six-chiffres { color: #FFCC66; }  /* on double chaque chiffre pour obtenir la notation classique */

Nom de couleurs

Les 16 couleurs basiques sont :

140 noms sont utilisables. Voir https://www.w3schools.com/colors/colors_names.asp

Couleurs en CSS3

div {
   background-color: rgb(255, 204, 102);   /* soit #FFCC66;*/
}

div {
   background-color: hsl(40, 100%, 70%);   /* soit #FFCC66;*/
}

 

div {
   background-color: rgba(255, 204, 102, 0.5);  
}

Voir : La transparence de couleur avec RGBa en CSS3 sur alsacreations.com.

div {
   background-color: hsla(40, 100%, 70%, 0.5);   
}

Exemples de sélecteur

Sélection de couleurs HTML

JSColor : JavaScript color picker

 

Psychologie des couleurs

Evocation des couleurs

Phychologie des couleurs

La chaleur d’une couleur influence sa perception.

Les harmonies de couleurs

La roue chromatique nous aide à sélectionner des bons accords de couleurs.

Voir : http://colorschemedesigner.com/

Couleurs complémentaires

On choisit la couleur opposée sur la roue chromatique pour obtenir un fort contraste.

Couleur complémentaire

Combinaison analogue

On choisit deux couleurs proches d'une couleur donnée.

Combinaison triadique

On choisit trois couleurs en triangle sur la roue chromatique.

Combinaison complémentaire double

On choisit deux couples complémentaires sur la roue chromatique.

Recommandations

Liens