Physci text 10

Spectra and the colors of light

A spectrograph can be made from a Compact Disc and a box, provided one can still get a hold of Compact Discs. 

Traditional colors of the visible spectrum in English: Red Orange Yellow Green Blue Indigo Violet. Indigo was apparently inserted by Newton to have seven colors in the "rainbow" as opposed to six. Indigo may have been chosen as a royal color - an homage to the king of England.

Below red would be near and far infrared heat radiation, microwaves, radio waves, and the electric fields generated by alternating current.

Above violet would be ultraviolet A and B. Ultraviolet B (UVB) can cause sunburn and is thought to contribute to the potential development of skin cancer. Even higher frequencies include x-rays and cosmic rays (cosmic radiation).

What one sees with the human eye is different than what a digital camera can capture. In the above image the cyan band is more prominent than seen with the eye. The human eye sees a significant violet band to the left of the blue which is almost completely missing in this image. 

A continuous spectrum based on hue angles. Note that at the far right the hue angles return to red. The spectrum is theoretically producing the longest wavelengths on the far left. The shortest wavelengths are in the violet and purple range. The reality is that this is being viewed on a screen which is using red, green, and blue phosphors to produce the colors, thus there are only three narrow wavelengths of light being produced. The screen is only emitting red, green, and blue light. The rest of the colors are constructed by the mind.

Continuous versus discrete spectra

Continuous spectra

A rainbow is a continuous spectrum produced by the sun. All of the colors "blur" into the next color, there are no distinctive separations in the colors. The sun produces light as a result of being very hot. Things that produce light by getting hot produce continuous spectra.

Discrete spectrum

A gas discharge tube contains one specific gas. Gases produce discrete spectra. The colors do not blur into each other but are separated by gaps where no color appears. Gases with a small atomic number such as hydrogen and helium clearly show separated spectral lines. The lines are related to the nature of the atomic structure of an atom. Atomic structure is a part of a later chapter in this text.

The colors of light explored using Desmos

Televisions, computer monitors, and cell phones use microscopic colored dots or dashes in just three colors to produce all of the colors. At first this does not make sense - how can three colors make other colors. This works because of the way the human eye operates. To oversimplify, the human eye has receptors for only three colors of light: red, green, and blue. All other colors are constructed in the mind as a result of combinations of red, green, and blue signals from the eye. As a result, screens only need to produce three colors using small enough light emitters to cause the human mind to perceive all of the colors. 

Red Green Blue: The RGB lights that make color

Rainbows are a blend of colors that run from purple to red. Rainbows are caused by refraction and internal reflection in a raindrop. Although the colors blur into each other, rainbows appear to have six distinguishable colors in English: red, orange, yellow, green, blue, and violet. Newton's opinion was that there were seven colors: red, orange, yellow, green, blue, indigo, and violet.

Yet television screens, cell phone screens, and computer monitors can produce all the colors of the rainbow using just three colors of light. All colors can be produced with only three colors of light: red, green, and blue (RGB). Red, green, and blue are called the primary colors of light. In this laboratory we will use HTML code to control the colors of light on a computer monitor.

The screen has millions of sets of tiny picture elements called pixels. Pixel is short for picture element. Each pixel is comprised of three color phosphors, one of each of the primary colors of light: red, green, and blue. Commands to set a particular pixel color are issued as a three digit number. The first digit indicates how bright to make the red phosphors, the second digit indicates how bright to make the green phosphors, and the third digit indicates how bright to make the blue phosphors.

Under the hood computers use binary values made of zeros and ones. These are hard for humans to read and comprehend, so computer programmers use hexadecimal numbers. Hexadecimal numbers are in base 16. Base 16 has digits that run for zero to nine, and then uses the letter A for 10, B for 11, and so on until F for 15. Computers use two hexadecimal digits for pixel control, which means that brightness varies from 00 to FF. In decimal this is from zero to 15 × 16¹ + 15 × 16⁰ which is equal to 255. Thus in decimal format the numbers go from 0 (pixel off) to 255 (pixel on full). Half on would be 128. A quarter on is 64. Three-quarters on is 192. But any number from 0 to 255 can be used.

Using Desmos to specify the RGB values

Desmos uses the following command to generate the RGB color red:

c₁=rgb(255,0,0)

