Javascript code to convert light wavelength to color

Submitted by ams on Sun, 04/15/2012 - 20:09

In the electromagnetic spectrum illustration and light color, frequency and wavelength post, I needed to calculate color from wavelength value. I tried a few different approaches but finally settled on a modified version of some widely cited FORTRAN code for determining RGB values.

The following illustration shows an updated version of the code in action. The sliders and buttons allow the illustration's appearance to be modified. Save the illustration as a .png file by right clicking.

Right click to save me!

The color values are an approximation. The colors fade on either end of as the wavelengths move beyond the visible range.

The code below shows a function that takes wavelength in nm as a parameter and returns an array containing the rgba value.

  1.     // takes wavelength in nm and returns an rgba value
  2.     function wavelengthToColor(wavelength) {
  3.         var r,
  4.             g,
  5.             b,
  6.             alpha,
  7.             colorSpace,
  8.             wl = wavelength,
  9.             gamma = 1;
  10.  
  11.  
  12.         if (wl >= 380 && wl < 440) {
  13.             R = -1 * (wl - 440) / (440 - 380);
  14.             G = 0;
  15.             B = 1;
  16.        } else if (wl >= 440 && wl < 490) {
  17.            R = 0;
  18.            G = (wl - 440) / (490 - 440);
  19.            B = 1;  
  20.         } else if (wl >= 490 && wl < 510) {
  21.             R = 0;
  22.             G = 1;
  23.             B = -1 * (wl - 510) / (510 - 490);
  24.         } else if (wl >= 510 && wl < 580) {
  25.             R = (wl - 510) / (580 - 510);
  26.             G = 1;
  27.             B = 0;
  28.         } else if (wl >= 580 && wl < 645) {
  29.             R = 1;
  30.             G = -1 * (wl - 645) / (645 - 580);
  31.             B = 0.0;
  32.         } else if (wl >= 645 && wl <= 780) {
  33.             R = 1;
  34.             G = 0;
  35.             B = 0;
  36.         } else {
  37.             R = 0;
  38.             G = 0;
  39.             B = 0;
  40.         }
  41.  
  42.         // intensty is lower at the edges of the visible spectrum.
  43.         if (wl > 780 || wl < 380) {
  44.             alpha = 0;
  45.         } else if (wl > 700) {
  46.             alpha = (780 - wl) / (780 - 700);
  47.         } else if (wl < 420) {
  48.             alpha = (wl - 380) / (420 - 380);
  49.         } else {
  50.             alpha = 1;
  51.         }
  52.  
  53.         colorSpace = ["rgba(" + (R * 100) + "%," + (G * 100) + "%," + (B * 100) + "%, " + alpha + ")", R, G, B, alpha]
  54.  
  55.         // colorSpace is an array with 5 elements.
  56.         // The first element is the complete code as a string.  
  57.         // Use colorSpace[0] as is to display the desired color.  
  58.         // use the last four elements alone or together to access each of the individual r, g, b and a channels.  
  59.        
  60.         return colorSpace;
  61.        
  62.     }


Related Content

Tags:

Comments

Gerald (not verified)

Sun, 12/23/2012 - 09:03

Trying out this approximation to create a line spectrum of Helium gives the results shown in the appended image.

At first the visible results from a digicam (non-linear scale), then the calculated colors (linear scale) using four different sources to obtain spectral data of Helium.

 

 

ams

Wed, 01/02/2013 - 15:39

Gerald,

Thanks for posting the images. It is nice to see someone making use of the code. It is interesting that the data from the four sources differ so much.