code utilisé: getElementById() , parseInt( ,16) , .toString(16), if(){}, substring( , )

La machine à couleurs

code RGB

Pour définir une couleur, il suffit de choisir trois entiers entre 0 et 255 …(cliquer sur Exemple). Pour voir la couleur obtenue, cliquer sur Afficher. Avec les boutons + et - , vous pouvez augmenter ou diminuer la quantité de rouge,de vert ou de bleu. Au bas du tableau, vous pouvez lire la notation hexadécimale de la couleur, utilisée habituellement dans le code html.



rouge
vert
bleu
notation html
luminosité %
saturation %
luminance %

code HTML

#

On peut aussi entrer un code html : cliquer sur Exemple, puis sur Lancer.

Explications

Le code simplifié


function affiche()
{	var couleurRgb=0;
	var couleurR=0;
	var couleurV=0;
	var couleurB=0;
	//Couleur rouge
	couleurR=parseInt(document.machineCouleur.rouge.value);
		
	//Couleur vert
	couleurV=parseInt(document.machineCouleur.vert.value);
		
	//couleur bleu
	couleurB=parseInt(document.machineCouleur.bleu.value);
	
	//creation de la chaine de code html
	couleurRgb="rgb("+couleurR+","+couleurV+","+couleurB+")";
	
	modification de la couleur de l'élément palette
	document.getElementById("palette").style.backgroundColor=couleurRgb;
}

Commentaire du code simplifié

On a créé dans la page html un élément qui a pour identité palette.

<div id="palette" > </div>

On met ses propriétés dans la feuille de style


#palette{
	width:200px;
	height:200px;
	border: solid 1px gray;
	margin-left:7px;
	float:left;
	margin-right:20px;
}

La commande document.getElementById("palette").style.backgroundColor=couleurRgb; donne à l'élément palette une couleur d'arrière plan définie par la variable couleurRgb.

Code complet

En affichant le code source de cette page vous pourrez lire le code complet. On a utilisé