- a YoMaster.com - Recursos WebMasters, diseña tus páginas Web, códigos HTML, javascript, trucos, efectos, ejemplos, tutoriales, Útilis en general...

Publicidad - Patrocinador de www.yomaster.com

Recursos WebMaster - Códigos con ejemplos - Trucos - Diseño - HTML - JavaScript - Imágenes - Fondos - Botones - Generadores

Servicios

Deja tu Firma

Foro YoMaster

Afiliados

Afiliados TXT

Link Amigos

Anunciados

Nuevos Temas

Nuevos temas Futuros proyectos

Otros

Generador Color de Texto y de Fondo

Con este código podrás cambiar el color de texto y de fondo pudiéndose ver el código al cual pertenece dicho color.

ver código

Informar aquí si tiene error la página

¿Como ganar dinero con tu Web?

Difícil
Medio
Fácil

EJEMPLO:

Selecciona uno de los dos recuadros (los grandes) de la derecha. El izquierdo pertenece al color del texto (el negro) y el derecho es el color de fondo (el rojo). Después visualiza el color que deseas desplazando las tres barras pinchando en los recuadros de la izquierda.

F5 para volver al estado normal.

Infórmanos aquí si tiene algún error este código.

¡¡ OJO !! Pega este código dentro de las etiquetas <body> y </body> en la vista HTML

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"> <tr> <td width="100%"> <script> var selectedObj var scalaleft=10 var scalaright=265 var scalawidth=scalaright-scalaleft var imgObj var hexared="00" var hexagreen="00" var hexablue="00" var hexa="#000000" var selectedcolor="#000000" var colorid var coloridshort="displaycolorFG" var browserinfos=navigator.userAgent var ie=document.all&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/) var opera=browserinfos.match(/Opera/) function setZIndex(obj, zOrder) { obj.zIndex = zOrder } function makeHexa(thiscol) { var colhex_left = Math.floor(thiscol/16) var colhex_right= thiscol-(colhex_left*16) if (colhex_left == 10) {colhex_left="A"} if (colhex_left == 11) {colhex_left="B"} if (colhex_left == 12) {colhex_left="C"} if (colhex_left == 13) {colhex_left="D"} if (colhex_left == 14) {colhex_left="E"} if (colhex_left == 15) {colhex_left="F"} if (colhex_right == 10) {colhex_right="A"} if (colhex_right == 11) {colhex_right="B"} if (colhex_right == 12) {colhex_right="C"} if (colhex_right == 13) {colhex_right="D"} if (colhex_right == 14) {colhex_right="E"} if (colhex_right == 15) {colhex_right="F"} var colhex =""+colhex_left+colhex_right return colhex } function shiftTo(obj, x, y) { if (x<=scalaleft) {x=scalaleft} if (x>=scalaright) {x=scalaright} var colo=Math.floor((255/scalawidth*(x-scalaleft))) var hexacolo=makeHexa(colo) obj.pixelLeft=x-7 obj.pixelTop=selectedObj.posTop if (imgObj.parentElement.id=="spanschienebuttonred") { hexared=hexacolo document.colorwizard.rgbred.value=colo hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value)) hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value)) } if (imgObj.parentElement.id=="spanschienebuttongreen") { hexagreen=hexacolo document.colorwizard.rgbgreen.value=colo hexared=makeHexa(parseInt(document.colorwizard.rgbred.value)) hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value)) } if (imgObj.parentElement.id=="spanschienebuttonblue") { hexablue=hexacolo document.colorwizard.rgbblue.value=colo hexared=makeHexa(parseInt(document.colorwizard.rgbred.value)) hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value)) } hexa="#"+hexared+hexagreen+hexablue if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexa document.all.testdiv.style.color=hexa strkcolor=hexa } else if (coloridshort=="displaycolorBG") { document.all.displaycolorBG.style.backgroundColor=hexa document.all.testdiv.style.backgroundColor=hexa strkweight=hexa } document.colorwizard.hexafield.value=hexa } function setSelectedElem(evt) { imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("schienebutton") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } selectedObj=null return } function dragIt(evt) { if (selectedObj) { shiftTo(selectedObj, (window.event.clientX-offsetX-document.all.colorwizarddiv.style.posLeft), (window.event.clientY - offsetY)) return false } } function engage(evt) { setSelectedElem(evt) if (selectedObj) { offsetX = window.event.offsetX offsetY = window.event.offsetY } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function translateintorgb() { var hexanew=document.colorwizard.hexafield.value if (hexanew.indexOf("#") == -1) { hexanew="#"+hexanew document.colorwizard.hexafield.value=hexanew } var hexanewred=hexanew.substring(1,3) var hexanewgreen=hexanew.substring(3,5) var hexanewblue=hexanew.substring(5,7) document.colorwizard.rgbred.value=parseInt("0x"+hexanewred) document.colorwizard.rgbgreen.value=parseInt("0x"+hexanewgreen) document.colorwizard.rgbblue.value=parseInt("0x"+hexanewblue) document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3 document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3 document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3 if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexanew document.all.testdiv.style.color=hexanew strkcolor=hexanew } else if (coloridshort=="displaycolorBG") { document.all.displaycolorBG.style.backgroundColor=hexanew document.all.testdiv.style.backgroundColor=hexanew strkweight=hexanew } } function translateintohexa() { if (document.colorwizard.rgbred.value>255) {document.colorwizard.rgbred.value=255} if (document.colorwizard.rgbgreen.value>255) {document.colorwizard.rgbgreen.value=255} if (document.colorwizard.rgbblue.value>255) {document.colorwizard.rgbblue.value=255} var hexanewred=makeHexa(parseInt(document.colorwizard.rgbred.value)) var hexanewgreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value)) var hexanewblue=makeHexa(parseInt(document.colorwizard.rgbblue.value)) var hexanew="#"+hexanewred+hexanewgreen+hexanewblue document.colorwizard.hexafield.value="#"+hexanewred+hexanewgreen+hexanewblue document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3 document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3 document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3 if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexanew document.all.testdiv.style.color=hexanew strkcolor=hexanew } else if (coloridshort=="displaycolorBG") { document.all.testdiv.style.backgroundColor=hexanew strkweight=hexanew } } function launchcolorwizard(whatid) { coloridshort=whatid colorid=eval("document.all."+whatid+".style") document.colorwizard.hexafield.value=colorid.backgroundColor translateintorgb() } function initcolorpicker() { document.all.colorwizarddiv.style.posLeft=DL_GetElementLeft(document.all.marker); document.all.colorwizarddiv.style.posTop=DL_GetElementTop(document.all.marker); document.all.colorwizarddiv.style.visibility="visible" document.onmousedown=engage document.onmousemove=dragIt document.onmouseup=release } function DL_GetElementLeft(eElement) { var nLeftPos = eElement.offsetLeft; var eParElement = eElement.offsetParent; while (eParElement != null) { nLeftPos += eParElement.offsetLeft; eParElement = eParElement.offsetParent; } return nLeftPos; } function DL_GetElementTop(eElement) { var nTopPos = eElement.offsetTop; var eParElement = eElement.offsetParent; while (eParElement != null) { nTopPos += eParElement.offsetTop; eParElement = eParElement.offsetParent; } return nTopPos; } if (ie) { window.onload=initcolorpicker } else { alert("Color-Picker requires Internet Explorer 5x/6x") } </SCRIPT> <script> if (ie) { document.write('<form name="colorwizard">') document.write('<div id="marker" style="position:relative;overflow:hidden;width:310px;height:92px"></div>') document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:350px;height:92px;border-style:solid;border-color:#666666;border-width:1px;background-color:#dddddd">') } else { document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:0px;height:0px;">') } </script> <span id="spanschienered" style="position:absolute;top:8px;left:3px;background-color:#FF0000;width:255px;height:5px"> <img src="images/cuadro3.gif" width="1" height="1"></span> <span id="spanschienebuttonred" style="position:absolute;top:5px;left:3px;background-color:#444444;border:1px solid black;"> <IMG NAME="schienebuttonred" SRC="images/cuadro3.gif" width=12 height=12></span> <span id="spanschienegreen" style="position:absolute;top:25px;left:3px;background-color:#00ff00;width:255px;height:5px"> <img src="images/cuadro3.gif" width="1" height="1"></span> <span id="spanschienebuttongreen" style="position:absolute;top:22px;left:3px;background-color:#444444;border:1px solid black;"> <IMG NAME="schienebuttongreen" SRC="images/cuadro3.gif" width=12 height=12></span> <span id="spanschieneblue" style="position:absolute;top:42px;left:3px;background-color:#0000FF;width:255px;height:5px"> <img src="images/cuadro3.gif" width="1" height="1"></span> <span id="spanschienebuttonblue" style="position:absolute;top:39px;left:3px;background-color:#444444;border:1px solid black;"> <IMG NAME="schienebuttonblue" SRC="images/cuadro3.gif" width=12 height=12></span> <div id="displayrgbfield" style="position:absolute;top:55px;left:3px;background-color:#CCCCCC;border:1px solid black"> <table cellpadding=2 cellspacing=0> <tr><td align=right> <table cellpadding=0 cellspacing=0> <tr><td align=right> <font size=1 face=Arial> R </font> </td> <td> <input type="text" name="rgbred" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"> </td> <td> </td> <td align=right> <font size=1 face=Arial> G </font> </td> <td> <input type="text" name="rgbgreen" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"> </td><td align=right> <font size=1 face=Arial> B </font> </td> <td> <input type="text" name="rgbblue" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"> </td> <td colspan=2 align=center> <input type="button" size=1 value="go" onClick="translateintohexa()" style="font-size:8pt;color:black;font-family:Arial;"> </td> </tr> </table> </td></tr> </table> </div> <div id="displayhexafield" style="position:absolute;top:55px;left:200px;background-color:#CCCCCC;border:1px solid black"> <table cellpadding=2 cellspacing=0> <tr><td align=right> <table cellpadding=0 cellspacing=0> <tr><td align=right> </td> <td> <input type="text" name="hexafield" size=10 value="#000000" style="font-size:8pt;color:#000000;font-family:Verdana;"> </td> <td> </td> <td align=center> <input type="button" size=1 value="go" onClick="translateintorgb()" style="font-size:8pt;color:black;font-family:Arial;"> </td></tr> </table> </td></tr> </table> </div> <p> <span id="displaycolorBG" style="position:absolute;top:16;left:285;width:16px;height:16px;border:1px solid black;background-color:#FF0000"><a href="javascript:launchcolorwizard('displaycolorBG')"> <img src="images/cuadro3.gif" width=16 height=16 border=0></a></span> <span id="displaycolorFG" style="position:absolute;top:7px;left:276px;width:16px;height:16px;border:1px solid black;background-color:#000000;"><a href="javascript:launchcolorwizard('displaycolorFG')"> <img src="images/cuadro3.gif" width=16 height=16 border=0></a></span> </div> <br> <script> if (ie) { document.write('<div id="testdiv" style="position:relative;visibility:visible;width:350px;border-style:solid;border-color:#666666;border-width:1px;background-color:#FF0000;font-family:Verdana;font-size:16pt;color:#000000;padding:5px">') document.write('www.YoMaster.com te ayuda') document.write('</div>') document.write('</form>') } </script> </p> <p> </p> </td> </tr> </table> </center> </div>

¡¡ OJO !! Pega este código dentro de las etiquetas <body> y </body> en la vista HTML

Partes modificables de este código:

- La imagen que forman todos los recuadros de este ejemplo es esta:

images/cuadro3.gif = guárdala en una carpeta que se llame images o deberás de modificar en todo el código la ruta de dicha imagen.

Realmente esta imagen es más pequeña y le hemos puesto color al borde para que se pueda ver pero no lo tiene...recuérdalo.

- En esta línea del código podrás modificar el texto de ejemplo:

document.write('www.YoMaster.com te ayuda')

WebMaster de www.yomaster.com