EN
TypeScript - generate random hex color
0 points
In this article, we would like to show you how to generate random hex colors using TypeScript.
Quick solution:
xxxxxxxxxx1
const randomColor = (): string => {2
let result = '';3
for (let i = 0; i < 6; ++i) {4
const value = Math.floor(16 * Math.random());5
result += value.toString(16);6
}7
return '#' + result;8
};
In this example, you can see generated color code in hex with preview.
xxxxxxxxxx1
const randomColor = (): string => {2
let result = '';3
for (let i = 0; i < 6; ++i) {4
const value = Math.floor(16 * Math.random());5
result += value.toString(16);6
}7
return '#' + result;8
};9
10
11
// Usage example:12
13
console.log(randomColor());14
console.log(randomColor());15
console.log(randomColor());Example output:
xxxxxxxxxx1
#d5af2c2
#3963913
#01b8a71. The below solution uses predefined digits that compose hex color.
xxxxxxxxxx1
const DIGITS: string = '0123456789ABCDEF';2
3
const randomColor = (): string => {4
let result = '';5
for (let i = 0; i < 6; ++i) {6
const index = Math.floor(16 * Math.random());7
result += DIGITS[index];8
}9
return '#' + result;10
};11
12
console.log(randomColor());13
console.log(randomColor());14
console.log(randomColor());Example output:
xxxxxxxxxx1
#CCAD032
#15123A3
#EBDE9B2. One random number solution
xxxxxxxxxx1
const randomColor = (): string => {2
const dec = Math.floor(0x1000000 * Math.random()); // 0x1000000 = 0xFFFFFF + 13
let hex = dec.toString(16);4
for (let i = hex.length; i < 6; ++i) {5
hex = '0' + hex;6
}7
return '#' + hex;8
};9
10
console.log(randomColor()); // #c6836211
console.log(randomColor()); // #1c4bcc12
console.log(randomColor()); // #4c2be3Output:
xxxxxxxxxx1
#c683622
#1c4bcc3
#4c2be3