How to calculate the color of the sky with React.js Part 1
You may fear that prolonged interactions with a child will result in them asking you, “why is the sky blue?” Luckily, there are many articles all over the internet that will give you the answer and save you from the embarrassment. The real frightening scenario is if a child with prodigious levels of curiosity asks you for a mathematical model of the sky and how the sky would look if lit up by a red giant.
This series of articles is intended to give an explanation of how the temperature of our local star, the sun, affects the sky’s color, and to introduce people who are familiar with javascript to some physics and vice-versa. I will describe in a follow-up article how you can take this information to make a single page JavaScript application which that implements the calculation presented in this article. Here is what the final result should look like.
Key terminology will be expressed in bold letters the first time that they are introduced. I have chosen this formatting style since these words will have precise meanings that I encourage you to learn.
The Short Why
The sun glows in the same way that a hot electric stove burner does when you turn its temperature all the way up. This kind of glowing is the result of a phenomenon known as blackbody radiation — more on this below. Blackbody radiation emits electromagnetic waves in a characteristic form that depends on temperature. You see light from the sun because the sun emits electromagnetic waves. Some of those electromagnetic waves are what we see as visible light but other kinds of electromagnetic waves emitted as well. These other kinds of waves include benign ultra-high frequency radio waves that are similar to the Wi-Fi signals connecting your devices, and damaging Ultra Violet (UV) waves that can wrinkle your skin.
The above plot shows what the electromagnetic spectrum looks like for blackbody emitters of different temperatures. The surface of the sun is about 5778 Kelvins (K) or 9940 F, so the blue curve in the above plot most matches the profile of what we would expect from the sun. You should notice that the radiance peaks in the visible spectrum — the colorful vertical band on the plot — and that the sun emits all colors of light in the visible spectrum. Colors of light mix in a similar way to colors of paint do. This is why the sun appears to be a single color rather than many.
Here is the punch line
As light travels to your eyes, it bounces off the molecules in the atmosphere and gets scattered. Shorter wavelengths of light are scattered more than longer wavelengths of light, and since blue light is the shortest wavelength in the visible spectrum, it gets scattered the most. The result is that the sky is painted blue, while the rest of the light travels in a relatively straight line that we only see when we look in the vicinity of the sun. That’s why the sky is blue and the sun appears yellow at sunset. A neat consequence of this is that the sun is naturally white in color. You can see this if you ever look at the sun at high enough altitudes.
The Long Why
Here is a more detailed explanation that includes calculations.
Sun and the Atmosphere
Blackbody radiation is an interesting phenomenon that has a lot of history associated with it, and understanding it was essential for the development of quantum mechanics. Physicists figured out the equation for the Spectral Radiance of a blackbody — the plot shown earlier — in the year 1900. The equation for the Spectral Radiance is given below.
The spectral radiance abstractly tells you how much brightness will be observed from light of a given wavelength (λ). You will see a plot below of the measured spectral radiance of the sun at different wavelengths. The blackline overlayed on the plot is the predicted radiance from a blackbody. The curve matches the data fairly well.
Now knowing what light is emitted from the sun and how much, the next step is to model the scattering of the sun’s light off molecules in the Earth’s atmosphere. The Earth’s atmosphere is approximately 78% nitrogen and 21% oxygen. These molecules have a radius equivalent to an angstrom in length. When light interacts with these molecules, it is absorbed and re-emitted in a process called scattering. The type of scattering that describes how visible light interacts with particles of this size is known as Rayleigh scattering. A key feature of Rayleigh scattering is that it is inversely proportional to λ to the fourth power. Only the proportionality is important for calculating the sky’s color, but the full equation is shown to you below for completeness.
Below is an example plot of the spectral radiance of sunlight scattered off a single molecule. The overall height of the distribution will depend on your distance from the scattering molecule and your viewing angle with respect to the molecule. The profile, however, will be the same in all cases, and it is only this shape that is necessary to figure out the sky’s color.
The distribution above is much thinner than the blackbody distribution from which it originates. One thing to notice is that the peak has been shifted to the left and lies at at 305 nm. A conclusion to draw from this graph is: shorter wavelengths are scattered more than longer wavelengths.
Human Color Perception
Now that you have a distribution of the intensity of the sun’s scattered electromagnetic waves, how do you get a color? Your first intuition may be that the observed color is associated with the peak of the distribution, but 305nm is not a wavelength that most humans perceive. Figuring out the true color therefore requires model the response of a typical human’s eye to the entire distribution. This boils down to defining a function or operation that takes a spectral radiance profile and maps it onto a color.
Understanding how to define this function requires some knowledge on human color perception and some color theory. Human’s perceive color through a group of cells in the eye called cones. There are 3 basic types of cone cells that respond to either short (blue), medium (green) or long (red) wavelengths of light. The experiments of Hermann von Helmholtz and Isaac Newton suggest that contributions from each cone are linearly summed and our brain assigns the resulting combination color.
Human color perception was first systematically described by Hermann Grassmann in 1853, who encoded the basic rules into what are now known as Grassmann’s Laws. However, the exact way of determining color response was not standardized until 1931 when the Commission Internationale de l’éclairage (CIE) commissioned work into what is now known as the 1931 CIE color standard. Below is a plot of the color response functions described in the standard.
The color response is done in what is known as XYZ color space. XYZ color space is different from a typical RGB (red, green, blue) space that you may be familiar with. The cone’s response functions in RGB space are shown below.
The XYZ responses are determined empirically, but can be well approximated by the following equations:
where,
The XYZ color space is chosen in such a way that any color can represented by adding the x, y and z values together. Below is a plot of the XYZ color space — you should keep in mind there are colors in this space that cannot be rendered accurately on your monitor’s screen depending on its gamut, so some of the colors shown here are not really what you will see.
The XYZ color values are found by convolving the color response functions with the scattered spectral radiance through integration by,
Once the XYZ values are found, they can be converted to standard RGB (sRGB). You can find the sRGB values from a set of XYZ values via the following transformations and gamma corrections.
If you went through all these steps yourself, you would end up with some RGB values that you can use to display a color on your screen. You should get something like this for a blackbody of the sun’s temperature:
Now that we have this model, we can answer the second part of the initial question and find the color if the sky was illuminated by a red giant? A red giant. The surface of a Red giant is somewhere between 2200 and 3200 Kelvins, so we get colors that range from a light yellow to a light mint cream
Congratulations! You now know why the color of the sky is blue and how to calculate it. I will show you how to implement what we’ve discussed in a follow up article with React.js so that you can make your own single page JavaScript application that will impress those prodigiously curious kids out there.
