html - how to generate all blue color in RGB (javascript)? - Stack Overflow

admin管理员组

文章数量:1289525

I don't really know how RGB color works (I mean what value must be inserted to get certain color).

My problem is, I want to print a doughnut chart (chart.js), but the data length is dynamic (it can be 1 or 3, or 43, or hundreds). So, I want to create a doughnut chart that show all that data where for each data, it show a different color, but only blue color (light blue, dark blue, like gradient) (Example). So far, the code that I found to generate random color is below :

r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

Any suggestion, so that the color only blue one?

I don't really know how RGB color works (I mean what value must be inserted to get certain color).

My problem is, I want to print a doughnut chart (chart.js), but the data length is dynamic (it can be 1 or 3, or 43, or hundreds). So, I want to create a doughnut chart that show all that data where for each data, it show a different color, but only blue color (light blue, dark blue, like gradient) (Example). So far, the code that I found to generate random color is below :

r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

Any suggestion, so that the color only blue one?

• javascript
• html
• colors

Share Improve this question Follow edited Oct 19, 2017 at 10:19 Yudi Chang asked Oct 20, 2015 at 15:00 Yudi ChangYudi Chang 44877 silver badges1717 bronze badges 2

• 4 RGB means "Red Green Blue". The three numbers can range from 0 to 255, where 0 means none of that color and 255 means as much as possible. Pure blue is therefore rgb(0, 0, 255) – Pointy Commented Oct 20, 2015 at 15:01
• 1 As easy as to do a google search for "rgb color generator" colorschemer./online.html. This is susprisingly lack of research since there is PLENTY of information about it – sailens Commented Oct 20, 2015 at 15:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

If you're only aiming for different shades of blue, but you want to create them randomly, you're better off using hsl() colours rather than rgb() colours

Something like this

h = 240;
s = Math.floor(Math.random() * 100);
l = Math.floor(Math.random() * 100);
color = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';

The h stands for hue, which dictates which base colour to start with. It uses a colour wheel to define this, like so

I chose 240 degrees, as a base blue colours

The s chooses a saturation. This goes from 0% to 100%. This is essentially "how blue" is the colour. 100% is the blue at the edge of the colour wheel. 0% is the center of the colour wheel (white)

The l stands for lightness, and is how light or dark is the colour. Standard is set to 50%, if you go lower (min 0%) the shade will get darker. If you go higher (max 100%), then the shade will get lighter.

That would give you a range of blue tones, admittedly a rather broad range, to choose from, instead of a random set of colours

---

All modern browsers support this way of using colours also, depends how far back you want to support as to whether you'll run into issues. Check the link below if you need to support older browsers

http://caniuse./#feat=css3-colors

You can try this:

function randomBlue () {
    return "rgb(0, 0, " + (Math.floor(Math.random() * 255)) + ")";
}

If you mean only the basic blue I agree with @Pointy, just use rgb(0,0,255).

The code is:

// r = Math.floor(Math.random() * 200);
// g = Math.floor(Math.random() * 200);
// b = Math.floor(Math.random() * 200);
r=0;
g=0;
b=255;
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

本文标签： htmlhow to generate all blue color in RGB (javascript)Stack Overflow