EN
JavaScript - generate random hex color
3
points
In this article, we would like to show you how to generate random hex colors using JavaScript.
Quick solution:
function randomColor() {
var result = '';
for (var i = 0; i < 6; ++i) {
var value = Math.floor(16 * Math.random());
result += value.toString(16);
}
return '#' + result;
}
Practical example
In this example, you can see generated color code in hex with preview.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<body>
<pre id="color-code"></pre>
<div id="color-preview" style="width:100px; height:100px"></div>
<script>
function randomColor() {
var result = '';
for (var i = 0; i < 6; ++i) {
var value = Math.floor(16 * Math.random());
result += value.toString(16);
}
return '#' + result;
}
// Usage example:
var colorCode = document.querySelector('#color-code');
var colorPreview = document.querySelector('#color-preview');
var color = randomColor();
colorCode.innerText = color; // sets color code (in hex)
colorPreview.style.background = color; // sets color preview
</script>
</body>
</html>
Alternative solutions
1. The below solution uses predefined digits that compose hex color.
const DIGITS = '0123456789ABCDEF';
function randomColor() {
var result = '';
for (var i = 0; i < 6; ++i) {
var index = Math.floor(16 * Math.random());
result += DIGITS[index];
}
return '#' + result;
}
2. One random number solution
function randomColor() {
var dec = Math.floor(0x1000000 * Math.random()); // 0x1000000 = 0xFFFFFF + 1
var hex = dec.toString(16);
for (var i = hex.length; i < 6; ++i) {
hex = '0' + hex;
}
return '#' + hex;
}