Here’s a quicky (there is a PHP version too):
var randomColor = Math.floor(Math.random()*16777215).toString(16);
See the Pen
Generate New Random Hex Color with JavaScript by Chris Coyier (@chriscoyier)
on CodePen.
If you’d prefer they are a bit more pleasing or need to generator colors that work together, we have an article about that.
Sometimes script make wrong string, 5 chars only.
This should fix this problem, (it is also more readable).
‘#’+(Math.random()*0xFFFFFF<<0).toString(16);
The formula is incorrect. here is a corrected version:
var x=Math.round(0xffffff * Math.random()).toString(16);
var y=(6-x.length);
var z=”000000″;
var z1 = z.substring(0,y);
var color= “#” + z1 + x;
This way if the length of the Hex number is too short, the appropriate number of zeros are added to the beginning and you don’t get any illegal values for color.
‘#’ + (Math.floor(Math.random() * 2 ** 24)).toString(16).padStart(0, 6)
const randomColor = Math.floor(Math.random() * 2 ** 24).toString(16).padStart(6, “0”);
Hi all sorry to be dense but how do I integrate this into CSS code as the example has done?
Many thanks,
Andrew.
Just randomize a character from the arrayed string “0123456789ABCDEF” three or six times then join the resulting string to create a valid hex color code all the time.
felt inspired for something small but fun.
Your code didn’t work for me so I rewrote it for fun
and then I realized it didnt work because the preview escapes less than signs :/
Oh well. Awesome Idea :)
A function you could use is this:
There is a preview of it here, just click the button:
http://sweb1.dmit.nait.ca/~bkoepke1/Random%20Colour%20Generator/
because you using floor , you will never get the last value of FFFFFF
Math.random()*16777215
How could I use this function to set a value in my CSS file?
I created a a file called randomcolor.js
var @randomColor = Math.floor(Math.random()*16777215).toString(16);
and then in my variables.less file I tried
@adjacent-color: ‘#’ + @randomColor
I also just tried doing
@adjacent-color: ‘#’+(Math.random()*0xFFFFFF<<0).toString(16);
But you’re doing it with script. This is “CSS-tricks.com”, right? Not Javascript tricks or PHP tricks!
What I want to know is, how can you put the random number into the CSS file?
eg:
{
font-family:sans-serif;
font-size:2em;
color: white;
background-color: (random number generator here);
}
Even better would be to incorporate transitions/transforms and you could have constantly changing background colours purely done within CSS – no script necessary!
Please update the code with https://css-tricks.com/snippets/javascript/random-hex-color/#comment-192864
That works in the all cases
can somebody help to get the code into joomla application? i have no idea of javascript :-)
thanks
Oh! Please! I stumbled upon this and I need it!
I want to make the menu items automatically change color so they draw the visitor’s attention.
Ideally I could set hex values, transition speed and intervals. An added bonus would be having each menu item change color sequentially.
E.g.: speed: 15ms, fff=5000ms, ff0=250ms, fcf=250ms, f90=250ms
Wow! Please help?
‘#’ + Math.random().toString(16).slice(2, 8).toUpperCase();
It is enough to use the following limits for random numbers,
so that the hexa result will always be 6 characters long: …
const min = Math.pow(2, 20);
const max = Math.pow(2, 24) – 1;
const color = Math.floor(Math.random() * ( max – min + 1 )) + min;
The last used random() routine is “Math.random.integer()” in my codes. ;-)
My mistake … min = 0; and color.padStart(6, ‘0’); ..
function generateColor () {
return
#${Array.from({ length: 6 }, () => randomItem(colorValues)).join('')}
;}
thanks for this, i simplified it a bit using 8⁸, which is easier for me to remember than the set of digits:
Math.floor(Math.random()*8**8).toString(16);
This is awesome!