CSS pick a random color from array

Question

Is there is a way in CSS to make it pick a random font color from an array? I know I can do this with server side or javascript, but I am wondering if there is pure CSS way to do this.

You can do it with Javascript, but not just CSS. Are you okay with a Javascript answer? — dezman
– dezman, Commented Feb 20, 2013 at 16:16
No you can't. For starters, there is no such thing as array in CSS. — No Results Found
– No Results Found, Commented Feb 20, 2013 at 16:16

Explosion Pills · Accepted Answer · 2013-02-20 16:31:29Z

65

CSS expressions (allowing for dynamic script content via CSS) were abominations cast in the bowels of the hell of inefficiency alongside Web Forms, only ever supported by IE7 and below. But since you asked.

<style>
blink marquee {
   color: expression("rgb(" + Math.floor(Math.random() * 255)
      + "," + Math.floor(Math.random() * 255) + ","
      + Math.floor(Math.random() * 255) + ")");
}
</style>
<blink>
   <marquee>
      color me beautiful
   </marquee>
</blink>

answered Feb 20, 2013 at 16:31

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

5 Comments

abbood Over a year ago

ok is it just me or are people's votes for this question are totallay random? this is the correct answer

empz Over a year ago

@abbood How is this the correct answer if this only works in IE7 and below?

serraosays Over a year ago

That's an accurate description

Alex Cio Over a year ago

I can't really do it with this snippet. <marquee> will lead my Text to float from right to left, but this will also happen without any stylesheet. And there doesn't appear any color...

R Reveley Over a year ago

The marquee was ironic. I can't believe marquees still work.

bdesham · Accepted Answer · 2013-02-20 16:16:21Z

39

This is not possible in CSS, which is firmly deterministic. You could do this with client-side JavaScript, though:

var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('title').style.color = random_color;

If you're using jQuery, the last line could become

$('#title').css('color', random_color);

answered Feb 20, 2013 at 16:16

bdesham

16.2k15 gold badges88 silver badges138 bronze badges

4 Comments

Saqib Ali Over a year ago

Thanks. But I was looking for a pure CSS way. Seems like it is not possible purely with CSS.

abbood Over a year ago

you should prolly mark explosion pills answer as the correct one.. it doesn't makes sense that the incorrect answer (by you own admission) get more votes than the correct one

bdesham Over a year ago

@abbood Explosion Pills's answer is interesting, but: "only ever supported by IE7 and below". It's not a realistic way to solve the OP's problem.

Explosion Pills Over a year ago

I wouldn't suggest using them for IE7 and below to begin with

Community · Accepted Answer · 2014-07-18 22:17:46Z

4

Simple in JavaScript with JQuery.

You could do something like:

var hexArray = ['#hexVal','#hexVal','#hexval', '#hexval']
var randomColor = hexArray[Math.floor(Math.random() * hexArray.length)];

$("#divId").css("color",randomColor); //A class selector would work too

Which would select a new color every time the page refreshes.

edited Jul 18, 2014 at 22:17

CommunityBot

11 silver badge

answered Feb 20, 2013 at 16:21

user2091947

Comments

SuperBiasedMan · Accepted Answer · 2015-05-20 11:01:39Z

This is how I did it.

The first part is a sequential order, element 1 gets color 1 etc.

Then when you are out of colors it will randomize it.

//Specify the class that you want to select
var x = document.getElementsByClassName("ms-webpart-chrome-title");
var i;
var c;

//specify the colors you want to use
var colors = ["#009933", "#006699", "#33cccc", "#99cc00", "#f60"];
var d = colors.length;

for (i = 0; i < x.length; i++){
    while (i < d) {
        c = i;
        var random_color = colors[c];
        x[i].style.borderTopColor = random_color;
        i++;
    }
    while (i >= d) {
        var random_color = colors[Math.floor(Math.random() * colors.length)];
        x[i].style.borderTopColor = random_color;
        i++;
    }
}

emrhzc · Accepted Answer · 2017-03-06 06:07:16Z

1

without using predefined color set, to get a uniformly randomized color function

function randomColor(){
    rc = "#";
    for(i=0;i<6;i++){
        rc += Math.floor(Math.random()*16).toString(16);
    }
    return rc;
}

or inline

"#"+Math.floor(Math.random() * 0x1000000).toString(16)

edited Mar 6, 2017 at 6:07

answered Mar 6, 2017 at 5:59

emrhzc

1,49012 silver badges20 bronze badges

Comments

Francis · Accepted Answer · 2023-03-02 16:08:08Z

If you want to attribute a bunch of colors to a list of items and make it look like they are picked at random, or if you just want to avoid using the same color all the time, you can use the nth-child with mod. For example:

li:nth-child(6n) {  background-color:  rgb(249, 195, 141);}
li:nth-child(6n+1) { background-color:  rgb(173, 255, 173);}
li:nth-child(6n+2) { background-color:  rgb(255, 255, 203);}
li:nth-child(6n+3) { background-color:  rgb(166, 197, 255);}
li:nth-child(6n+4) { background-color:  rgb(244, 197, 242);}
li:nth-child(6n+5) {  background-color:  rgb(255, 174, 178);}

Of course this is not a real mathematical random, but with enough colors compared to the number visible in the page, the reader will lose track, and have an impression close to randomness.

More info here: nth-child with mod (or modulo) operator

Collectives™ on Stack Overflow

CSS pick a random color from array

6 Answers 6

5 Comments

4 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

4 Comments

Comments

Comments

Comments

Comments

Linked

Related