Guides Colorcet usage for perceptually uniform colormaps, colorblind-safe palettes, and styling in HoloViews, Panel, Bokeh visualizations.
npx claudepluginhub uw-ssec/rse-plugins --plugin holoviz-visualizationThis skill uses the workspace's default tool permissions.
Master color management and visual styling with Colorcet and theme customization. Select appropriate colormaps, create accessible visualizations, and apply consistent application styling.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Master color management and visual styling with Colorcet and theme customization. Select appropriate colormaps, create accessible visualizations, and apply consistent application styling.
Colorcet provides perceptually uniform colormaps designed for scientific visualization:
pip install colorcet
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'])
Sequential: Single hue, increasing intensity
# Blues, greens, reds, grays
data.hvplot('x', 'y', c='value', cmap=cm['cet_blues'])
Diverging: Two hues from center point
# Emphasize positive/negative
data.hvplot('x', 'y', c='value', cmap=cm['cet_coolwarm'])
Categorical: Distinct colors for categories
# Qualitative data
data.hvplot('x', 'y', c='category', cmap=cc.palette['tab10'])
Cyclic: Wraps around for angular data
# Angles, directions, phases
data.hvplot('x', 'y', c='angle', cmap=cm['cet_cyclic_c1'])
See: Colormap Reference for complete catalog
Colorblind-safe palettes:
# 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
| 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 |
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
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
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']
)
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)
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
)
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}
}
)
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='/')
# ✅ 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!
# ✅ 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'])
# ✅ Good: Define color scheme once
COLORS = {
'primary': '#00aa41',
'secondary': '#616161',
'accent': '#ff6f00'
}
# Use throughout application
pn.template.FastListTemplate(accent=COLORS['primary'])
# ✅ Good: Descriptive colorbar
plot.opts(
colorbar=True,
colorbar_opts={'title': 'Temperature (°C)'}
)
# ❌ Bad: No context
plot.opts(colorbar=True)
# For large datasets, limit colormap resolution
plot.opts(
cmap=cm['cet_goertzel'],
color_levels=256 # Reduce if performance issues
)
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'])
)
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'
}
}
# 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())
# ❌ Avoid
cmap='jet', cmap='rainbow'
# ✅ Use
cmap=cm['cet_goertzel'], cmap=cm['cet_fire']
# Ensure extension loaded with design
pn.extension(design='material')
# Check theme setting
print(pn.config.theme) # 'default' or 'dark'
# Reload page after theme change
Resources:
Resources:
Resources:
Colorcet provides perceptually uniform, accessible colormaps for scientific visualization.
Key principles:
Ideal for:
Colormap selection: