DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on • Updated on

Random Colour Generator JS

Hey Folks!
Today I came up with this colour generator function.
This can be a really cool projects for newbie developers!
Well as the name suggests, it will randomly assign a new colour to the body of HTML page.
I am sharing my GitHub repository link for the same,which contains these functions in "script.js"
1) getRandomColor()
2) getRandomColorLight()
3) getRandomColorDark()
I would recommend you to have a look at it.

https://github.com/prakhart111/ColorFlipper

Image description

Hope You liked it!
and comment down your way to do the same.
Follow me on:
Twitter : https://twitter.com/PrakharTandon29
GitHub : https://github.com/prakhart111

Discussion (11)

Collapse
lukeshiru profile image
Luke Shiru • Edited on

You could just...

const getRandomHex = from => to => () =>
    Math.floor(Math.random() * (to - from) + from).toString(16);

const getRangedRandomColor = from => to => () =>
    `#${[...Array(6)].map(getRandomHex(from)(to)).join("")}`;

const getRandomColor = getRangedRandomColor(0x0)(0xf);
const getRandomColorLight = getRangedRandomColor(0x7)(0xf);
const getRandomColorDark = getRangedRandomColor(0x0)(0x7);
Enter fullscreen mode Exit fullscreen mode
Collapse
mukul1312 profile image
Mukul1312

Can you please explain this approach, specially getRangedRandomColor function.

Collapse
lukeshiru profile image
Luke Shiru

Sure thing! Here's a version with comments:

// `getRandomHex` is a curried function, that takes `from`,
// then it takes `to` and returns a function that when called
// gives you a random hex number between `from` and `to`
const getRandomHex = from => to => () =>
    // `.toString(16)` converts the number to a hex string
    // so if you had (13).toString(16) it would return "d"
    Math.floor(Math.random() * (to - from) + from).toString(16);

// `getRangedRandomColor` is also a curried function that takes the same `from`
// and then `to`, but this one returns a string of the form "#RRGGBB"
const getRangedRandomColor = from => to => () =>
    // We used template literals for it with the back-ticks: ``
    // We start with a `#`
    `#${
        // Then we create a new array of 6 elements, we need to spread it
        // because being 6 `empty` elements, we can't map over it and
        // when we spread it with `...` it becomes an array of 6 `undefined`
        [...Array(6)]
            // We then map over that array calling `getRandomHex` on every item
            // so we effectively get 6 random hex values
            .map(getRandomHex(from)(to))
            // Join those elements into a single string and tada!
            .join("")
    }`;

// Now because `getRangedRandomColor` is a curried function, calling it here
// with only 2 arguments gives us a function like this: () => "#RRGGBB"
// So `getRandomColor` is a function that gives a color with values from 0 to f
const getRandomColor = getRangedRandomColor(0x0)(0xf);

// `getRandomColorLight` is the same, but from 7 to f
const getRandomColorLight = getRangedRandomColor(0x7)(0xf);

// and `getRandomColorDark` is the same, but from 0 to 7
const getRandomColorDark = getRangedRandomColor(0x0)(0x7);
Enter fullscreen mode Exit fullscreen mode

The key parts is usage of curring (the method of making functions return new functions).

Hope that helps :D

Thread Thread
prakhart111 profile image
Prakhar Tandon Author

Thanks for the precise and nice explaination man, I myself wasn't aware of this ES6 approach.

Thread Thread
mukul1312 profile image
Mukul1312

Thanks @lukeshiru for such a detailed explanation.

Collapse
j471n profile image
Jatin Sharma

You should use s.length instead of 16 in line:8. So you don't have to hardcode.

Collapse
prakhart111 profile image
Prakhar Tandon Author

Yes! thanks for the suggestion:)

Collapse
devfranpr profile image
DevFranPR

It wouldn't be better to randomize 3 numbers from 0 to 255 convert to hex and concat them?

Collapse
prakhart111 profile image
Prakhar Tandon Author

Hey DevFranPR,
Yeah, this one will also work fine.
Actually there are several possible ways to perform this operation, will try to enlist them all in my next article.
Stay Tuned !

Collapse
devfranpr profile image
DevFranPR

Nice! Follow

Thread Thread
prakhart111 profile image
Prakhar Tandon Author

And Share this article !
Connect with me on twitter as well ( link in the post )