Colors and Colormaps¶
This page covers practical usage: picking colors, mixing them, interpolating gradients, and using colormaps. For full visual catalogs of every palette and colormap, see the Color System reference.
Named colors¶
dartwork-mpl ships its own curated palette — dc.* (“dartwork color”)
— and registers six third-party design systems alongside it for
cross-team consistency. Use any of them anywhere matplotlib accepts a
color.
Prefix |
Library |
Example |
|---|---|---|
|
dartwork Color (recommended) — 8 mood palettes ( |
|
|
Alias of |
|
|
OpenColor |
|
|
Tailwind CSS |
|
|
Material Design |
|
|
Ant Design |
|
|
Chakra UI |
|
|
Primer (GitHub) |
|
Start with
dc.*for new figures — the palettes are tuned for publication-ready output. Reach for the third-party prefixes when you need to match an external brand or design system.The
dc.*namespace also holds 100+ curated colormaps — see the Colormap catalog. Colormap names likedc.deep_seaonly work ascmap=arguments, not ascolor=strings; the named-colors above are the ones you pass tocolor=.
import matplotlib.pyplot as plt
import dartwork_mpl as dm
dm.style.use("presentation")
fig, ax = plt.subplots(figsize=dm.figsize("8cm", "wide"))
ax.plot([0, 1, 2], [1, 2, 1.5], marker="o", color="dc.forest2", label="dc.forest2")
ax.plot([0, 1, 2], [1.2, 1.6, 2.1], marker="s", color="dc.ocean3", label="dc.ocean3")
highlight = dm.mix_colors("dc.sunset1", "white", alpha=0.45)
ax.fill_between([0, 1, 2], 0.9, 1.3, color=highlight, label="Mixed shade")
muted_line = dm.pseudo_alpha("dc.cyber3", alpha=0.65, background="white")
ax.plot([0, 1, 2], [0.8, 1.1, 1.4], color=muted_line, label="Pseudo alpha")
ax.legend()
dm.simple_layout(fig)
Interactive palette picker — try one click before committing¶
Pick a palette below and the demo chart re-renders with that
prop_cycle. Swatch chips show the actual hex values you’d get; the
tabs group palettes by namespace (dc.* first, then the third-party
design systems). The bar plot’s data and labels are byte-identical
across every render — only axes.prop_cycle changes.
Loading palette demos…
Once you’ve picked one, apply it in your own script:
import matplotlib as mpl
from cycler import cycler
dm.style.use("report") # base preset (font, line widths, spines, ...)
mpl.rcParams["axes.prop_cycle"] = cycler(color=[
"dc.ocean3", "dc.ocean1", "dc.ocean5",
"dc.ocean0", "dc.ocean2", "dc.ocean4",
])
Picking a dc.* swatch¶
The eight families are tuned to evoke different moods, so the family name is usually a good first filter. Inside each family the index is a lightness ramp from 0 (light) → 5 (dark):
Family |
Use it for |
|---|---|
|
Cool blue primaries — line charts, sequential data, default brand color |
|
Cool greens — comparison series, “good”/positive states |
|
Warm accents — call-outs, highlights, alerts that aren’t alarming |
|
Saturated brand colors — high-contrast primary lines, headlines |
|
Magenta / purple — secondary brand color, contrast against ocean |
|
Warm earth tones — segmentations with low-key palette intent |
|
Neutrals / muted — grid lines, baselines, secondary text, fills |
|
Saturated playful set — categorical data with 4–6 distinct groups |
Coming from oc.*? A rough drop-in mapping:
If you were reaching for… |
Try… |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Color class¶
For most plots, named color strings like "dc.ocean3" are all you need. When
you need to programmatically adjust hue, saturation, or lightness — or
interpolate between colors in a perceptually uniform space — use the Color
class:
import dartwork_mpl as dm
color = dm.oklch(0.7, 0.15, 150) # OKLCH (L, C, h°)
color.oklch.C *= 1.2 # boost chroma in-place
print(color.to_hex()) # '#...'
→ Full guide: Color Space & Manipulation — constructors, views, interpolation, and custom colormaps.
Exploring Available Colors¶
dartwork-mpl provides utilities to discover and explore available color palettes:
import dartwork_mpl as dm
# List all discrete color palettes
palettes = dm.list_palettes()
print(palettes[:5]) # ['dc.vivid', 'oc.blue', 'oc.red', 'tw.emerald', ...]
# List all colormaps
cmaps = dm.list_colormaps()
print(cmaps[:5]) # ['dc.deep_sea', 'dc.forest', 'dc.sunset', ...]
# Preview a specific palette
dm.show_palette('oc.blue') # Shows all shades: blue0, blue1, ..., blue9
# Visualize multiple palettes at once
dm.plot_colors(['oc.blue', 'tw.emerald', 'md.purple'])
# Visualize colormaps
dm.plot_colormaps(['dc.deep_sea', 'dc.forest'])
# Classify a colormap by type
cmap_type = dm.classify_colormap('viridis')
print(cmap_type) # 'sequential'
Color interpolation¶
import dartwork_mpl as dm
# Perceptual interpolation between colors (OKLCH by default)
palette = dm.cspace('#FF6B6B', '#4ECDC4', n=5, space='oklch')
for i, c in enumerate(palette):
ax.bar(i, 1, color=c.to_hex())
# Also supports 'oklab' and 'rgb' spaces
gradient = dm.cspace(dm.color('dc.vivid1'), dm.color('dc.ocean3'), n=10)
Why OKLCH matters: Interpolating in RGB produces muddy, desaturated midtones. OKLCH maintains perceptual uniformity — every step looks equally spaced to the human eye:
Colormaps¶
dartwork-mpl bundles custom colormaps prefixed with dc. — curated for
perceptually uniform gradients. They work like any matplotlib colormap:
import matplotlib.pyplot as plt
import dartwork_mpl as dm
cmap = plt.colormaps["dc.deep_sea"]
print(cmap.name) # 'dc.deep_sea'
print(dm.classify_colormap(cmap)) # 'sequential' (tells you the type)
Add _r to reverse any colormap (e.g., dc.sunset_r). Browse all available
colormaps on the Colormaps page.
Where things live¶
Color sources:
asset/color/*.txt+ Tailwind/Material/Ant/Chakra/Primer/opencolor JSONPalette/colormap previews: Color System
API functions: Color Utilities and Visualization Tools