Master color management and visual styling with Colorcet. Use this skill when selecting appropriate colormaps, creating accessible and colorblind-friendly visualizations, applying consistent themes, or customizing plot aesthetics with perceptually uniform color palettes.
/plugin marketplace add uw-ssec/rse-plugins/plugin install uw-ssec-holoviz-visualization-community-plugins-holoviz-visualization-2@uw-ssec/rse-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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:
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.