The Science and Math of Color and Color Schemes: Hue, Saturation, Lightness
Additive and subtractive color mixing help to describe much of color theory, however these foundations were built around pure or ideal colors. Pure or ideal colors and color schemes work well when discussing general theory, but how do we extend this model to colors that we observe in our everyday? For example, the color green and all its variants that we see in the world exist far beyond just the green perceived in the additive and subtractive color mixing models. Color and color schemes that we observe in the real world extend beyond pure colors and is further described with three additional attributes that all colors possess, hue, saturation and lightness.
Hue, saturation and lightness build upon the existing RGB model and you can easily remember that the world holds true to the RGB model by remembering the rainbow. We know that when all the colors of the rainbow are combined we are left with white light. Thus the way we perceive color in the real world holds true to additive color and the RGB model.
Hue (red, orange, hello, green, blue, purple, etc.)
Hue is one of the main properties of color and describes a colors pure color. Additive color does an excellent job describing how certain hues exist relative to one another and how the combination of those hues yields other pure hues. Hue can be thought of as an extension to older color theories that exist. It doesn’t disprove traditional thinking and theories about color, but allows us to expand on it to build a model that supports all cases.
Saturation describes the intensity or dullness of a hue. Often described as the colorfulness of a hue. Highly saturated colors appear to be very vibrant and intense. Slightly desaturated hues appear pale or subdued, while completely desaturated colors appear gray.
Describes how light or dark a color is with respect to the hue. When a color is at half lightness it is neither tinted or shaded and represents the true hue. Increasing lightness creates more and more tint to a hue until it reaches full lightness and yields white. Decreasing lightness creates a shade that darkens a hue until finally reaching black.
The Science and Math of Color
HSL was created by computer scientist to more easily describe and identify colors. The HSL visual representation of the RGB color model can best be interpreted as a cylinder with coordinates that identify a colors attributes. Hue is described by the angular dimension of the cylinder. You have probably seen this representation online or on your computer when selecting colors.
Red is at 0 degrees, green is at 120 degrees, blue is at 240 degrees, and then the cylinder wraps back around to red again at 360 degrees. All other existing hues beyond red, green and blue sit in between each of these three colors and their respective degrees.
Saturation is represented as the radius of the cylinder. The further out from the center you go, the more saturated a color will appear. The center of the cylinder contains washed out or subdued colors, while the edges of the cylinder contain incredibly vibrant colors. Lastly we have lightness positioned in the very center of the cylinder. The very top of the cylinder contains colors with max tint. The bottom of the cylinder contains colors with max shade and thus at the bottom we have black. every shade of grey between them. The height of the cylinder represents lightness. The bottom of the cylinder is completely black, and the top of the cylinder is completely white.
Color Theory Series
Continue on with this series by reading the next installment, Third Principle of Color Theory: Color Palettes and Color Harmony, or feel free to skip to any of the three principles in the color theory series.
Color Theory: 3 Main Principles to Create Color Palettes
First Principle of Color Theory: Mixing Colors
Second Principle of Color Theory: The Science and Math of Color Schemes
Third Principle of Color Theory: Color Palettes and Color Harmony