Colormaps & Styling Skill

Overview

Master color management and visual styling with Colorcet and theme customization. Select appropriate colormaps, create accessible visualizations, and apply consistent application styling.

What is Colorcet?

Colorcet provides perceptually uniform colormaps designed for scientific visualization:

Perceptually uniform: Changes in data correspond to proportional visual changes
Colorblind-friendly: Palettes designed for accessibility
Purpose-built: Specific colormaps for different data types
HoloViz integration: Seamless use across HoloViews, Panel, and Bokeh

Quick Start

Installation

bash

pip install colorcet

Basic Usage

python

import colorcet as cc
from colorcet import cm
import holoviews as hv

hv.extension('bokeh')

# Use a colormap
data.hvplot.scatter('x', 'y', c='value', cmap=cm['cet_goertzel'])

Core Concepts

1. Colormap Categories

Sequential: Single hue, increasing intensity

python

# Blues, greens, reds, grays
data.hvplot('x', 'y', c='value', cmap=cm['cet_blues'])

Diverging: Two hues from center point

python

# Emphasize positive/negative
data.hvplot('x', 'y', c='value', cmap=cm['cet_coolwarm'])

Categorical: Distinct colors for categories

python

# Qualitative data
data.hvplot('x', 'y', c='category', cmap=cc.palette['tab10'])

Cyclic: Wraps around for angular data

python

# Angles, directions, phases
data.hvplot('x', 'y', c='angle', cmap=cm['cet_cyclic_c1'])

See: Colormap Reference for complete catalog

2. Accessibility

Colorblind-safe palettes:

python

# Deuteranopia (red-green)
cmap=cm['cet_d4']

# Protanopia (red-green)
cmap=cm['cet_p3']

# Tritanopia (blue-yellow)
cmap=cm['cet_t10']

# Grayscale-safe
cmap=cm['cet_gray_r']

See: Accessibility Guide for comprehensive guidelines

3. Colormap Selection Guide

Data Type	Recommended Colormap	Example
Single channel (positive)	`cet_blues`, `cet_gray_r`	Temperature, density
Diverging (±)	`cet_coolwarm`, `cet_bwy`	Correlation, anomalies
Categorical	`tab10`, `tab20`	Categories, labels
Angular	`cet_cyclic_c1`	Wind direction, phase
Full spectrum	`cet_goertzel`	General purpose

4. HoloViews Styling

python

import holoviews as hv

# Apply colormap
scatter = hv.Scatter(data, 'x', 'y', vdims=['value']).opts(
    color=hv.dim('value').norm(),
    cmap=cm['cet_goertzel'],
    colorbar=True,
    width=600,
    height=400
)

# Style options
scatter.opts(
    size=5,
    alpha=0.7,
    tools=['hover'],
    title='My Plot'
)

See: HoloViews Styling for advanced customization

5. Panel Themes

python

import panel as pn

# Apply theme
pn.extension(design='material')

# Custom theme
pn.config.theme = 'dark'

# Accent color
template = pn.template.FastListTemplate(
    title='My App',
    accent='#00aa41'
)

See: Panel Themes for theme customization

Common Patterns

Pattern 1: Heatmap with Diverging Colormap

python

import holoviews as hv
from colorcet import cm

heatmap = hv.HeatMap(data, ['x', 'y'], 'value').opts(
    cmap=cm['cet_coolwarm'],
    colorbar=True,
    width=600,
    height=400,
    tools=['hover']
)

Pattern 2: Categorical Color Assignment

python

import panel as pn
from colorcet import palette

categories = ['A', 'B', 'C', 'D']
colors = palette['tab10'][:len(categories)]

color_map = dict(zip(categories, colors))
plot = data.hvplot('x', 'y', c='category', cmap=color_map)

Pattern 3: Consistent App Styling

python

import panel as pn

# Set global theme
pn.extension(design='material')

# Custom CSS
pn.config.raw_css.append("""
.card {
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
""")

# Accent color throughout
accent = '#00aa41'
template = pn.template.FastListTemplate(
    title='My Dashboard',
    accent=accent
)

Pattern 4: Responsive Colorbar

python

from holoviews import opts

plot = data.hvplot.scatter('x', 'y', c='value', cmap=cm['cet_blues']).opts(
    colorbar=True,
    colorbar_opts={
        'title': 'Value',
        'width': 10,
        'ticker': {'desired_num_ticks': 5}
    }
)

Pattern 5: Colorblind-Safe Visualization

python

from colorcet import cm

# Use colorblind-safe diverging palette
plot = data.hvplot('x', 'y', c='value', cmap=cm['cet_d4']).opts(
    title='Colorblind-Safe Visualization',
    width=600,
    height=400
)

# Alternative: Use patterns/hatching
plot.opts(hatch_pattern='/')

Best Practices

1. Match Colormap to Data Type

python

# ✅ Good: Sequential for positive values
temp_plot = data.hvplot(c='temperature', cmap=cm['cet_fire'])

# ✅ Good: Diverging for centered data
correlation = data.hvplot(c='correlation', cmap=cm['cet_coolwarm'])

# ❌ Bad: Rainbow/jet colormap (not perceptually uniform)
bad_plot = data.hvplot(c='value', cmap='jet')  # Avoid!

