CODEWITHSUNDEEP
javascriptcolors
blt187
blt187

Reputation: 31

script to randomly change background gradient colors [but from specific range]

I found this neat script that randomly changes background gradient colors.
I would like to ask, how can I narrow spectrum of colors - I would like it to use only shades of yellow and orange.
Thanks in advance :)




function newGradient() {
  var c1 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  var c2 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')';
  c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')';
  return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')';
}

function rollBg() {
  $('.bg.hidden').css('background', newGradient());
  $('.bg').toggleClass('hidden');
}

Upvotes: 2

Views: 4231

Answers (3)

torox
torox

Reputation: 490

Here's a way using hsl -

function getRndInRange(fromAngle, toAngle) {
    var angle = fromAngle + toAngle * Math.random();
    return "hsl(" + angle + ", 75%, 50%)";
}

Upvotes: 0

Michael Schwartz
Michael Schwartz

Reputation: 8425

Weave: http://kodeweave.sourceforge.net/editor/#a50f32b869502470d39e0fadaeb655c4

BTW: kodeWeave comes with a built in color picker that works with hex, rgb and hsl.

This method uses hex codes instead to keep the code DRY.

function newGradient() {
  var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16),
      randomColor2 = "#" + Math.floor(Math.random()*16777215).toString(16);
  return 'radial-gradient(at top left, '+randomColor1+', '+randomColor2+')'
}

setInterval(function() {
  $('body').css('background', newGradient())
}, 1000)
html, body {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Ronen Ness
Ronen Ness

Reputation: 10740

look here:

var c1 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  var c2 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };

It random two RGB colors from 0 to 255 (max). All you gotta do is change the random values for the color component to be around yellow ranges. Yellow is r=255, g=255, b=0. So you want your output colors to be near these values.

You can search your desired color range by using one of the online rgb color pickers.

For example:

function newGradient() {
  var c1 = {
        r: Math.floor(255),
        g: Math.floor(35+Math.random()*220),
        b: Math.floor(Math.random()*55)
      };
      var c2 = {
        r: Math.floor(255),
        g: Math.floor(35+Math.random()*220),
        b: Math.floor(Math.random()*85)
      };
  c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')';
  c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')';
  return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')';
}

function rollBg() {
  $('body').css('background', newGradient());
  setTimeout(function(){rollBg();}, 1000);
}
rollBg();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>

Play with the ranges and experiment until you get something you like. Just be sure not to get out of the 0-255 range, and remember for yellowish you need height r and g and low b.

Upvotes: 2

Related Questions