How to Create RGB to HEX Converter with JavaScript

How to Create RGB to HEX Converter with JavaScript

How to Create RGB to HEX Converter with JavaScript


 

 

Introduction

In this video, I’ll show you how to create “RGB to HEX Converter” with JavaScript.

You’ll learn:
– How to get values from range inputs.
– How to calculate HEX values.

I created this video because I was always wondering how to generate HEX from RGB.
It was easier than I thought!

Hope this helps 🙂

 
 

Sample Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RGB to HEX Converter</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<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() {
// Get R,G,B values & Convert string into integer.
var r = parseInt(document.getElementById("r").value);
var g = parseInt(document.getElementById("g").value);
var b = parseInt(document.getElementById("b").value);

// Generate color. Example: #20b9ff
var color = "#" + hex(r) + hex(g) + hex(b);

// Change background color and text.
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) {
// Get hexadecimal numbers.
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>

 
 

References

Google Fonts: https://fonts.google.com/

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