Javascript color gradient

by

I created a JS library, RainbowVis-JS to solve this general problem. You just have to set the number of items using setNumberRange and set the start and end colour using setSpectrum. Then you get the hex colour code with colourAt.

var numberOfItems = 8;
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('red', 'black');
var s="";
for (var i = 1; i <= numberOfItems; i++) {
    var hexColour = rainbow.colourAt(i);
    s += '#' + hexColour + ', ';
}
document.write(s); 
// gives:
// #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000,

You are welcome to look at the library’s source code. 🙂

More Related Contents:

  1. RGB to hex and hex to RGB
  2. How to get hex color value rather than RGB value?
  3. JS function to calculate complementary colour?
  4. Why doesn’t this Javascript RGB to HSL code work?
  5. How to read with JavaScript [closed]
  6. Javascript Commenting not working. Cannot comment out a comment?
  7. Random color generator
  8. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  9. Javascript function to convert color names to hex codes
  10. Javascript convert HSB/HSV color to RGB accurately
  11. JavaScript eyedropper (tell color of pixel under mouse cursor)
  12. How do you get the hue of a #xxxxxx colour?
  13. convert Hsl to rgb and hex
  14. Background-color hex to JavaScript variable
  15. Convert RGB to RGBA over white
  16. How can I generate the opposite color according to current color?
  17. Convert Hex to RGBA
  18. Mixing two colors “naturally” in javascript
  19. RGB to HSV color in javascript? [closed]
  20. Convert HSB/HSV color to HSL
  21. regex javascript to match both RGB and RGBA
  22. Angle gradient in canvas
  23. Create a hexadecimal colour based on a string with JavaScript
  24. Generate colors between red and green for an input range [duplicate]
  25. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  26. Generating gradients programmatically?
  27. Javascript Regular Expression for rgb values
  28. Chart.js Line, different fill color for negative point
  29. Change text color with Javascript?
  30. How to check if hex color is “too black”?

Leave a Comment