Getting a random background color in javascript

Question

I am new to java-script . I need to get a random background color whenever i call a particular function.

I found the following code on the web but i don't quite understand how it works.

Code:

function getRandomColor () {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

How is the above code working.I understand how Math.random() works but what does hex.toString(16)).substr(-6) basically signify?

Can some one please clarify it to me how the above code works.

+1 for you for trying to find out how code works instead of blindly pasting it in! — Gabe
– Gabe, Commented Sep 16, 2013 at 5:11

Kiran · Accepted Answer · 2013-09-16 05:19:24Z

20

function getRandomColor () {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

hex.toString(16) converts hex into string number representation in base 16.

Syntax:

number.toString(radix)

radix: Base to use for representing a numeric value. Must be an integer between 2 and 36.

2 - The number will show as a binary value
8 - The number will show as an octal value
16 - The number will show as an hexadecimal value

substr(-6) just takes the last 6 characters, which cuts off the "000000" because they're not part of the last 6 characters.

answered Sep 16, 2013 at 5:19

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WSkid Over a year ago

Actually the '000000'+hex bit is to ensure that you end up with at least 6 characters as #ab is invalid but #0000ab is fine.

zaquest · Accepted Answer · 2013-09-16 05:17:08Z

7

hex.toString(16) converts hex into string number representation in base 16. Then it appends 000000 at the beginning of the string to make sure it will be at least of length 6. and substr(-6) takes last 6 chars of the resulting string. This way you always get # + 6 hex chars. Which represents color.

answered Sep 16, 2013 at 5:17

zaquest

2,05017 silver badges25 bronze badges

1 Comment

choudhury smrutiranjan parida Over a year ago

this link helps more: blog.yoz.sk/2010/06/quick-tip-uint-to-6-digit-rgb-hex

zaf · Accepted Answer · 2013-09-16 05:36:22Z

The code first picks a random number and using the "& 0xFFFFFF" technique it ensures the range is something like 0 to 16777215.

Once we have that random number we convert to hexadecimal using the ".toString(16)" method, the 16 signifying we want hexadecimal conversion.

Now, we can think we have a 6 digit random number in hex to use for our color but know that the ".toString(16)" method does not do any padding for us.

For example, if the random number is 255 which is FF in hex, is not usable as it since it is not precisely 6 digits long.

One technique is to do a string length check and add the corresponding number of 0's to the beginning of the 'FF' to get '0000FF'.

Here we see another technique where you see a fixed number of 0's added to the string and then a fixed length is chopped of the end, ensuring you get 6 digits and correctly padded.

I've always used the string length check or specific padding functions (I don't know if javascript has one) - I only answered the question so as to fully appreciate the technique shown in this question.

Shouvick Paul · Accepted Answer · 2020-03-23 04:20:56Z

-1

/* a complete html page to apply this */
<html>
    <body>

     <button type="button" onclick="setbodybgcolor()">Random Background</button>

         <script>
               function setbodybgcolor(){
                   document.body.style.backgroundColor=getRandomColor ();
               }
               function getRandomColor () {
                       var hex = Math.floor(Math.random() * 0xFFFFFF);
                       return "#" + (hex.toString(16)).substr(-6);
               }
               /* we can do this also
               function setbodybgcolor(){
                     var hex=Math.floor(Math.random()*16777215).toString(16);
                     document.body.style.backgroundColor="#"+hex;
               }*/
         </script>

     </body>
</html>

edited Mar 23, 2020 at 4:20

answered Mar 23, 2020 at 4:14

Shouvick Paul

11 bronze badge

1 Comment

Lasithds Over a year ago

You could create a snippet and post rather than just code, if you want to provide a working solution

Collectives™ on Stack Overflow

Getting a random background color in javascript

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related