The Color of Sound
Sound and light share the fundamental nature of vibration. And, even though the sounds we can hear have a much lower frequency than light that is visible to us, there is a range of sound frequencies that have corresponding consonant colors.
This page delves into consonant relationships between sound and color and and provides a tool to let you explore their relationship.
If you find any problems or suggestions regarding this page,
please contact me.
Browser Compatibility Note: This tool does function properly on all browsers. It has been tested on these browsers:
- OK - Internet Explorer 9.0.8112.16421, tested 6/14/2011, on Win7 64-bit.
- OK - Google Chrome 12.0.742.91 m, tested 6/14/2011, on Win7 64-bit.
- Fail - Mozilla Firefox 5.0, as reported by D. J. on 6/24/2011.
- OK - Apple The New iPad (third Generation), iOS 5.1, tested 3/18/2012.
by Clint Goss, version 1.02
This calculator lets you specify a note and observe the color that is consonant with that note. “Consonant" means that the color has a frequency that is some number of octaves above the frequency of the sound.
The easiest thing to do is to play with the various inputs, in particular the [+] and [-] buttons, and see how the colors change. The details box shows the internal details of how the calculation was made, and might be interesting for some folks.
Some things to note:
- Changing the temperature or humidity does not affect the color. The color is based on the frequency (determined by the note, the tuning bias, and the A4 pitch reference). However, the temperature and humidity do affect the corresponding wavelength, show in the detail box.
- Error checking on the input is not complete. If you enter an inappropriate entry (such as something other than a number), results can be unpredictable.
For more background information on this calculator, including the folks who contributed to the code base, see the Tools and Calculators Overview page.
Converting Sound to Color
The code above converts the frequency of sound to a frequency of light by doubling the sound frenency (going up one octave each time) until it reaches a frequency in the range of 400-800 THz (400,000,000,000,000 - 800,000,000,000,000 Hz).
That frequency is then coverted into a wavelength of light, using the formula: wavelength = speedOfLight / frequency. The speed of light that is used is the observed speed of light in a vacuum (299,792,458 m/sec).
I believe that this is a reasonable approach, even though we are not playing these sounds in a vacuum. The code for rendering colors (see below) is based on this same constant for speed of light; When looking at resonance, I believe that it is really the frequency of the sound and light that we want to match, not the wavelength.
Rendering Colors of Light
To display a particular wavelength of light on HTML Web pages is problematic.
Colors of light are pure frequencies that our eyes perceive as a single color. The RGB (red, green, blue) color system used by HTML and as displayed on most color monitors uses a blend of three pure light sources (a red gun, a green gun, and a blue gun, in the case of the older CRT displays) to create the impression of a single color to our eyes. In the RGB system our eyes perceive some colors that do not exist as pure colors of the spectrum, such as pink and white. These colors are blends of multiple colors from the pure spectum. The RGB color model is called an “additive" color system, because it is adding colors together to render a percieved color.
To render pure colors as RGB, I have used this table from [Bruno 2006], page 2:
A description of this rendering is provided on the Wikimedia page for this image, and the code that generated this image is available at this code page.
If you print these color renditions, the problematic problems of color rendition are compounded. Most printers use yet another color model, CMYK (Cyan, Magenta, Yellow, Black). Not only are the RGB colors converted to CMYK colors somewhere along the path from web page to printer, but the printer color model is a “subtractive” model - the paper starts out white and material is tossed onto the page to make it darker.
So, the bottom line is, the color renditions used on Flutopedia for color rendering of wavelengths of light are, at best, a “good try” at displaying colors, but should not be used for work that calls for a more serious treatment.
Converting RGB Colors to Color Frequencies
I've been asked about the possibility of converting an RGB color into a frequency of light. This poses some issues. As part of the pitch-to-color calculator, we’re mapping one number (frequency) onto three numbers (R, G, and B). But we’re not producing all possible combinations of R, G, and B … just some of them. That means that, if you pick an arbitrary R, G, and B, it might not have any frequency that (in my algorithm) would have generated that RGB.
An analogy could be made to drawing a line on a map. Each point on the line can be identified by its distance from the start of the line, and each point on the line has an X,Y coordinate on the map. However, each X,Y coordinate on the map does not have a position on the line.
Another way to look at this is … consider the rainbow. Can you find brown in it? Not really. But there’s brown in RGB space.
October 9, 2012
- Added a note about the issues of converting RGB colors to frequencies.
Version 1.02 - December 12, 2010
- Overhaul to improve colors, fix black colors, and add onChange() events to all inputs.
Version 1.01 - December 11, 2010