How to Create RGB to HEX Converter with JavaScript
Code of index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>RGB to HEX Converter</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<style>
#container{
font-family: 'Inconsolata', monospace;
text-align: center;
width: 800px;
margin: 160px auto;
}
table{
width: 100%;
}
h1{
margin-top: 100px;
font-size: 38px;
}
input[type="range"]{
width: 200px;
height: 50px;
}
</style>
<script>
function changeRange() {
var r = parseInt(document.getElementById('r').value);
var g = parseInt(document.getElementById('g').value);
var b = parseInt(document.getElementById('b').value);
var color = "#" + hex(r) + hex(g) + hex(b);
document.body.style.backgroundColor = color;
document.getElementById("hex-label").innerText = color;
document.getElementById("r-label").innerText = r;
document.getElementById("g-label").innerText = g;
document.getElementById("b-label").innerText = b;
if (r < 100 && g < 100 && b < 100) {
document.getElementById("container").style.color = "white";
}else{
document.getElementById("container").style.color = "black"
}
}
function hex(v) {
var hex = v.toString(16);
if (v < 16) {
hex = "0" + hex;
}
return hex;
}
</script>
</head>
<body>
<div id="container">
<table>
<tr>
<th>Red</th>
<th>Green</th>
<th>Blue</th>
</tr>
<tr>
<td><input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()"></td>
<td><input type="range" min="0" max="255" value="255" id="g" onchange="changeRange()"></td>
<td><input type="range" min="0" max="255" value="255" id="b" onchange="changeRange()"></td>
</tr>
<tr>
<td id="r-label">255</td>
<td id="g-label">255</td>
<td id="b-label">255</td>
</tr>
</table>
<h1 id="hex-label">#ffffff</h1>
</div>
</body>
</html>
Comentarios
Publicar un comentario