Color Theory and Samples

Cette page fait un usage intensif des canvas, il se peut donc qu'elle ne s'affiche pas correctement dans les navigateurs obsolètes.

Espace de couleur

Différence entre RGB, HSV, HSL. Et comment passer de l'un à l'autre.

En synthèse additive, toutes les couleurs peuvent être représentées grâce à trois couleurs primaires de base: le rouge, le vert et le bleu. Mais ce système est difficile à manipuler pour éclaicir ou assombrir une couleur quelconque. C'est pourquoi d'autre représentations basées sur la teinte ont vu le jour.

Pour des explications plus détaillées http://en.wikipedia.org/wiki/HSL_and_HSV.

Calcul de la teinte

La teinte est représentée par un angle sur le cercle des couleurs. Pour les modèle HSL et HSV le calcul est le même.
On calcul d'abord le maximum et le minimum des composantes RGB, puis leur différence nommé Chroma qui représente la quantité de couleur. Si chroma est nul, alors la couleur RGB de départ était un gris et il n'est pas possible de calculer une teinte.
Les teintes sont disposées suivant un cercle : Rouge (0°), Jaune (60°), Vert (120°) , Cyan (180°), Bleu (240°), Magenta (300°).

	-- r,g,b dans [0 1], H dans [0 360], H est la teinte --
	Max = max(r,g,b), min = min(r,g,b), 
	Chroma = Max - min
	Si Max == min	Alors H = 0
	Si Max == r	Alors H = ( 60 * (g - b)/Chroma + 360°) modulo 360° 
	Si Max == g	Alors H = ( 60 * (b - r)/Chroma + 120°) 
	Si Max == b	Alors H = ( 60 * (r - g)/Chroma + 240°) 

Le modèle HSV

La Valeur est la « brillance » de la couleur. Elle est définie comme la plus grande composante d'une couleur, notre Max ci-dessus. Cela revient à placer les couleurs primaires et secondaires (cyan, jaune, magenta) dans un même plan que le blanc.

• elle varie entre 0 et 100%,
• plus la valeur d'une couleur est faible, plus la couleur est sombre,
• une valeur de 0 correspond au noir, une valeur de 100% correspond a une couleur pure.

La Saturation est l'« intensité » de la couleur. Elle est définie comme étant le Chroma divisée par la Valeur. Un gris a donc une saturation égale à zéro.

• elle varie entre 0 et 100 %,
• plus la saturation d'une couleur est faible, plus l'image sera « grisée » et plus elle apparaitra fade,
• une valeur de 0% est un gris achromatique, une valeur de 100% correspond à une couleur pure.