where the first number is the value for the red pixel, the second number is the value for the green pixel, and the third number is the value for the blue pixel. Note that the "rgb" must be LOWERCASE. Desmos will NOT recognize uppercase RGB.

The above command adds a color to the color palette. The use of subscripts allows one to generate more custom colors. To display the color a mathematical equation that uses the color is necessary. A circle is a good shape to use.

x²+y²≤25

produces a filled in circle.

Then use the Edit List gear to set the color of the circle to the new color on the palette.

Choose the new color at the bottom left.

Desmos file for custom color setup.

To change the color, edit only the function in line one.

Here red is off, green is on, and blue is off. The result is a green circle.

The numbers can be any value between 0 and 255, and combinations of numbers can be use to get other colors.

HSV: Hue Saturation Value in Desmos

Another way to describe color is by using a color wheel or color circle. The term hue angle is used when working with a color wheel. On a color wheel the colors are arranged in a circle in the same order that the colors appear in a rainbow. The primary colors of light, red, green, and blue, are spaced evenly around the color wheel. The hues are specified by their angle around the 360° hue wheel.

Desmos file for the above hue angle color wheel.

Red, the first color in the rainbow, is at a color angle (or hue angle) of 0°.
Green is placed one third of the way around the circle at 120°.
Blue is placed two-thirds of the way around the circle at 240°.

Once around a circle is 360° and thus 360° brings one back to red.

Starting from red and moving counter-clockwise on the diagram above are red, orange, yellow, chartreuse, green, spring green, cyan, azure, blue, violet (purple), magenta, rose.

Saturation is how much of a hue is displayed. Zero percent saturation is no color. Zero saturation results in black, grays, or white. The maximum saturation is 1. Saturation is either 0, 1, or a decimal number between 0 and 1.

Value can be thought of as short for brightness Value, how bright the color should be. Zero percent results in black, while 100% produces the brightest color possible.

The color command is hsv for hue, saturation, and value. The command structure is:

c₁=hsv(0,1,1)

The first number is the hue angle on the color wheel. In the above code the angle is zero degrees. Do not enter the ° symbol, just the numeric value of the angle. The second number is the saturation as a number from 0 to 1. The third number is the brightness value as a number from 0 to 1. For the saturation and value, 0 can be thought of as 0% and 1 can be thought of as 100%.

Desmos file demonstrating hue angle, saturation, and value.  Desmos uses angles in the trigonometric sense. 0° is on the positive x-axis and the angles are arranged counter-clockwise from the x-axis. 180° is on the negative x-axis.  Refer also to an rgb and hsv Desmos file using variables on sliders and a Desmos file that converts RGB to HSV.

The primary colors of light are spaced evenly one-third of the way around the color circle with red at 0°, green at 120°, and blue at 240°. Half way in-between are the secondary colors of light yellow at 60°, cyan at 180°, and magenta at 300°. There are six colors called tertiary colors in between the primary and secondary colors including orange, chartreuse, spring green, azure, violet (purple), and rose.

Pastels are subtle in the HSV system. A saturation of 0.3 to 0.5 and a value of 0.7 to 0.9 appear to be necessary to generate pastels.

HSV in Desmos versus HSL used in CSS and HTML web pages

Note that web pages do not use the HSV system, they use a related system called HSL. HSL is Hue angle, Saturation, and Luminosity.  Luminosity refers to how luminous the color appears. This model considers the surface as light emitting. Luminosity runs from 0% black to 100% white. The HSV value of 1 is the same as a luminosity of 50%. Otherwise the two systems are essentially the same. 

The newest variation of HSL is HSLA, where the A stands for "alpha". Alpha specifies the level of transparency for a color. A sample HSLA web page with a Halloween theme. An HSLA color command looks like:

hsla(30,100%,70%,0.55)

where the last number is the transparency. Zero is fully transparent, one is opaque color. Numbers in-between are partially transparent.

HSL (and HSV) have the advantage that color schemes with matching colors can be easily developed by keeping the hue angle the same and varying only the saturation and or the value/luminosity. 

A Desmos graph illustrates the relationship between the color and the hue angle. Desmos uses angles in the trigonometric sense. 0° is on the positive x-axis and the angles are arranged counter-clockwise from the x-axis. 180° is on the negative x-axis. See also rgb and hsv using variables on sliders and a Desmos file that converts RGB to HSV.