Librairie de gestion des couleurs pour css : colorparser

Soyez le premier à donner votre avis sur cette source.

Vue 4 835 fois - Téléchargée 386 fois

Description

Ceci est une petite librairie qui reconnait tous les formats de couleurs possible jusqu'à CSS3.
Elle vous permettra de modifier une couleur existante ou d'en créer une nouvelle pour ensuite faire un sortie vers l'un des format gérer par CSS3.

Exemples :
var color = new colorParser(' 9acd32 ');
color.toName() // yellowgreen
color.toHex() // #9acd32
color.toString() // yellowgreen
color.toRGB() // rgb(154, 205, 50)
color.toRGBA() // rgba(154, 205, 50, 1)
color.toHSL() // hsl(80, 61%, 50%)
color.toHSLA() // hsla(80, 61%, 50%, 1)

// les fonction suivantes sont des getters et des setters, on peut leur passer un paramètre pour modifier la couleur.
color.red() // 154
color.green() // 205
color.blue() // 50
color.hue() // 79.74193548387098
color.saturation() // 0.607843137254902
color.lightness() // 0.5
color.alpha() // 1

// indique si la couleur parser est valid ou pas.
color.valid // true

Demo visible ici : http://www.coopmcs.com/demo/colorParser/colorParser.html
Demo visible ici : http://www.coopmcs.com/demo/colorParser/colorParser2.html
Demo color picker : http://www.coopmcs.com/demo/colorParser/colorPicker.html
Demo color picker facon AI : http://www.coopmcs.com/demo/colorParser/colorPickerAI.html

Cette librairie a été inspirée par http://www.phpied.com/rgb-color-parser-in-javascript/ a laquelle j'ai rajouté la gestion des HSL et du canal alpha.

Source / Exemple :


// valid color are :
//		hex color    Example : FFAB50 ou #FFAB52 ou F5F ou #F3F
//		rgb color    Example : rgb(0,255,0)
//		rgba color   Example : rgba(0,255,56,0.5)
//      rgb % color  Example : rgb(100%, 0%, 0%)
//		rgba % color Example : rgba(15%,10%,56%,0.5)
//		hsl color    Example : hsl(0, 100%, 50%)
//		hsla color   Example : hsla(120, 100%, 50%, 0.3)
//		named color  Example : lime

