Generate colors between red and green for an input range [duplicate]

by

You’re getting the muddled green because of the way you’re creating your gradient in RBG space. To get a “cleaner” gradient, you can use the HSV model as mentioned in the answer of the question you linked to.

RGB gradient (top) vs HSV (bottom)
top gradient uses RGB, bottom uses HSV

By scaling the H (hue) value between 0 (red) and 120 (green) you’ll get a nice clean transition. However, at the mid point (60) you’ll end up with bright yellow instead of your intended white. You can address this by modifying the S (saturation) value — at 0 saturation, you’ll end up with white (1 gives you full colour saturation.

Here’s a crude example which scales the saturation from 1 to 0 and back to 1 as the input value goes from 0 to 50 to 100 – http://jsfiddle.net/xgJ2e/2/

var hue = Math.floor((100 - val) * 120 / 100);  // go from green to red
var saturation = Math.abs(val - 50)/50;   // fade to white as it approaches 50

p.s. Converting between colour models is easy using jquery-colors, although it’s not too hard to roll your own.

More Related Contents:

  1. How to read with JavaScript [closed]
  2. Javascript Commenting not working. Cannot comment out a comment?
  3. RGB to hex and hex to RGB
  4. jQuery animate backgroundColor
  5. How to get hex color value rather than RGB value?
  6. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  7. Javascript function to convert color names to hex codes
  8. JavaScript eyedropper (tell color of pixel under mouse cursor)
  9. JS function to calculate complementary colour?
  10. How do you get the hue of a #xxxxxx colour?
  11. Javascript color gradient
  12. replace innerHTML in contenteditable div
  13. Convert RGB to RGBA over white
  14. Why doesn’t this Javascript RGB to HSL code work?
  15. How to check if a string is a valid hex color representation?
  16. Mixing two colors “naturally” in javascript
  17. How to get nodes lying inside a range with javascript?
  18. AngularJS multiple expressions concatenating in interpolation with a URL
  19. Is canvas getImageData method machine/browser dependent?
  20. Creating a collapsed range from a pixel position in FF/Webkit
  21. Convert HSB/HSV color to HSL
  22. Javascript: Generate a random number within a range using crypto.getRandomValues
  23. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  24. contenteditable div backspace and deleting text node problems
  25. Clear a selection in Firefox
  26. Chart.js Line, different fill color for negative point
  27. Javascript Highlight Selected Range Button
  28. Change text color with Javascript?
  29. How to check if hex color is “too black”?
  30. Can I use the HTTP range header to load partial files “on purpose”?

Leave a Comment