Colore di sfondo e "contrasto"

[ivanhalen]

Salve,
Ho un textfield siffatto:

<input name="sfondo" type="text" id="sfondo" value="#336600" onClick="sfondo.style.backgroundColor=sfondo.value">

come vedete, al click sul campo di testo, il colore di sfondo del medesimo diventa uguale al valore inserito (in questa maniera dò all'utente la possibilità di "monitorare" il colore inserito)

Il problema è che, per i colori di sfondo scuri, il testo diventa incomprensibile, essendo in genere nero..

Esiste uno script che riesca a "leggere" il colore di sfondo e a "consigliarmi" un colore di testo che faccia un sufficiente contrasto col primo?

Spero di essermi spiegato...

Grazie

[willybit]

Ciao ivanhalen,

se il colore inserito è sempre in esadecimale (#336600) si potrebbe fare una funzione per scompone le tre componenti red, green e blue (#RRGGBB) convertire i valori in decimale (0-255) e rifare il colore togliendo 255 da ogni componente e tenendo il valore assoluto... è più difficile spiegarlo che farlo

<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
	var aHex = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
	var c = 0
	for(var i=dec;i>=16;i=i-16)
		c++
	return aHex[c] + aHex[i]
}
function Hex2Dec(hex){ //Converte una stringa che rappresenta un numero esadecimale (da 0 a FF) in un numero decimale
	var aHex = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
	var hex=LPad(hex,2,'0')
	var h1=hex.substr(0,1).toUpperCase()
	var h2=hex.substr(1,1).toUpperCase()
	var d1
	for(var i=0;i<=aHex.length;i++){
		if(aHex[i]==h1)d1=i
		if(aHex[i]==h2)d2=i
	}
	d1 = d1*16
	return d1+d2
}
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){
	var xr = hexColor.substr(1,2)
	return Hex2Dec(xr)
}
function hex2g(hexColor){
	var xg = hexColor.substr(3,2)
	return Hex2Dec(xg)
}
function hex2b(hexColor){
	var xb = hexColor.substr(5,2)
	return Hex2Dec(xb)
}
function ColoreContrasto(hex){
	var r = hex2r(hex)
	var g = hex2g(hex)
	var b = hex2b(hex)	
	var rx = Math.abs(hex2r(hex)-255)
	var gx = Math.abs(hex2g(hex)-255)
	var bx = Math.abs(hex2b(hex)-255)
	if(Math.abs(rx-r)<127)rx=Math.abs(rx-127)
	if(Math.abs(gx-g)<127)gx=Math.abs(gx-127)
	if(Math.abs(bx-b)<127)bx=Math.abs(bx-127)
	return rgb2hex(rx,gx,bx)
}
</script>
<form>
<input name="sfondo" type="text" id="sfondo" value="#336600" onClick="this.style.color=ColoreContrasto(this.value);this.style.backgroundColor=this.value">
</form>

famme sape'

[ivanhalen]

Innanzitutto grazie per la risposta :-)

..Mi dà un errore alla riga 68: previsto oggetto...

Edit: come non detto, ho eliminato gli "a capo" artificiali e... FUNZIONA!! :-)

Grazie ancora!!!