function colorParser(color) {

	this.valid = false;
	this.r     = 0; // red			0->255
	this.g     = 0; // green		0->255
	this.b     = 0; // blue			0->255
	this.h     = 0; // hue			0->360
	this.s     = 0; // saturation	0->1
	this.l     = 0; // lightness	0->1
	this.a     = 1; // alpha		0->1

	this.setHSLfromRGB = function () {
		var tmp = RGBtoHSL(this.r,this.g,this.b);
		this.h = tmp[0];		this.s = tmp[1];		this.l = tmp[2];
	}

	this.setRGBfromHSL = function () {
		var tmp = HSLtoRGB(this.h,this.s,this.l);
		this.r = tmp[0];		this.g = tmp[1];		this.b = tmp[2];
	}

	// clear and lower case the param
	color = color.replace(/ |#/g,'').toLowerCase();

	// liste des couleurs valident en HTML
	// get from http://www.phpied.com/rgb-color-parser-in-javascript/
	var named_colors = {aliceblue:'f0f8ff',antiquewhite:'faebd7',aqua:'00ffff',aquamarine:'7fffd4',azure:'f0ffff',beige:'f5f5dc',bisque:'ffe4c4',black:'000000',blanchedalmond:'ffebcd',blue:'0000ff',blueviolet:'8a2be2',brown:'a52a2a',burlywood:'deb887',cadetblue:'5f9ea0',chartreuse:'7fff00',chocolate:'d2691e',coral:'ff7f50',cornflowerblue:'6495ed',cornsilk:'fff8dc',crimson:'dc143c',cyan:'00ffff',darkblue:'00008b',darkcyan:'008b8b',darkgoldenrod:'b8860b',darkgray:'a9a9a9',darkgreen:'006400',darkkhaki:'bdb76b',darkmagenta:'8b008b',darkolivegreen:'556b2f',darkorange:'ff8c00',darkorchid:'9932cc',darkred:'8b0000',darksalmon:'e9967a',darkseagreen:'8fbc8f',darkslateblue:'483d8b',darkslategray:'2f4f4f',darkturquoise:'00ced1',darkviolet:'9400d3',deeppink:'ff1493',deepskyblue:'00bfff',dimgray:'696969',dodgerblue:'1e90ff',feldspar:'d19275',firebrick:'b22222',floralwhite:'fffaf0',forestgreen:'228b22',fuchsia:'ff00ff',gainsboro:'dcdcdc',ghostwhite:'f8f8ff',gold:'ffd700',goldenrod:'daa520',gray:'808080',green:'008000',greenyellow:'adff2f',honeydew:'f0fff0',hotpink:'ff69b4',indianred:'cd5c5c',indigo:'4b0082',ivory:'fffff0',khaki:'f0e68c',lavender:'e6e6fa',lavenderblush:'fff0f5',lawngreen:'7cfc00',lemonchiffon:'fffacd',lightblue:'add8e6',lightcoral:'f08080',lightcyan:'e0ffff',lightgoldenrodyellow:'fafad2',lightgrey:'d3d3d3',lightgreen:'90ee90',lightpink:'ffb6c1',lightsalmon:'ffa07a',lightseagreen:'20b2aa',lightskyblue:'87cefa',lightslateblue:'8470ff',lightslategray:'778899',lightsteelblue:'b0c4de',lightyellow:'ffffe0',lime:'00ff00',limegreen:'32cd32',linen:'faf0e6',magenta:'ff00ff',maroon:'800000',mediumaquamarine:'66cdaa',mediumblue:'0000cd',mediumorchid:'ba55d3',mediumpurple:'9370d8',mediumseagreen:'3cb371',mediumslateblue:'7b68ee',mediumspringgreen:'00fa9a',mediumturquoise:'48d1cc',mediumvioletred:'c71585',midnightblue:'191970',mintcream:'f5fffa',mistyrose:'ffe4e1',moccasin:'ffe4b5',navajowhite:'ffdead',navy:'000080',oldlace:'fdf5e6',olive:'808000',olivedrab:'6b8e23',orange:'ffa500',orangered:'ff4500',orchid:'da70d6',palegoldenrod:'eee8aa',palegreen:'98fb98',paleturquoise:'afeeee',palevioletred:'d87093',papayawhip:'ffefd5',peachpuff:'ffdab9',peru:'cd853f',pink:'ffc0cb',plum:'dda0dd',powderblue:'b0e0e6',purple:'800080',red:'ff0000',rosybrown:'bc8f8f',royalblue:'4169e1',saddlebrown:'8b4513',salmon:'fa8072',sandybrown:'f4a460',seagreen:'2e8b57',seashell:'fff5ee',sienna:'a0522d',silver:'c0c0c0',skyblue:'87ceeb',slateblue:'6a5acd',slategray:'708090',snow:'fffafa',springgreen:'00ff7f',steelblue:'4682b4',tan:'d2b48c',teal:'008080',thistle:'d8bfd8',tomato:'ff6347',turquoise:'40e0d0',violet:'ee82ee',violetred:'d02090',wheat:'f5deb3',white:'ffffff',whitesmoke:'f5f5f5',yellow:'ffff00',yellowgreen:'9acd32'};
	var capture = new Array();
	
	// FF45AB css notation : FFAB50
	if (capture = color.match(/^([A-F\d]{2})([A-F\d]{2})([A-F\d]{2})$/i)) {
		this.r = hex2dec(capture[1]);
		this.g = hex2dec(capture[2]);
		this.b = hex2dec(capture[3]);
		this.a = 1;
		this.setHSLfromRGB();
		this.valid = true;
	}
	// F4B css notation : F5F
	else if(capture = color.match(/^([A-F\d])([A-F\d])([A-F\d])$/i)) {
		this.r = hex2dec(capture[1].toString() + capture[1].toString());
		this.g = hex2dec(capture[2].toString() + capture[2].toString());
		this.b = hex2dec(capture[3].toString() + capture[3].toString());
		this.a = 1;
		this.setHSLfromRGB();
		this.valid = true;
	}
	// RGB css notation : rgb(0,255,0)
	else if(capture = color.match(/^rgb\((\d+),(\d+),(\d+)\)$/i)) {
		this.r = capture[1];
		this.g = capture[2];
		this.b = capture[3];
		this.a = 1;
		this.setHSLfromRGB();
		this.valid = true;
	}
	// RGBA css notation : rgba(0,255,56,0.5)
	else if(capture = color.match(/^rgba\((\d+),(\d+),(\d+),([\d\.]+)\)$/i)) {
		this.r = capture[1];
		this.g = capture[2];
		this.b = capture[3];
		this.a = capture[4];
		this.setHSLfromRGB();
		this.valid = true;
	}
	// RGB % css notation : rgb(100%, 0%, 0%)
	else if(capture = color.match(/^rgb\(([\d\.]+)%,([\d\.]+)%,([\d\.]+)%\)$/i)) {
		this.r = capture[1]/100*255;
		this.g = capture[2]/100*255;
		this.b = capture[3]/100*255;
		this.a = 1;
		this.setHSLfromRGB();
		this.valid = true;
	}
	// RGBA % css notation : rgba(15%,10%,56%,0.5)
	else if(capture = color.match(/^rgba\(([\d\.]+)%,([\d\.]+)%,([\d\.]+)%,([\d\.]+)\)$/i)) {
		this.r = capture[1]/100*255;
		this.g = capture[2]/100*255;
		this.b = capture[3]/100*255;
		this.a = capture[4];
		this.setHSLfromRGB();
		this.valid = true;
	}
	// HSL css notation : hsl(0, 100%, 50%)
	else if(capture = color.match(/^hsl\(([\d\.]+),([\d\.]+)%,([\d\.]+)%\)$/i)) {
		this.h = capture[1];
		this.s = capture[2]/100;
		this.l = capture[3]/100;
		this.a = 1;
		this.setRGBfromHSL();
		this.valid = true;
	}
	// HSLA css notation : hsla(120, 100%, 50%, 0.3)
	else if(capture = color.match(/^hsla\(([\d\.]+),([\d\.]+)%,([\d\.]+)%,([\d\.]+)\)$/i)) {
		this.h = capture[1];
		this.s = capture[2]/100;
		this.l = capture[3]/100;
		this.a = capture[4];
		this.setRGBfromHSL();
		this.valid = true;
	}
	// Named color css notation : darkblue
	else if(color in named_colors) { // nom de couleur en clair
		capture = /^([A-F\d]{2})([A-F\d]{2})([A-F\d]{2})$/i.exec(named_colors[color]);
		this.r = hex2dec(capture[1]);
		this.g = hex2dec(capture[2]);
		this.b = hex2dec(capture[3]);
		this.a = 1;
		this.setHSLfromRGB();
		this.valid = true;
	}

	// #AB56DE
	this.toHex = function ()	{ return '#' + dec2hex(this.r) + dec2hex(this.g) + dec2hex(this.b);  }

	// rgb(xxx,xxx,xxx)
    this.toRGB = function()		{ return  'rgb(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ')'; }

	// rgba(xxx,xxx,xxx,10%)
    this.toRGBA = function()	{ return 'rgba(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ', ' + this.a +')'; }

	// hsl(50,20%,50%)
    this.toHSL = function()		{ return  'hsl(' + Math.round(this.h) + ', ' + Math.round(this.s * 100) + '%, ' + Math.round(this.l * 100) + '%)'; }

	// hsla(50,20%,50%,0.2)
    this.toHSLA = function()	{ return 'hsla(' + Math.round(this.h) + ', ' + Math.round(this.s * 100) + '%, ' + Math.round(this.l * 100) + '%, ' + this.a +')'; }

	// darkblue
    this.toName = function () {
		var search_hexcode = this.toHex().substring(1,7); // supprime le leading '#'
		for (var name in named_colors) {
			if (named_colors[name] == search_hexcode)
				return name;
		}
        return '';
    }

	// overloading toString : darblue or #456581
	this.toString = function () {
		var tmp = this.toName();
		return tmp ? tmp : this.toHex();
    }

	

	// getters and setters
	this.red		= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.r;
			if		(param > 255) param = 255 ; // [0->255]
			else if (param < 0)   param = 0;
			this.r = param;
			this.setHSLfromRGB();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.r;
		}
	}

	this.green		= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.g;
			if		(param > 255) param = 255 ; // [0->255]
			else if (param < 0)   param = 0;
			this.g = param;
			this.setHSLfromRGB();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.g;
		}
	}

	this.blue		= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.b;
			if		(param > 255) param = 255 ; // [0->255]
			else if (param < 0)   param = 0;
			this.b = param;
			this.setHSLfromRGB();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.b;
		}
	}

	this.hue		= function (param) {
		if			(typeof param == 'number') { // setter	
			var old = this.h;
			if		(param > 360) param %= 360 ; // [0->360]
			else if (param < 0)
				while(param < 0) param += 360;
			this.h = param;
			this.setRGBfromHSL();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.h;
		}
	}

	this.saturation	= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.s;
			if		(param > 1) param = 1 ; // [0->1]
			else if (param < 0) param = 0;
			this.s = param;
			this.setRGBfromHSL();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.s;
		}
	}

	this.lightness	= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.l;
			if		(param > 1) param = 1 ; // [0->1]
			else if (param < 0) param = 0;
			this.l = param;
			this.setRGBfromHSL();
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.l;
		}
	}

	this.alpha	= function (param) {
		if			(typeof param == 'number') { // setter
			var old = this.a;
			if		(param > 1) param = 1 ; // [0->1]
			else if (param < 0) param = 0;
			this.a = param;
			return old;
		} else if	(typeof param == 'undefined') { // getter
			return this.a;
		}
	}

	

	// private fonctions
	function dec2hex(s)	{ return ( s<15.5 ? '0' : '' ) + Math.round( s ).toString( 16 ); }
	function hex2dec(s)	{ return parseInt( s, 16 ); }

	function RGBtoHSL(r,g,b) {
		/* algorithms from http://130.113.54.154/~monger/hsl-rgb.html */
		var h,s,l;
		var pourcent = new Array(r/255, g/255, b/255);
		var min = Math.min(pourcent[0],pourcent[1],pourcent[2]);
		var max = Math.max(pourcent[0],pourcent[1],pourcent[2]);

		l = (max + min)/2;
 
		if (max == min) { // grey saturation=0, hue=0
			s = 0;
			h = 0;
		} else if (l < 0.5) {
			s = (max - min) / (max + min);
		} else {
			s = (max - min) / (2 - max - min);
		}
		
		if		(max == pourcent[0]) h =	 (pourcent[1]-pourcent[2]) / (max - min);
		else if (max == pourcent[1]) h = 2 + (pourcent[2]-pourcent[0]) / (max - min);
		else if (max == pourcent[2]) h = 4 + (pourcent[0]-pourcent[1]) / (max - min);
		h *= 60 ;
		if (h < 0) h += 360;
		if(isNaN(h)) h=0;
		
		return new Array(h,s,l);
	}

	function HSLtoRGB (h,s,l) {
		/* algorithms from http://130.113.54.154/~monger/hsl-rgb.html */
		if (s == 0)
			return new Array(Math.round(l*255),Math.round(l*255),Math.round(l*255));

		var temp2 = (l < 0.5) ? l * (1+s) : l + s - l*s ;
		var temp1 = 2*l - temp2;

		h /= 360 ;

		var temp3 = new Array(h + 1/3,  h,  h - 1/3);
		for(var i=0 ; i<temp3.length ; i++) {
			if (temp3[i] < 0) temp3[i] += 1;
			if (temp3[i] > 1) temp3[i] -= 1;
		}
	
		var rgb = new Array(0,0,0);
		for(var i=0 ; i<rgb.length ; i++) {
			if		(6 * temp3[i] < 1)	rgb[i] = temp1 + (temp2-temp1) * 6 * temp3[i];
			else if (2 * temp3[i] < 1)  rgb[i] = temp2;
			else if (3 * temp3[i] < 2)  rgb[i] = temp1 + (temp2-temp1) * (2/3 - temp3[i]) * 6;
			else						rgb[i] = temp1;
			rgb[i] = Math.round(rgb[i] * 255) ;
		}

		return new Array(rgb[0],rgb[1],rgb[2]);
	}
}

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_flaydeer
Messages postés
28
Date d'inscription
dimanche 22 août 2004
Statut
Membre
Dernière intervention
3 septembre 2011
-
Bonjour,

