<!-- Ejemplo creado por Josep Antoni Bover el [22/01/2014] para devildrey33.es Ultima modificación el [17/04/2018] --> <!DOCTYPE> <html> <head> <style> /* Fondo blanco */ body { background-color:hsl(0, 0%, 70%); } .Tab { margin-left:20px; } /* Controles del tipo slider */ #Rango_H, #Rango_S, #Rango_L { height:12px; max-width:100px } /* Marco donde se ubican los controles */ .Marco { display:inline-block; background-color:hsl(0, 0%, 90%); border:1px dashed hsl(0, 0%, 50%); padding:4px; } /* Etiquetas para mostrar los valores RGB */ #Valor_H, #Valor_S, #Valor_L { display:inline-block; width:50px; } </style> <script type="text/javascript"> function ActualizarColor() { /* Obtengo los valores */ var H = document.getElementById("Rango_H").value; var S = document.getElementById("Rango_S").value; var L = document.getElementById("Rango_L").value; /* Asigno los valores a las etiquetas */ document.getElementById("Valor_H").innerHTML = H + " º"; document.getElementById("Valor_S").innerHTML = S + " %"; document.getElementById("Valor_L").innerHTML = L + " %"; /* Asigno el color del fondo utilizando los valores */ document.body.style.backgroundColor = "hsl(" + H + "," + S + "% ," + L + "%)"; } </script> </head> <body> <div class='Marco'> <code>body {</code><br /> <div class='Tab'> <code>background-color:hsl(</code> <div class='Tab'> <code id='Valor_H' title='Matriz'>0</code> <input id='Rango_H' type="range" min="0" max="360" value="0" title='Matriz' onmousemove="ActualizarColor()"> <code>,</code> </div> <div class='Tab'> <code id='Valor_S' title='Saturación'>0 %</code> <input id='Rango_S' type="range" min="0" max="100" value="0" title='Saturación' onmousemove="ActualizarColor()"> <code>,</code> </div> <div class='Tab'> <code id='Valor_L' title='Luminosidad'>70 %</code> <input id='Rango_L' type="range" min="0" max="100" value="70" title='Luminosidad' onmousemove="ActualizarColor()"> </div> <code>);</code> </div> <code> }</code> </div> </body> </html> Actualización en 5sEsc para cancelar Alt+A para actualizar