An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
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;}
for generating lighter/Darker colours only, we can use sLight or sDark respectively.
const sLight="789ABCDEF";const sDark="01234567";
- Method 2Similar 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;}
- Method 3We can use the following ES6 approach :
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);
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();}
substr(-2) means take last two characters of the string.
- Method 5This one is a great one liner for the same I found on StackOverflow.
function getRandomColor() { return '#'+(Math.random().toString(16)+'00000').slice(2,8);}
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 !
Original Link: https://dev.to/prakhart111/different-possible-methods-for-generating-a-colour-randomly-in-js-3l1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To