V. Color

• One of the most used channels in visualization
• Not a trivival concept: The human interception of visible light spectra
• Subjective: depends on physical (vật lý), physiological (sinh lý học) and psychological (tâm lý học)

Color models/spaces

• Colors being described by three parameters, can be represented in a 3D space

RGB → are not separable in our perception

The most common color space in computer graphics is the system where colors are specified as triples of red, green, and blue values, which is called the RGB system

→ Although this system is computationally convenient, it is a very poor match for the mechanics of how we see.

→ The red, green, and blue axes of the RGB color space are not useful as separable channels

→ They give rise to the integral perception of a color

HSL / HSV → somewhat better for encoding

Another color space, the hue–saturation–lightness or HSL system, is more intuitive and is heavily used by artists and designers

The hue axis captures what we normally think of as pure colors that are not mixed with white or black: red, blue, green, yellow, purple, and so on

The saturation axis is the amount of white mixed with that pure color

The lightness/values axis is the amount of black mixed with a color

<aside> 🎨

Decompose into three channels and map attributes following how we sense

• Ordered

  • Luminance: How bright
  • Saturation: How colorful

  → Luminance and Saturation are magnitude channels ↗️ ****suitable for ordered data, indicating how much of something exists

• Categorial

  • Hue: What color

  → Hue is an identity channel ↗️, used for distinguishing different categories or groups (e.g., red vs. blue for different categories).

</aside>

• Challenges:

  • Luminance is effective for ordered data, but it has limitations in distinguishing noncontiguous regions because of contrast effects.

  • Saturation and hue are not separable channels in small regions, so it’s better to use bright, highly saturated colors for small regions and low-saturation colors (like pastels) for larger areas.

    → For small areas, using only two levels of saturation is recommended.

<aside> 🎨

Summarize

1. What is Color ?
   • One of the mosed used channels in visualization. It is subjective and involves human perception of visible light, influenced by physical, physiological, and psychological factors.
   • Colors are typically represented in spaces like RGB (Red, Green, Blue), but these are not easily separable in human perception. More intuitive models like HSL/HSV (Hue, Saturation, Lightness/Value) are better for encoding data
2. Color channel interactions
   • size heavily affects salience
   • small regions need high saturation
   • large need low saturation
3. Saturation & Luminance:
   • not separable from each other
   • also not separable from transparency
   • 3-4 bins max (if small, separated regions)
   • Many bins (with contiguous regions) </aside>

Colormap/palette

A color map is a function that maps/transforms the values of a scalar value in a color space.

The word palatte is used to define an indexed correspondence of colors.

Categorical colormaps

A categorical colormap uses color to encode categories and groupings.

• Human perception built on relative comparisons
• Surprisingly bad for absolute comparisons
• For noncontiguous small regions of color: 6-12 bins (rules of thumb), including background and highlight
• Colors should be distinctive and named: use cultural conventions & appreciate symbolism; use semantics if available

Ordered colormaps