DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on • Updated on

Different possible methods for generating a colour randomly in JS

In this post, I will be summarising several possible methods for generating a colour randomly in JavaScript.
So, Save this article !
As you might be aware of how colours are represented, i.e, Hexadecimal code with a '#' prefix --> #RRGGBB
The code for Black --> #000000
and for white --> #ffffff
Hence higher the values, more the colour will be lighter and vice-versa.
Here's the different methods:

  • Method 1 In this approach, simply take a string of all possible hexadecimal characters, then choose from it randomly and concatenate them to form a 6 digit hex code.
const s = "0123456789ABCDEF";
function getRandomColor() 
    let col = "#";
    let temp =0;
    for(let i=0;i<6;++i)
       temp = Math.floor( Math.random() * s.length ); // generates number between 0-15
       col = col + s[temp];
return col;
Enter fullscreen mode Exit fullscreen mode

for generating lighter/Darker colours only, we can use sLight or sDark respectively.

const sLight="789ABCDEF";
const sDark="01234567";
Enter fullscreen mode Exit fullscreen mode
  • Method 2 Similar to the first one but here instead of predefined string, we can use toString(16) to convert to HexaDecimal.
function getRandomColor(){
    let color = "#";
    for(let i=0;i<6;++i)
        color += (Math.floor( Math.random() * 16 ).toString(16) );
    return color;
Enter fullscreen mode Exit fullscreen mode
  • Method 3 We can use the following ES6 approach :
const getRandomHex = from => to => () =>
    Math.floor(Math.random() * (to - from) + from).toString(16);

const getRangedRandomColor = from => to => () =>

const getRandomColor = getRangedRandomColor(0x0)(0xf);
const getRandomColorLight = getRangedRandomColor(0x7)(0xf);
const getRandomColorDark = getRangedRandomColor(0x0)(0x7);
Enter fullscreen mode Exit fullscreen mode

Thanks to @lukeshiru for this one, and you can find the detailed explaination for this in the comments section of my previous article here

  • Method 4
function getRandomColor() {
    function c() {
      var hex = Math.floor(Math.random()*256).toString(16);
      return ("0"+String(hex)).substr(-2); // pad with zero
    return "#"+c()+c()+c();
Enter fullscreen mode Exit fullscreen mode

substr(-2) means take last two characters of the string.

  • Method 5 This one is a great one liner for the same I found on StackOverflow.
function getRandomColor() {
    return '#'+(Math.random().toString(16)+'00000').slice(2,8);
Enter fullscreen mode Exit fullscreen mode

Well these were some of my picks, if you want to dive in more, you can have a look at this thread on StackOverFlow.

You can save this article for future references and comment down your opinions as well !

You can follow me on:

Top comments (2)

rpm profile image
Ryan McCormick • Edited

Not a random color exactly, but here is code I wrote that produces a nice pastel color from any string, and will always be the same for that same string (it actually only uses the first 2 and last letters of the string).

  //--- START Helper Functions ------------------------------------------------\\
  function Colorize(seed = 'AA')
   {//Returns a pastel color based on 1st, 2nd, and Last characters in a string.
    if (seed.length = 0) {seed = 'AA';} else
    if (seed.length = 1) {seed += 'A';}
    r = (seed.charCodeAt(0) * 9).toString(16).slice(-2);
    g = (seed.charCodeAt(1) * 9).toString(16).slice(-2);
    b = (seed.charCodeAt(seed.length-1) * 9).toString(16).slice(-2);
    return '#'+r+g+b;
Enter fullscreen mode Exit fullscreen mode

I use it to color-code categories, even when the user can enter their own categories.

prakhart111 profile image
Prakhar Tandon • Edited

Okay great, well that's the benefit of an active community, you learn everyday!
And your comments just enhance my article thanks for this
and Cheers!