Convert JavaScript hex/rgb color to wavelength, and vice versa

Question

I found this code, which goes from wavelength to rgb.

function wavelengthToColor(wavelength) {
  var r,
      g,
      b,
      alpha,
      colorSpace,
      wl = wavelength,
      gamma = 1;


  if (wl >= 380 && wl < 440) {
      R = -1 * (wl - 440) / (440 - 380);
      G = 0;
      B = 1;
 } else if (wl >= 440 && wl < 490) {
     R = 0;
     G = (wl - 440) / (490 - 440);
     B = 1;  
  } else if (wl >= 490 && wl < 510) {
      R = 0;
      G = 1;
      B = -1 * (wl - 510) / (510 - 490);
  } else if (wl >= 510 && wl < 580) {
      R = (wl - 510) / (580 - 510);
      G = 1;
      B = 0;
  } else if (wl >= 580 && wl < 645) {
      R = 1;
      G = -1 * (wl - 645) / (645 - 580);
      B = 0.0;
  } else if (wl >= 645 && wl <= 780) {
      R = 1;
      G = 0;
      B = 0;
  } else {
      R = 0;
      G = 0;
      B = 0;
  }

  // intensty is lower at the edges of the visible spectrum.
  if (wl > 780 || wl < 380) {
      alpha = 0;
  } else if (wl > 700) {
      alpha = (780 - wl) / (780 - 700);
  } else if (wl < 420) {
      alpha = (wl - 380) / (420 - 380);
  } else {
      alpha = 1;
  }

  colorSpace = ["rgba(" + (R * 100) + "%," + (G * 100) + "%," + (B * 100) + "%, " + alpha + ")", R, G, B, alpha]

  // colorSpace is an array with 5 elements.
  // The first element is the complete code as a string.  
  // Use colorSpace[0] as is to display the desired color.  
  // use the last four elements alone or together to access each of the individual r, g, b and a channels.  

  return colorSpace;

}

Then this seems to say it's possible to convert RGB (or for that matter, hex or any other computer color format) to wavelength, but I can't understand/follow the post. Wondering if one could explain/show in JavaScript how to convert, at least to a close approximation, a hex/rgb/hsl/etc. (computer color) value to wavelength in nanometers.

I would like to take a hex color and ultimately find the wavelength(s) for it, and likewise to take a wavelength and find the hex(s) for it.

If it's not possible to do exactly, then any rough approximation would work. I am simply trying to take scientific wavelength values and convert them to hex, and likewise find a rough range of wavelengths for a hex value to display scientific objects of (roughly) that hex color.

Not all colors in the RGB gamut correspond to radiant energy of a particular frequency. — Pointy, Jun 02 '19 at 14:27
What does that even mean, how can I see an RGB color and there not be a wavelength? — Lance, Jun 02 '19 at 14:28
Either way, something that converts even _some_ of them would work in that case. — Lance, Jun 02 '19 at 14:28
@LancePollard Look at the electromagnetic spectrum. There's no purple, for example. What wavelength would black be? Most colors we see are combinations of multiple wavelengths as well as different intensities which cannot be captured in a single wavelength. — MCMastery, Jun 02 '19 at 14:29
For example the color we call "purple". Color-sensitive cells in terrestrial animals respond to different frequency bands, and further "processing" manifests combinations of frequencies as particular experiences (depending of course on the organism involved) — Pointy, Jun 02 '19 at 14:29
Basically *color* is crazy complicated. Highly recommend the book *Catching The Light* by Arthur Zajonc. — Pointy, Jun 02 '19 at 14:31
@LancePollard If you are interested in this you may want to look into the XYZ color space, where the boundary of the color locus is made up of colors that are all wavelengths. — MCMastery, Jun 02 '19 at 14:32
@MCMastery Black would be without light, therefore no wavelength (eg: `0 || false`). — Tgwizman, Aug 16 '20 at 05:43
first of all use as precise wavelength to RGB conversion as you can see [RGB values of visible spectrum](https://stackoverflow.com/a/22681410/2521214) and then simply [approx search](https://stackoverflow.com/a/36163847/2521214) wavelength until difference between normalized original color and generated color is minimal... However as noted RGB color does not have wavelength you just find wavelength which color is closest to your original color. Here similar conversion between color and temperature: [Star B-V color index to apparent RGB color](https://stackoverflow.com/a/22630970/2521214) — Spektre, Sep 22 '22 at 10:43

score 1 · Answer 1 · answered Aug 16 '20 at 05:27

I coded an example of your given color function overlayed on this wikipedia image.

So, your color function isn't quite the real thing. Your solution shouldn't be based on this. However, as for an answer, you would need to split the red, green, and blue channels on the spectrum for each color's wavelength.

This link may give you a better understanding. https://thewayeyeseesit.com/2018/03/23/the-visible-spectrum-rgb-channels-explained/

An image from this web page may give you a better idea of how to structure the splitting functions for each channel.

Also take note that the wavelength input for the given function is reversed, as well as there is a gamma variable that is initialized and remains unused throughout the entire function. — Tgwizman, Aug 16 '20 at 05:34

Convert JavaScript hex/rgb color to wavelength, and vice versa

1 Answers1