On définit deux couleurs comme complémentaires si mélangées ensemble, elle produisent un gris.
Soit une couleur (h, s, v) dans l'espace de couleur TSV, il existe un complement (h', s', v') tel que quand (h, s, v) et (h', s', v') sont mélangées en proportions égales, la saturation de la couleur produite vaut 0. Alors,

	t' = t + 180° modulo 360°

	v' = v * (s - 1) + 1 

	s' = v * s / v'

voir http://en.wikipedia.org/wiki/HSL_and_HSV

Le modèle HSL

La Lumière est la luminosité (lightness). Elle est définie comme la moyenne de la plus grande et de la plus petite composante d'une couleur. Cela revient à placer les couleurs primaires et secondaire dans un plan à mi-chemin du blanc et du noir.  L = ( Max + min ) / 2 

• elle varie entre 0 et 100%,
• une valeur de 0 correspond au noir,
• une valeur de 50% correspond a une couleur,
• une valeur de 100% correspond au blanc.

La Saturation est le taux de pureté de la couleur. Comme dans le modèle HSV, elle s'obtient en divisant le Chroma de la couleur par la valeur maximum possible du Chroma pour cette couleur. Ici on calcule donc :  si L < 1/2, S = C / 2L sinon S = C / ( 2 - 2L ) .

• elle varie entre 0 et 100 %,
• 0 % correspond un gris achromatique,
• 100 % pour la couleur « pure ».

Ce modèle est à ne pas confondre avec le modèle HSV (ou HSB). En HSV, couleurs pures et blanc ont la même "valeur" ou "Brigthness", en HSL seul le blanc est à une lumière de 100%, cette notion de "Lightness" étant plus proche de la notion scientifique de luminance que ne l'est la composante "Brightness".

voir http://en.wikipedia.org/wiki/HSL_and_HSV

Calcul des composantes RGB à partir de HSV ou HSL

Pour retrouver les composantes RGB, il suffit de faire les calculs inverses:

• le Chroma est donné par: C = V * S ou C = (2 - 2L ) * S ou C = 2L * S,
• la valeur minimum est: min = V - C ou min = L - C/2,
• la teinte et le chroma permettent de retrouver les quantités de couleurs (voir ci-dessous)

	-- h dans [0 360], C dans [0 1] (chroma), min dans [0 1] --
	cadran = h / 60  -- correspond au 3 couleurs primaires et 3 couleurs secondaires

	X = C * ( 1 - abs(cadran % 2 - 1) ) -- % est l'opérateur modulo, 

	-- X correspond à un angle +/- 30° autour du cadran --

	Si h est indéfini alors R = min, G = min, B = min -- gris
	Si h < 1 Alors 	R = C + min, 	G = X + min, 	B = min
	Si h < 2 Alors 	R = X + min,	G = C + min, 	B = min
	Si h < 3 Alors 	R = min, 	G = C + min, 	B = X + min
	Si h < 4 Alors 	R = min, 	G = X + min, 	B = C + min
	Si h < 5 Alors 	R = X + min, 	G = min, 	B = C + min
	Si h < 6 Alors 	R = C + min, 	G = min, 	B = X + min

Le modèle YPrPb ou YUV et dérivés

Le signal YUV est créé depuis une source RGB (rouge, vert et bleu). Les valeurs de R, G et B sont additionnées selon leur poids relatif pour obtenir le signal Y. Ce dernier représente la luminance de la source. Le signal U ( ou Pb ) est obtenu en soustrayant le Y du signal bleu d'origine ; de façon similaire le V ( ou Pr ) est obtenu en soustrayant Y du signal rouge. Ces opérations peuvent facilement être réalisées au moyen d'un circuit analogique.

Cela permet de coder une image en noir et blanc et de lui ajouter 2 composantes chromatiques. En pratique on utilise deux constantes Kr et Kb pour effectuer tous les calculs. La norme ITU-R BT.601 définit Kr = 0.299, Kb= 0.114. En appliquant la même valeur Y au trois composantes R, G, B on obtient une image en noir et blanc.

	-- R, G, B, Y dans [0 1] -- Pb,Pr dans [-0.5  +0.5] --
	
	Y = Kr * R + ( 1 - Kr - Kb ) * G + Kb * B
	U = Pb = 0.5 * ( B - Y ) / ( 1 - Kb ) , ecart au bleu
	V = Pr = 0.5 * ( R - Y ) / ( 1 - Kr ) , ecart au rouge


	-- Calcul inverse --

	R = 2 * ( 1 - Kr ) * Pr + Y
	B = 2 * ( 1 - Kb ) * Pb + Y
	G = ( Y - Kr * R - Kb * B ) / ( 1 - Kr - Kb ) 

Différents système dérivés sont construits en appliquant un offset et un facteur d'échelle à ces valeurs, par exemple pour les normes MPEG2, JPEG, YDbDr, etc.

Norme	OffsetY	Echelle Y	Offset UV	Echelle UV	Formules
MPEG2	16	219	128	224	MPEG2 = offset 16, Ymax = 235, Pmax=240 Y' = 16 + 219 * Y Cb = 128 + 224 * Pb Cr = 128 + 224 * Pr
JPEG	0	255	128	255	JPEG = offset 0, Ymax = 255 , offsetC = 128, Pmax = 255 Y' = 255 * Y Cb = 128 + 255 * Pb Cr = 128 + 255 * Pr
YCC	offsetY	scaleY	offsetC	scaleC	Y' = offsetY + scaleY * Y Cb = offsetC + scaleC * Pb Cr = offsetC + scaleC * Cr

Pour retrouver les valeur R, G, B à partir de YCbCr il suffit de faire les transformations inverses:

	Y = ( Y' - offsetY ) / scaleY
	Pb = ( Cb - offsetC ) / scaleC
	Pr = ( Cr - offsetC ) / scaleC

	R = 2 * ( 1 - Kr ) * Pr + Y
	B = 2 * ( 1 - Kb ) * Pb + Y
	G = ( Y - Kr * R - Kb * B ) / ( 1 - Kr - Kb ) 

	--	R, G, B  dans [0 1]

voir http://en.wikipedia.org/wiki/YCbCr, http://discoverybiz.net/enu0/faq/faq_YUV_YCbCr_YPbPr.htm

Le modèle CIEL-Lab

Le système Lab est issu du CIE XYZ. Il essaye de prendre en compte la réponse logarithmique de l'oeil. Il possède le grand avantage d'être uniforme.

Une des difficultés majeures de ce système est qu'il utilise un système mixte de repérage des points de couleur. La saturation est mesurée de manière cartésienne, alors que la teinte et la luminosité sont mesurées de manière angulaire.

L'espace CIE XYZ est une étape intermédiaire obligée de la conversion. L'espace Lab est en effet défini par rapport à l'espace XYZ.

Lorsqu'il s'agit de travailler sur les couleurs d'une image, comme dans le cas d'une quantification, deux couleurs qui sont proches dans l'espace de couleur (au sens de la distance euclidienne le plus souvent), peuvent paraître assez différentes pour l'oeil, ce qui est le cas pour l'espace des couleurs RGB.

Par contre, dans l'espace LAB qui est uniforme, deux couleurs proches en distance le sont aussi pour l'oeil.

	-- Formules --
RGB vers XYZ ( matrice )
	X     0.618  0.177  0.205   R
	Y  =  0.299  0.587  0.114 * G 
	Z       0    0.056  0.944   B 
XYZ vers RGB ( matrice inverse )
	R     1.876 -0.533 -0.343   X
	G =  -0.967  1.998 -0.031 * Y 
	B     0.057 -0.118  1.061   Z

XYZ vers LAB -- Xn, Yn, Zn sont les valeurs pour R G B = ( 255, 255, 255 ) --
	L = 116 * f(Y/Yn) - 16
	a = 500 * [ f(X/Xn) - f(Y/Yn) ]
	b = 200 * [ f(Y/Yn) - f(Z/Zn) ]
avec 
	f(x) = racine cubique de x si x > (6/29) au cube
		 = 1/3 * (29/6)² * t + 4/29 sinon
	Xn,Yn,Zn coordonnées du Point Blanc par exemple D65 à 2° ( 0.3127, 0.3290, 0.3583 )
LAB vers XYZ
	f'(x) = x*x*x si x > (6/29) 
		  = ( x - 16 / 116) * 3 * (6/29)²
	Y' = (L-16) / 116	et	Y = Yn * f(Y')
	X' = Y' + a / 500	et	X = Xn * f(X')
	Z' = Y' - b / 200	et	Z = Zn * f(Z')		

Constantes utiles:
	6/29 = 0.20689655
	6/29^3 = 0.00885645
	4/29 = 0.137931
	1/3 * (29/6)² = d = 7.787037
	3 * (6/29)² = 1/d = 0.12841855

voir http://www.tsi.enst.fr/ ... /colorspace.html, http://en.wikipedia.org/wiki/Lab_color_space

Outils

Les outils sont construits sur un ensemble de fonctions permettant de manipuler les différents espaces de couleurs. La fonction rgb() permet de transformer une couleur CSS en objet {r,g,b}. Les autres fonctions permettent de réaliser les transformations de l'espace RGB vers leurs domaine respectifs et inversement.

rgb, yuv, hsv et hsl, xyz et lab,

Les outils sont basés sur les <canvas>, et sont liés entre eux via la gestion des évènnements.

• Color Picker: Sélection de couleurs dans une palette RGB et affichage de caractéristique de la couleur
• Color Blender : Pour faire des dédragés de couleurs
• Color Harmony: Pour trouver des couleurs harmonieuses
• Image Picker: Sélection de couleurs dans une image et affichage de caractéristique de la couleur
• Image Profile: Affichage de l'image en noir et blanc et profile de couleur, contraste, palette
• liste non exhaustive ...