UI & Data Visualization

UI color scale

A sequence of colors used for a variety of elements in a user interface, such as text, icons, interactive elements, states, and decoration.

Color themes usually consist of multiple UI color scales.

Sequence of tints and shades from yellow-orange, to orange, to deep red. Two columns of buttons display examples of interaction states for a light yellow button and dark orange button. Each state shows a different color from the UI color scale.

How it affects UI design

UI color scales need to provide options that meet or exceed WCAG 1.4.3 (contrast minimum).

When creating color scales, interpolating in various color spaces will result in different colors or appearance. Use a color appearance model if trying to make your color scale perceptually balanced.

Sources:

  1. John Gage (1999). Color and Meaning: Art, Science, and Symbolism. University of California Press. Pages 17, 19