CODEWITHSUNDEEP
htmlcss
Saqib Ali
Saqib Ali

Reputation: 4428

CSS pick a random color from array

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.

Upvotes: 29

Views: 123537

Answers (6)

Francis
Francis

Reputation: 792

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

Upvotes: 0

emrhzc
emrhzc

Reputation: 1480

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)

Upvotes: 1

Jason
Jason

Reputation: 11

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++;
    }
}

Upvotes: 1

user2091947
user2091947

Reputation:

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.

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191729

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>

Upvotes: 65

bdesham
bdesham

Reputation: 16089

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);

Upvotes: 39

Related Questions