Can I pick random color in CSS ?

One-word answer “NO”

You can not do such a thing in CSS because CSS use only for style purpose and not handle any scripting work like Javascript.

So instead of CSS, you can use Javascript for pick random color.


HTML File-

<div id="pick_me"> </div>

Javascript file-

var colors_array = ['red', 'black', 'green'];

var random_color_picker = 
colors_array[Math.floor(Math.random() * colors_array.length)]; 

document.getElementById('pick_me').style.color = 


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


Program Explain-


  • First, create Div with id pick_me


  • First, create an Array and assign some color name
  • Second, create variable and store randomly selected value
  • Third, access div id through getElementById and apply style color


  • You can do the same thing in Jquery
  • Select Id to apply .css” style with a pass above randomly store color value variable name


Final thought you can not pick a random color in CSS

Check- How to generate Fixed-Length Random String a-z-0-9 in PHP