begin process at 2012 05 28 13:11:25
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > CONVERTISSEUR DE RGB <-> TSL

CONVERTISSEUR DE RGB <-> TSL


 Information sur la source

 Description

Donc pour mon site, j'ai eu besoin d'un convertisseur Teinte, Saturation, Luminosité en Rouge, Vert, Bleu pour dynamiser les couleurs de mon interface et faciliter la sélection des couleurs a partir du spectre.

Ce script est le résultat de la transcription d'une partie d'un object pour gérer les couleurs en C++.

Les premiers commentaires vous permmettes de connaitre les intervales de valeurs valides. Les valeurs prises doivent être entières pour le bon fonctionnement.

Source

  • // JScript source code
  • //Red : 0..255
  • //Green : 0..255
  • //Blue : 0..255
  • //Hue : 0,0..360,0<=>0..255
  • //Lum : 0,0..1,0<=>0..255
  • //Sat : 0,0..1,0<=>0..255
  • //Retourne un tableau de 3 valeurs : H,S,L
  • function RGB2HSL (r, g, b)
  • {
  • red = Math.round (r);
  • green = Math.round (g);
  • blue = Math.round (b);
  • var minval = Math.min (red, Math.min (green, blue));
  • var maxval = Math.max (red, Math.max (green, blue));
  • var mdiff = maxval - minval + 0.0;
  • var msum = maxval + minval + 0.0;
  • var luminance = msum / 510.0;
  • var saturation;
  • var hue;
  • if (maxval == minval)
  • {
  • saturation = 0.0;
  • hue = 0.0;
  • }
  • else
  • {
  • var rnorm = (maxval - red) / mdiff;
  • var gnorm = (maxval - green) / mdiff;
  • var bnorm = (maxval - blue) / mdiff;
  • saturation = (luminance <= 0.5) ? (mdiff / msum) : (mdiff / (510.0 - msum));
  • if (red == maxval)
  • hue = 60.0 * (6.0 + bnorm - gnorm);
  • if (green == maxval)
  • hue = 60.0 * (2.0 + rnorm - bnorm);
  • if (blue == maxval)
  • hue = 60.0 * (4.0 + gnorm - rnorm);
  • if (hue > 360.0)
  • hue -= 360.0;
  • }
  • return new Array (Math.round (hue * 255.0 / 360.0), Math.round (saturation * 255.0), Math.round (luminance * 255.0));
  • }
  • function Magic (rm1, rm2, rh)
  • {
  • var retval = rm1;
  • if (rh > 360.0)
  • rh -= 360.0;
  • if (rh < 0.0)
  • rh += 360.0;
  • if (rh < 60.0)
  • retval = rm1 + (rm2 - rm1) * rh / 60.0;
  • else if (rh < 180.0)
  • retval = rm2;
  • else if (rh < 240.0)
  • retval = rm1 + (rm2 - rm1) * (240.0 - rh) / 60.0;
  • return Math.round (retval * 255);
  • }
  • //Retourne un tableau de 3 valeurs : R,G,B
  • function HSL2RGB (h, s, l)
  • {
  • var hue = h * 360.0 / 255.0;
  • var saturation = s / 255.0;
  • var luminance = l / 255.0;
  • var red;
  • var green;
  • var blue;
  • if (saturation == 0.0)
  • {
  • red = green = blue = Math.round (luminance * 255.0);
  • }
  • else
  • {
  • var rm1;
  • var rm2;
  • if (luminance <= 0.5)
  • rm2 = luminance + luminance * saturation;
  • else
  • rm2 = luminance + saturation - luminance * saturation;
  • rm1 = 2.0 * luminance - rm2;
  • red = Magic (rm1, rm2, hue + 120.0);
  • green = Magic (rm1, rm2, hue);
  • blue = Magic (rm1, rm2, hue - 120.0);
  • }
  • return new Array (red, green, blue);
  • }
// JScript source code
//Red : 0..255
//Green : 0..255
//Blue : 0..255
//Hue : 0,0..360,0<=>0..255
//Lum : 0,0..1,0<=>0..255
//Sat : 0,0..1,0<=>0..255

//Retourne un tableau de 3 valeurs : H,S,L
function RGB2HSL (r, g, b)
{
	red = Math.round (r);
	green = Math.round (g);
	blue = Math.round (b);
	var minval = Math.min (red, Math.min (green, blue));
	var maxval = Math.max (red, Math.max (green, blue));
	var mdiff = maxval - minval + 0.0;
	var msum = maxval + minval + 0.0;
	var luminance = msum / 510.0;
	var saturation;
	var hue;
	if (maxval == minval)
	{
		saturation = 0.0;
		hue = 0.0;
	}
	else
	{
		var rnorm = (maxval - red) / mdiff;
		var gnorm = (maxval - green) / mdiff;
		var bnorm = (maxval - blue) / mdiff;
		saturation = (luminance <= 0.5) ? (mdiff / msum) : (mdiff / (510.0 - msum));
		if (red == maxval)
			hue = 60.0 * (6.0 + bnorm - gnorm);
		if (green == maxval)
			hue = 60.0 * (2.0 + rnorm - bnorm);
		if (blue == maxval)
			hue = 60.0 * (4.0 + gnorm - rnorm);
		if (hue > 360.0)
			hue -= 360.0;
	}
	return new Array (Math.round (hue * 255.0 / 360.0), Math.round (saturation * 255.0), Math.round (luminance * 255.0));
}

function Magic (rm1, rm2, rh)
{
	var retval = rm1;
	if (rh > 360.0)
		rh -= 360.0;
	if (rh < 0.0)
		rh += 360.0;
	if (rh < 60.0)
		retval = rm1 + (rm2 - rm1) * rh / 60.0;
	else if (rh < 180.0)
		retval = rm2;
	else if (rh < 240.0)
		retval = rm1 + (rm2 - rm1) * (240.0 - rh) / 60.0;
	return Math.round (retval * 255);
}

//Retourne un tableau de 3 valeurs : R,G,B
function HSL2RGB (h, s, l)
{
	var hue = h * 360.0 / 255.0;
	var saturation = s / 255.0;
	var luminance = l / 255.0;
	var red;
	var green;
	var blue;
	if (saturation == 0.0)
	{
		red = green = blue = Math.round (luminance * 255.0);
	}
	else
	{
		var rm1;
		var rm2;
		if (luminance <= 0.5)
			rm2 = luminance + luminance * saturation;
		else
			rm2 = luminance + saturation - luminance * saturation;
		rm1 = 2.0 * luminance - rm2;
		red = Magic (rm1, rm2, hue + 120.0);
		green = Magic (rm1, rm2, hue);
		blue = Magic (rm1, rm2, hue - 120.0);
	}
	return new Array (red, green, blue);
}

 Conclusion

Je ferait ptet bientôt une mise à jours pour virer la convertion que je doit faire a chaque fois.
Sur ce, amusez vous bien :)


 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,515 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales