DEV Community

Cover image for Two ways to generate random color - Daily JavaScript #5
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

Two ways to generate random color - Daily JavaScript #5

#javascript #node #webdev

Why not make your own color generator 🌈?

Method 1 - Long method 

// Generate random color in hex format
const randomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
Enter fullscreen mode Exit fullscreen mode

Method 2 - Short and Best Method 

const randomColor = Math.floor(Math.random()*16777215).toString(16);
console.log("#" + randomColor)
Enter fullscreen mode Exit fullscreen mode

Thank you for reading, have a nice day!

Top comments (1)

Collapse
 
lionelrowe profile image
lionel-rowe • • Edited

Interesting that so many random color solutions suffer from the same off-by-one error (I left the same comment on the post Our favorite javascript one-liners):

const randomColor = Math.floor(Math.random()*16777215).toString(16);

16777215 == 0xffffff, which is the max "value" for a hex color; however, Math.floor(Math.random() * n) gives integers in the range 0..(n - 1), not 0..n. For example, Math.floor(Math.random() * 2) will always give 0 or 1, never 2.

If you want to have the possibility of ever generating pure white (0xffffff), you instead need to use a multiplier of 0xffffff + 1:

const randomColor = Math.floor(Math.random() * 0x1000000).toString(16);
// equivalent to...
const randomColor = Math.floor(Math.random() * (0xffffff + 1)).toString(16);
// equivalent to...
const randomColor = Math.floor(Math.random() * 16777216).toString(16);
Enter fullscreen mode Exit fullscreen mode

Read next

hanzla-baig profile image

How to Build a Advanced Portfolio with High-Level Features and Cutting-Edge Technologies for Web Developers and Designers 🚀🌟

Hanzla Baig -

elafella profile image

A discussion platform for developers

ElaFella -

bregwin profile image

Testing Troubles with Jest & ESM and how to fix it

Bregwin Jogi -

ashwinkumar0505 profile image

Convert Image to Code : Speed Up Your UI Development with The Snap Code

Ashwin kumar -