2. Consider Accessibility

python

# ✅ Good: Colorblind-safe
plot = data.hvplot(c='value', cmap=cm['cet_d4'])

# ✅ Good: Add patterns for print/grayscale
plot.opts(hatch_pattern='/')

# ✅ Good: Test in grayscale
plot.opts(cmap=cm['cet_gray_r'])

3. Consistent Styling

python

# ✅ Good: Define color scheme once
COLORS = {
    'primary': '#00aa41',
    'secondary': '#616161',
    'accent': '#ff6f00'
}

# Use throughout application
pn.template.FastListTemplate(accent=COLORS['primary'])

4. Meaningful Labels

python

# ✅ Good: Descriptive colorbar
plot.opts(
    colorbar=True,
    colorbar_opts={'title': 'Temperature (°C)'}
)

# ❌ Bad: No context
plot.opts(colorbar=True)

5. Performance with Large Data

python

# For large datasets, limit colormap resolution
plot.opts(
    cmap=cm['cet_goertzel'],
    color_levels=256  # Reduce if performance issues
)

Configuration

Global Colormap Defaults

python

import holoviews as hv
from colorcet import cm

# Set default colormap
hv.opts.defaults(
    hv.opts.Image(cmap=cm['cet_goertzel']),
    hv.opts.Scatter(cmap=cm['cet_blues'])
)

Theme Configuration

python

import panel as pn

# Material design
pn.extension(design='material')

# Dark mode
pn.config.theme = 'dark'

# Custom theme JSON
pn.config.theme_json = {
    'palette': {
        'primary': '#00aa41',
        'secondary': '#616161'
    }
}

Troubleshooting

Colormap Not Showing

python

# Check if colormap imported
from colorcet import cm
print(cm['cet_goertzel'])  # Should print colormap

# Verify data range
print(data['value'].min(), data['value'].max())

# Explicit normalization
plot.opts(color=hv.dim('value').norm())

Colors Look Wrong

Issue: Perceptual non-uniformity
Solution: Use Colorcet instead of matplotlib defaults

python

# ❌ Avoid
cmap='jet', cmap='rainbow'

# ✅ Use
cmap=cm['cet_goertzel'], cmap=cm['cet_fire']

Theme Not Applying

python

# Ensure extension loaded with design
pn.extension(design='material')

# Check theme setting
print(pn.config.theme)  # 'default' or 'dark'

# Reload page after theme change

Progressive Learning Path

Level 1: Basics

Install Colorcet
Use basic colormaps
Apply to plots

Resources:

Quick Start (this doc)
Colormap Reference

Level 2: Accessibility

Understand colormap categories
Choose appropriate maps
Test for colorblindness

Resources:

Accessibility Guide

Level 3: Advanced Styling

Customize HoloViews opts
Create custom themes
Consistent branding

Resources:

Additional Resources

Documentation

Colormap Reference - Complete colormap catalog
Accessibility Guide - Colorblind-friendly design
HoloViews Styling - Advanced customization
Panel Themes - Theme and branding

External Links

Use Cases

Scientific Visualization

Temperature maps
Density plots
Correlation matrices
Geospatial data

Data Dashboards

KPI indicators
Time series
Category comparison
Status displays

Accessibility

Colorblind-friendly visualizations
Print-safe graphics
High-contrast displays
Grayscale compatibility

Branding

Corporate colors
Consistent styling
Custom themes
Professional appearance

Summary

Colorcet provides perceptually uniform, accessible colormaps for scientific visualization.

Key principles:

Match colormap to data type
Choose colorblind-safe palettes
Use perceptually uniform maps
Maintain consistent styling
Test accessibility

Ideal for:

Scientific visualizations
Accessible dashboards
Professional applications
Print publications

Colormap selection:

Sequential: Single channel data
Diverging: Centered data (±)
Categorical: Qualitative categories
Cyclic: Angular/periodic data

Related Skills

Data Visualization - HoloViews visualization patterns
Panel Dashboards - Dashboard styling and themes
Plotting Fundamentals - Basic plotting with hvPlot

Search AI Tools

Install this agent skill to your Project

SKILL.md

Colormaps & Styling Skill

Overview

What is Colorcet?

Quick Start

Installation

Basic Usage

Core Concepts

1. Colormap Categories

2. Accessibility

3. Colormap Selection Guide

4. HoloViews Styling

5. Panel Themes

Common Patterns

Pattern 1: Heatmap with Diverging Colormap

Pattern 2: Categorical Color Assignment

Pattern 3: Consistent App Styling

Pattern 4: Responsive Colorbar

Pattern 5: Colorblind-Safe Visualization

Best Practices

1. Match Colormap to Data Type

2. Consider Accessibility

3. Consistent Styling

4. Meaningful Labels

5. Performance with Large Data

Configuration

Global Colormap Defaults

Theme Configuration

Troubleshooting

Colormap Not Showing

Colors Look Wrong

Theme Not Applying

Progressive Learning Path

Level 1: Basics

Level 2: Accessibility

Level 3: Advanced Styling

Additional Resources

Documentation

External Links

Use Cases

Scientific Visualization

Data Dashboards

Accessibility

Branding

Summary

Related Skills