Anatomy of color

Overview of color

How we perceive color

The light we see is composed of many different wavelengths, each contributing to the overall spectrum of visible light. Our eyes are equipped with photoreceptor cells called rods and cones to sense this light. Rods are responsible for detecting the total intensity of light across the visible spectrum, making them crucial for vision in low-light conditions. Cones, on the other hand, are specialized to detect specific ranges of wavelengths, enabling us to perceive different colors. The color we see is determined by the combination of activation levels in the various types of cones, each sensitive to different portions of the spectrum. Together, these photoreceptors are what provides us our visual experience.

How materials are defined

The color that reaches our eyes is determined by a combination of materials that fall into a few general categories.

• Light sources, or emitters, produce light on their own, generating various wavelengths at different intensities.
• Reflectors are materials that reflect different wavelengths of light in varying amounts, and they may possess additional properties that influence the direction and extent of this reflection.
• Transmitters allow light to pass through them but absorb some wavelengths more than others as the light travels through the medium.

Aside from a few uncommon phenomena, most materials can be classified as emitters, reflectors, transmitters, or a combination of these categories.

Light sources

Blackbodies

Daylight

Absorption and reflection

When light hits an object, it can either be absorbed or reflected. The color of the object is determined by the wavelengths of light that are reflected. For example, a red object reflects red light and absorbs all other colors. A white object reflects all colors and a black object absorbs all colors.

CRI Test Colors

Wavelengths of light

Light is a form of electromagnetic radiation. The wavelengths of light determine the color that we see. The visible spectrum of light ranges from 400 to 700 nanometers. Red light has a wavelength of around 700 nm, while blue light has a wavelength of around 400 nm.

The eye and color perception

The human eye has three types of color receptors: red, green, and blue. These receptors are sensitive to different wavelengths of light. When light enters the eye, it is detected by these receptors, which send signals to the brain. The brain then processes these signals to create the perception of color.

How screens display color

Screens use a combination of red, green, and blue pixels to display color. By varying the intensity of these pixels, screens can create a wide range of colors. This is known as the RGB color model.

How we capture color in film and digital cameras

Film and digital cameras capture color using different methods. Film cameras use light-sensitive chemicals to record color, while digital cameras use sensors to detect light. Both types of cameras can capture color accurately, but digital cameras have the advantage of being able to display images instantly.

Appendix: Resources

• Spectra sources
  • Info
  • Fp
  • Lb
  • http://hyperphysics.phy-astr.gsu.edu/hbase/vision/efficacy.html
  • https://data.dtu.dk/articles/dataset/EMPIR_15SIB07_PhotoLED_-_Database_of_LED_product_spectra/12783389/2
  • https://yuhaozhu.com/blog/cmf.html
  • https://cms.cnc-cie.ca/images/documents/CIECNCjoint2015/01_Fairchild_CNC_CIE_USNC_2015.pdf

/**
 * Creates a class names string from the parameters. The parameters can be a string, number,
 * object, or array. Objects will add class names of the keys if the value is truthy. Arrays will
 * be flattened and evaluated as if its contents were directly included as parameters. Null and
 * undefined values will be ignored.
 *
 * @param definitions Definitions of individual classes. Can be a string, number, object, or array.
 * @returns Space separate combined class names.
 */
export const ofClasses = (...definitions: ClassDefinition[]): string => {
  let classNames: string[] = [];

  for (const definition of definitions) {
    if (!definition) {
      continue;
    }

    if (Array.isArray(definition)) {
      const childClassNames = ofClasses(...definition);
      if (childClassNames) {
        classNames.push(childClassNames);
      }
    } else {
      switch (typeof definition) {
        case 'number':
        case 'string':
          classNames.push(`${definition}`);
          break;
        case 'object':
          for (const className in definition) {
            if (
              Object.prototype.hasOwnProperty.call(definition, className) &&
              definition[className]
            ) {
              classNames.push(className);
            }
          }
          break;
      }
    }
  }

  return classNames.join(' ');
};