paletta dei colori in javascript

**alexinside83** · 07-12-2004, 19:04

ciao a tutti.
e possibile creare la classica paletta dei colori (tipo quella che appare in dreamweaver quando si vuole dare il colore, magari fatta in maniera piu semplice) in javascript??

grazie a tutti.

**willybit** · 07-12-2004, 19:17

ciao alexinside83,

qualche anno fa mi ero fatto questo

codice:

<html>
<head>
<script language="javascript">
<!--
	function LPad(str,length,xchar){
		var stringa = ''
		if(str.length<length){
			for(i=1;i<=length-str.length;i++)
				stringa = stringa + xchar
			stringa = stringa + str
			return stringa
		}
		else return str
	}
	
	function Dec2Hex(dec){	//Converte un numero decimale (da 0 a 255) in una stringa che rappresenta un numero esadecimale
		aHex = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
		c = 0
		for(i=dec;i>=16;i=i-16){
			c = c + 1
		}
		strHex = aHex[c] + aHex[i]
		return strHex
	}
	
	function Hex2Dec(hex){ //Converte una stringa che rappresenta un numero esadecimale (da 0 a FF) in un numero decimale
		aHex = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
		hex=LPad(hex,2,'0')
		h1=hex.substr(0,1)
		h1=h1.toUpperCase()
		h2=hex.substr(1,1)
		h2=h2.toUpperCase()
		for(i=0;i<=aHex.length;i++){
			if(aHex[i]==h1)d1=i
			if(aHex[i]==h2)d2=i
		}
		d1 = d1*16
		dec = d1+d2
		return dec
	}
	
	function rgb2hex(r,g,b){
		var strHex = ''
		strHex = strHex + Dec2Hex(r)
		strHex = strHex + Dec2Hex(g)
		strHex = strHex + Dec2Hex(b)
		strHex = '#'+strHex
		return strHex
	}
	
	function hex2r(hexColor){
		xr = hexColor.substr(1,2)
		r = Hex2Dec(xr)
		return r
	}
	
	function hex2g(hexColor){
		xg = hexColor.substr(3,2)
		g = Hex2Dec(xg)
		return g
	}
	
	function hex2b(hexColor){
		xb = hexColor.substr(5,2)
		b = Hex2Dec(xb)
		return b
	}

	function CreaSfumatura(qtaColori,rda,gda,bda,ra,ga,ba){
		var stepX = (255/(qtaColori-1))
		var sColore = new Array()
		for(j=0;j<=255;j=j+stepX){
			xr = Math.round(j/255*ra+(255-j)/255*rda)
			xg = Math.round(j/255*ga+(255-j)/255*gda)
			xb = Math.round(j/255*ba+(255-j)/255*bda)
			sColore[sColore.length] = rgb2hex(xr,xg,xb)
		}
		return sColore
	}
	
	function CreaSfumaturaH(qtaColori,hexDa,hexA){
		var stepX = (255/(qtaColori-1))
		var sColore = new Array()
		var cont = 0
		rda = hex2r(hexDa)
		gda = hex2g(hexDa)
		bda = hex2b(hexDa)
		ra = hex2r(hexA)
		ga = hex2g(hexA)
		ba = hex2b(hexA)
		for(j=0;j<=255;j=j+stepX){
			xr = Math.round(j/255*ra+(255-j)/255*rda)
			xg = Math.round(j/255*ga+(255-j)/255*gda)
			xb = Math.round(j/255*ba+(255-j)/255*bda)
			sColore[cont] = rgb2hex(xr,xg,xb)
			cont = cont+1
		}
		return sColore
	}
	
	function getBgColor(id){
		obj = document.getElementById(id)
		bgcolor = obj.bgColor 
		return  bgcolor
	}
	
	function setBgColor(id,hexColor){
		obj = document.getElementById(id)
		obj.bgColor = hexColor
	}
	
	function Schiarisci(hexColore,t,nc){
		temp = CreaSfumaturaH(nc,hexColore,'#FFFFFF')
		newcolor = temp[t]
		return newcolor
	}
	
	function Scurisci(hexColore,t,nc){
		temp = CreaSfumaturaH(nc,hexColore,'#000000')
		newcolor = temp[t]
		return newcolor
	}
	
	
	
	function scrivi(idDiv,testo){
		if(document.getElementById){
			document.getElementById(idDiv).innerHTML = testo
		}
		if(document.layers){
			//alert('NN')
			document.layers[idDiv].document.write(testo);
			document.layers[idDiv].document.close();
		}
	}
	
	function TabellaColori(kr,kg,kb){
		stepX = 85
		dimensionicella = 10
		var imgTrasp = '[img]1x1.gif[/img]'
		NumeroColori = 0 //non cambiare questo
		txt = ''
		txt = txt + '<table border="0" cellpadding="0" cellspacing="1">\n'
		for(j=255;j>=0;j=j-(Math.round(stepX/5))){
//alert('j:'+j)
			txt = txt + '  <tr>\n'
			for(x=1;x<=6;x++){
//alert('x:'+x)
				for(i=stepX;i<256;i=i+stepX){
					ii = i
//alert('inizio ii:'+ii+' i:'+i+' x:'+x+' j:'+j)
					if(x==1){
						r = 255
						g = 0
						b = i
					}
					if(x==2){
						r = 255-i
						g = 0
						b = 255
					}
					if(x==3){
						r = 0
						g = i
						b = 255
					}
					if(x==4){
						r = 0
						g = 255
						b = 255-i
					}
					if(x==5){
						r = i
						g = 255
						b = 0
					}
					if(x==6){
						r = 255
						g = 255-i
						b = 0
					}
					xr = Math.round(j/255*r+(255-j)/255*kr)
					xg = Math.round(j/255*g+(255-j)/255*kg)
					xb = Math.round(j/255*b+(255-j)/255*kb)
					Colore = rgb2hex(xr,xg,xb)
					if(j!=0) NumeroColori = NumeroColori + 1
					txt = txt + '    <td bgcolor="'+Colore+'" width="'+dimensionicella+'" height="'+dimensionicella+'">'+imgTrasp+'</td>'
					i = ii
//alert('fine ii:'+ii+' i:'+i+' x:'+x+' j:'+j)
				}
			}
			txt = txt + '  </tr>\n'
		}
		txt = txt + '  <tr>\n    <td colspan="18" height="'+dimensionicella+'">'+imgTrasp+'</td>\n  </tr>\n'
		txt = txt + '  <tr>\n'
		for(x=1;x<=6;x++){
			for(i=stepX;i<=255;i=i+stepX){
				ii = i
				if(x==1){
					r = 255
					g = 0
					b = i
				}
				if(x==2){
					r = 255-i
					g = 0
					b = 255
				}
				if(x==3){
					r = 0
					g = i
					b = 255
				}
				if(x==4){
					r = 0
					g = 255
					b = 255-i
				}
				if(x==5){
					r = i
					g = 255
					b = 0
				}
				if(x==6){
					r = 255
					g = 255-i
					b = 0
				}
				Colore = rgb2hex(r,g,b)
				txt = txt + '    <td bgcolor="'+Colore+'" width="'+dimensionicella+'" height="'+(dimensionicella*2)+'">'+imgTrasp+'</td>\n'
				i = ii
			}
		}
		txt = txt + '  </tr>\n'
		txt = txt + '  <tr>\n'
		tot = 255/(((255/stepX)*6)-1)
		n = 0
		for(x=1;x<=6;x++){
			for(i=stepX;i<=255;i=i+stepX){
				ii = i
				cc = Math.round(n*tot)
				n++
				Colore = rgb2hex(cc,cc,cc)
				txt = txt + '    <td bgcolor="'+Colore+'" width="'+dimensionicella+'" height="'+(dimensionicella*2)+'">'+imgTrasp+'</td>\n'
				i = ii
			}
		}
		txt = txt + '  </tr>\n'
		txt = txt + '</table>'
		return txt
	}
	
	
	
	
	function SfumatureColori(r,g,b){
		dimensionicella = 10
		var imgTrasp = '[img]1x1.gif[/img]'
		aColoriB = CreaSfumatura(16,r,g,b,0,0,0)
		aColoriW = CreaSfumatura(16,r,g,b,255,255,255)
		txt = ''
		txt = txt + '<table border="0" cellpadding="0" cellspacing="1">\n'
		for(i=0;i<aColoriB.length;i++){
			txt = txt + '  <tr>\n    <td bgcolor="'+aColoriB[i]+'" width="'+(dimensionicella*2)+'" height="'+dimensionicella+'">'+imgTrasp+'</td>\n'
			txt = txt + '    <td bgcolor="'+aColoriW[i]+'" width="'+(dimensionicella*2)+'" height="'+dimensionicella+'">'+imgTrasp+'</td>\n  </tr>\n'
		}
		txt = txt + '</table>'
		return txt
	}
		
	function Anteprima(r,g,b){
		colore = rgb2hex(r,g,b)
		colorex = rgb2hex(255-r,255-g,255-b)
		txt = ''
		txt = txt + '<table border="0" cellpadding="0" cellspacing="1">\n'
		txt = txt + '  <tr>\n'
		txt = txt + '    <td width="40" height="40" bgcolor="'+colore+'"><font face="arial" size="1" color="'+colorex+'">'+colore+'</font></td>\n'
		txt = txt + '  </tr>\n'
		txt = txt + '</table>\n'
		return txt
	}	
		
//-->
</script>
<title></title>
</head>
<body onload="scrivi('colori',TabellaColori(135,135,135));scrivi('sfumature',SfumatureColori(135,135,135))">

<div id="colori" style="position: absolute;"></div>
<div id="sfumature" style="position: absolute;left:220px"></div>
<div id="anteprima" style="position: absolute;left:220px;top:201px;">
<table border="0" cellpadding="0" cellspacing="1">
	<tr>
		<td width="40" height="40" bgcolor="#ABABAB">[img]1x1.gif[/img]</td>
	</tr>
</table>
</div>

</body>
</html>

Discussione: paletta dei colori in javascript

Strumenti discussione

Ricerca discussione

Visualizza

paletta dei colori in javascript

Permessi di invio