pourrais tu expliquer comment utiliser ce code.

merci
ryosama
Messages postés
35
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
2 février 2009
-
Voici un autre exemple :
var color = new colorParser(' 9acd32 ');
color.saturation += 0.2 ; // on auguemente la saturation de la couleur de 20%
document.getElementById('un_element').style.background = color.toHSL(); // on affecte la nouvelle couleur au fond d'un élement.
ryosama
Messages postés
35
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
2 février 2009
-
L'exemple a changé et est maintenant :
var color = new colorParser(' 9acd32 ');
color.saturation(color.saturation() + 0.2) ; // on augmente la saturation de la couleur de 20%
document.getElementById('un_element').style.background = color.toRGB(); // on affecte la nouvelle couleur au fond d'un élement
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour,

Très beau color-parser, probablement un des plus complet que j'ai vu. Seulement, la manipulation du color-parser est très compliqué, impossible de fixer la couleur (il aurait été plus simple de faire un premier clic : la couleur est gelé, deuxième clic : la couleur est dégelée et on peut de nouveau la modifier). Ensuite, il aurait été bien de pouvoir modifier les champs d'information sur la couleur :

Ex : je double-clique sur Saturation : 100% puis je peux modifier la valeur de saturation. Enfin, la couleur s'ajuste avec la nouvelle valeur.

Si vous voyez ce que je veux dire ;)

Je vous donne donc un 8, vous avez fait un très bon effort mais il reste plusieurs choses à modifier avant de pouvoir se vanter d'avoir fait le meilleur color-parser en javascript.
ryosama
Messages postés
35
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
2 février 2009
-
Le color-picker que j'ai mis est juste une petite demo de la librairie.
On pourrait améliorer l'exemple mais je voulais plus montrer les possibilités de la librairie.

Je note les remarques, je changerai peut être la démo à l'occasion.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.