Explore how sequential, diverging, and categorical color scales affect
interpretation and why perceptual uniformity matters.
Overview
Color scales are systematic arrangements of colors used to encode data values in visualizations. The choice of color scale fundamentally affects how viewers interpret and understand data patterns. Effective color scales not only distinguish between data values but also respect human visual perception, ensuring that color differences accurately reflect data differences.
Understanding color scales and perception is crucial for creating visualizations that communicate data accurately and inclusively. Poor color choices can mislead viewers, obscure important patterns, or exclude colorblind users from accessing information.
Types of Color Scales
Color scales fall into three primary categories, each suited to different types of data and analytical purposes:
Sequential Color Scales
Sequential scales use a progression of colors to represent ordered data with a natural sequence from low to high values. They typically progress from light to dark within a single hue, or transition smoothly between related hues.
Characteristics:
Single direction of progression (light to dark, or one hue to another)
Represent continuous or ordered data
Emphasize magnitude and direction of change
Natural interpretation: darker typically means "more"
Best used for:
Population density maps
Temperature data
Sales figures over time
Elevation maps
Any continuous variable with a natural ordering
Examples: Light blue to dark blue for rainfall amounts, white to red for temperature increases, light green to dark green for vegetation density.
Diverging Color Scales
Diverging scales use two sequential scales that meet at a central value, creating a color progression that emphasizes deviations from that center point. They typically use contrasting hues on either side of a neutral midpoint.
Characteristics:
Two opposing color progressions meeting at a central value
Emphasize both direction and magnitude of deviation from center
Center point is often meaningful (zero, average, neutral value)
Both ends typically reach similar visual intensity
Best used for:
Data with a meaningful center point (zero, average, baseline)
Correlation coefficients (-1 to +1)
Temperature anomalies (above/below average)
Political voting patterns (Democrat/Republican)
Financial gains and losses
Examples: Red to white to blue for temperature anomalies, red to yellow to green for performance metrics, purple to white to orange for political affiliations.
Categorical Color Scales
Categorical scales use distinct, unordered colors to represent different categories or groups. Each color is qualitatively different rather than representing a progression.
Characteristics:
Colors are visually distinct but not ordered
No implied ranking or sequence between colors
Maximum visual separation between categories
Limited by the number of distinguishable colors
Best used for:
Nominal data (countries, product types, species)
Qualitative classifications
Group membership
Distinct categories without natural ordering
Examples: Different colors for continents on a world map, unique colors for product categories, distinct hues for political parties.
Perceptual Uniformity
Perceptual uniformity refers to color scales where equal steps in data value correspond to equal perceived differences in color. This principle ensures that the visual representation accurately reflects the underlying data relationships.
Why Perceptual Uniformity Matters:
Accurate Data Interpretation: Without perceptual uniformity, some data differences appear more significant than they actually are, while others appear less significant. This can lead to misinterpretation of patterns and relationships.
Fair Comparison: Perceptually uniform scales ensure that all parts of the data range receive equal visual attention, preventing bias toward certain value ranges.
Quantitative Accuracy: Viewers should be able to make reasonable estimates about data values based on color intensity or position within the scale.
Common Perceptual Issues:
Rainbow Scales: Traditional rainbow color maps (red-yellow-green-blue-purple) are not perceptually uniform. The transition from yellow to green appears much more gradual than the transition from green to blue, creating artificial "jumps" in the data.
RGB-Based Scales: Simple interpolation between RGB color values often creates perceptually uneven progressions because RGB space doesn't match human color perception.
High Contrast Jumps: Abrupt changes in hue, saturation, or brightness can create false impressions of data discontinuities.
Solutions for Perceptual Uniformity:
LAB Color Space: Colors designed in perceptually uniform color spaces (like CIELAB) ensure equal visual steps correspond to equal data steps.
Luminance Progression: Sequential scales that primarily vary luminance (brightness) while maintaining consistent hue and saturation create reliable perceptual progressions.
Tested Color Palettes: Use scientifically tested color scales like those from ColorBrewer, which have been validated for perceptual uniformity and accessibility.
Colorblind Accessibility
Designing color scales can be benefit from considering how different types of colorblindness affect color perception.
Common Types of Color Vision Deficiency:
Deuteranopia/Deuteranomaly: Difficulty distinguishing red and green (most common)
Protanopia/Protanomaly: Reduced sensitivity to red light
Tritanopia/Tritanomaly: Difficulty with blue-yellow distinctions (rare)
Accessible Design Strategies:
Avoid Problematic Combinations: Red-green combinations are particularly problematic for the most common forms of colorblindness.
Use Multiple Encodings: Combine color with other visual elements like patterns, shapes, or text labels.
Test Color Scales: Use colorblind simulation tools to verify that color scales remain effective for colorblind users.
High Contrast: Ensure sufficient contrast between colors, particularly for critical distinctions.
Recommended Approaches: Blue-orange diverging scales work well for most colorblind users, as do single-hue sequential scales with clear luminance progression.
Tip
In Mappica, you can preview how your visualizations appear to users with
different types of color vision deficiency. Use the viewing mode menu to test
Deuteranomaly (Green-Weak), Protanomaly (Red-Weak), Tritanomaly
(Blue-Weak), Deuteranopia (Green-Blind), Protanopia (Red-Blind), and
Tritanopia (Blue-Blind) to ensure your color choices work for all users.
Choosing Appropriate Scales
Consider Your Data Type:
Quantitative with natural zero: Use sequential scales starting from a neutral color
Quantitative with meaningful center: Use diverging scales centered on that value
Qualitative categories: Use categorical scales with maximum color distinction
Ordered categories: Consider sequential scales or categorical with logical color ordering
Consider Your Message:
Emphasize magnitude: Sequential scales work best
Emphasize deviations: Diverging scales highlight differences from normal
Show distinctions: Categorical scales maximize group differentiation
Show relationships: Color scales should support, not distract from, the analytical goal
Consider Your Context:
Print vs. digital: Some colors reproduce differently across media
Audience expertise: Expert audiences may handle more complex color schemes
Cultural context: Color associations vary across cultures
Accessibility requirements: Legal or organizational accessibility standards
Tip
When in doubt, test your color choices with actual users and consider
providing alternative encodings (patterns, labels, etc.) for critical
information.
Implementation in Mappica
Mappica provides several approaches to implementing effective color scales:
Predefined Gradients: Mappica includes scientifically tested color gradients from ColorBrewer and D3's Scale Chromatic module, which are designed for perceptual uniformity and accessibility.
Custom Gradients: For specific branding or analytical needs, you can create custom color progressions while following perceptual uniformity principles.
Categorical Color Assignment: For categorical data, Mappica allows manual color assignment or AI-powered color generation that considers semantic meaning and contrast requirements.
Color Scale Transformations: Linear, discrete, logarithmic, and other mathematical transformations can be applied to better match color progression to data distribution patterns.
Accessibility Features: Built-in colorblind simulation and high-contrast options help ensure your visualizations work for all users.
Understanding color scales and perception enables you to make informed decisions about color use in data visualization, ensuring your visualizations accurately communicate data patterns while remaining accessible and interpretable to diverse audiences.