Случайный цвет

$(document).ready(function () {
  var back = ["#ff0000","blue","gray"];
  var rand = back[Math.floor(Math.random() * back.length)];
  $('div').css('background',rand);
});

CSS:

div {
    width:200px;
    height:200px;
    background:red;
}

При прокрутке страницы

jQuery:

$(document).ready(function () {
    $(window).scroll(function () {
        var back = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#f1c40f", "#e67e22", "#e67e22"];
        var rand = back[Math.floor(Math.random() * back.length)];
        console.log(rand);
        if ($(document).scrollTop() === 0) {
            $('#header_nav').removeClass('tiny');
            $('#header_nav').css('background', rand);

        } else {
            $('#header_nav').addClass('tiny');
            $('#header_nav').css('background', rand);

        }
    });

    $(window).scroll(function () {
        if ($(document).scrollTop() === 0) {
            $('#logo').removeClass('tiny');
        } else {
            $('#logo').addClass('tiny');
        }
    });

    $(window).scroll(function () {
        if ($(document).scrollTop() === 0) {
            $('#menu').removeClass('tiny');
        } else {
            $('#menu').addClass('tiny');
        }
    });
});

HTML:

<div id="header_nav" class="header">T E S T</div><div class="content">Lorem ipsum dolor sit amet</div>

CSS:

.header {
    width:100%;
    height:124px;
    color: #fff;
    position:fixed;
    top:0;
    left:0;
    transition: height 500ms, background 500ms;
    z-index:100;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
}
.header.tiny {
    height:70px;
    background: #aaa;
}
.logo {
    height:95px;
    align:left;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 10+, Firefox on Android */
    filter: gray;
    -webkit-filter: grayscale(100%);
    transition: height 500ms, -webkit-filter 500ms;
}
.logo.tiny {
    height:45px;
    -webkit-filter: grayscale(0%);
}
.content {
    margin-left:auto;
    margin-right:auto;
    width:90%;
    align:center;
    
    position:relative;
    left:0;
    top:100;
}
.menu {
    height:50px;
    margin-top:25px;
    transition: margin-top 500ms;
}
.menu.tiny {
    margin-top:00px;
}

Ещё:

var randomColor = Math.floor(Math.random()*16777215).toString(16);

Ещё

jQuery:

$(function() {
  $("#random_color").click(function() {
    $(".bola").each(function(index) {
      var colorR = Math.floor((Math.random() * 256));
      var colorG = Math.floor((Math.random() * 256));
      var colorB = Math.floor((Math.random() * 256));
      $(this).css("background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")");
    });
  });
});

CSS:

html {
  height: 100%
}
body {
  background-color: #fff;
  height: 100%;
  margin: 0px auto;
  width: 800px;
}
#b0 {
  float: left;
  background-color: #DCDCDC;
  width: 100%;
  height: 100%
}
.linha {
  float: left;
  width: 100%;
  margin-bottom: 10px
}
.bola {
  float: left;
  background-color: #fff;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer
}
.bolaSel {
  border: 2px solid #0000FF;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='b0'>
  <div id='b1'>
    <button id="random_color">Sortear cores</button>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
  </div>
</div>

Вы можете добавить четвертую переменную для установки прозрачности, однако вам нужно использовать «rgba (varR, varG, varR, прозрачность);» вместо общего RGB

Ещё

Используйте этот код Jquery и вызовите colorслучайный цвет.
Пример: var RandColor = color;

var rand = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' ];
var color = '#' + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)];

Random Background color:

jQuery:

window.setInterval(function () {
  var randomColor = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
  $('body').css({
    'background-color': randomColor });
}, 2000);

CSS:

body {
  background-color: #000001;
  transition: 2s;
}

#container {
  text-align: center;
  color: #ffffff;
  font-family: arial, helvetica, sans-serif;
  font-weight: bolder;
  font-size: 120px;
  text-transform: uppercase;
  transition: 1s;
}

HTML:

<div id="container">
  <p>Random Colour<br/> Background</p>
</div>