Palettes

Use the palette attribute to apply color schemes to charts. Choose from built-in palettes or define custom palettes with label/value matching.

Built-in Palettes

Reference any of these palettes by name using the palette attribute:

Categorical Palettes

Fixed lists of distinct colors. Colors cycle if you have more data elements than palette colors.

default

Balanced, professional colors for most charts
Categorical 10 colors

category10

Classic D3 categorical palette
Categorical 10 colors

pastel

Soft, muted colors for gentle visualizations
Categorical 10 colors

vivid

High saturation colors for maximum impact
Categorical 10 colors

earth

Natural, organic colors inspired by nature
Categorical 10 colors

ocean

Blues and teals inspired by the sea
Categorical 10 colors

colorblind-safe

Optimized for color vision deficiency accessibility
Categorical 8 colors

high-contrast

Maximum visual distinction for accessibility
Categorical 8 colors

Sequential Palettes

Two-color gradients. Colors are interpolated based on the number of data elements.

cool-to-warm

Blue to red gradient, classic temperature scale
Sequential gradient

blues

Light to dark blue gradient
Sequential gradient

greens

Light to dark green gradient
Sequential gradient

reds

Light to dark red gradient
Sequential gradient

purples

Light to dark purple gradient
Sequential gradient

warm

Yellow to red warm gradient
Sequential gradient

cool

Cyan to blue cool gradient
Sequential gradient

sunset

Warm oranges and pinks like a sunset
Sequential gradient

viridis

Perceptually uniform, colorblind-friendly
Sequential gradient

Diverging Palettes

Three-color gradients with a neutral midpoint. Great for data with a meaningful center (e.g., positive/negative).

red-blue

Classic diverging for positive/negative values
Diverging 3-point

brown-teal

Diverging palette for environmental data
Diverging 3-point

purple-orange

Colorblind-friendly diverging palette
Diverging 3-point

Using Built-in Palettes

Add the palette attribute to any chart:

Bar Chart

<dc-chart width="500" height="350" palette="category10">
  <dc-title>Quarterly Sales</dc-title>
  <dc-bar value="10" label="Q1"></dc-bar>
  <dc-bar value="25" label="Q2"></dc-bar>
  <dc-bar value="15" label="Q3"></dc-bar>
  <dc-bar value="40" label="Q4"></dc-bar>
  <dc-legend></dc-legend>
</dc-chart>
Quarterly Sales

Funnel with Gradient

<dc-funnel-chart width="500" height="350" palette="cool-to-warm">
  <dc-title>Sales Funnel</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="80" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>
Sales Funnel

Custom Palettes

Define reusable color schemes with <dc-palette> for label matching and value-range matching:

Label-Based Matching

<dc-palette id="brand-colors">
  <dc-fill label="Revenue" fill="#2563eb"></dc-fill>
  <dc-fill label="Expenses" fill="#dc2626"></dc-fill>
  <dc-fill label="Profit" fill="#16a34a"></dc-fill>
</dc-palette>

<dc-chart palette="brand-colors" width="500" height="350">
  <dc-title>Q4 Financial Summary</dc-title>
  <dc-bar value="120" label="Revenue"></dc-bar>
  <dc-bar value="80" label="Expenses"></dc-bar>
  <dc-bar value="40" label="Profit"></dc-bar>
  <dc-legend></dc-legend>
</dc-chart>
Q4 Financial Summary

Value-Range Matching

<dc-palette id="performance-thresholds">
  <dc-fill max-value="30" fill="#fee2e2"></dc-fill>
  <dc-fill min-value="30" max-value="70" fill="#fef3c7"></dc-fill>
  <dc-fill min-value="70" fill="#dcfce7"></dc-fill>
</dc-palette>

<dc-chart palette="performance-thresholds" width="500" height="350">
  <dc-title>Team Performance Scores</dc-title>
  <dc-bar value="25" label="Team A"></dc-bar>
  <dc-bar value="55" label="Team B"></dc-bar>
  <dc-bar value="85" label="Team C"></dc-bar>
  <dc-bar value="42" label="Team D"></dc-bar>
</dc-chart>
Team Performance Scores

Positive/Negative Values

A common use case for value-range palettes is coloring positive values one color and negative values another:

Profit/Loss Bars

<dc-palette id="pos-neg">
  <dc-fill max-value="0" fill="#F44336"></dc-fill>
  <dc-fill min-value="0" fill="#4CAF50"></dc-fill>
</dc-palette>

<dc-chart palette="pos-neg" width="500" height="350">
  <dc-title>Monthly Profit/Loss</dc-title>
  <dc-bar value="35" label="Jan"></dc-bar>
  <dc-bar value="-20" label="Feb"></dc-bar>
  <dc-bar value="50" label="Mar"></dc-bar>
  <dc-bar value="-10" label="Apr"></dc-bar>
  <dc-bar value="25" label="May"></dc-bar>
  <dc-bar value="-30" label="Jun"></dc-bar>
</dc-chart>
Monthly Profit/Loss

How It Works

The palette uses two <dc-fill> rules with value boundaries at zero:

  • max-value="0" matches any value ≤ 0 (negative values)
  • min-value="0" matches any value ≥ 0 (positive values)

When a bar has a negative value, it matches the first rule and gets red. When positive, it matches the second rule and gets green.

Priority: Value matching takes precedence over label matching, allowing you to override colors based on thresholds.

Color Priority

Colors are resolved in this priority order (highest to lowest):

  1. Element-level — fill or stroke on individual elements (see Element Colors)
  2. Custom palette value match — min-value/max-value from custom palette
  3. Custom palette label match — label from custom palette
  4. Palette by index — Built-in or custom palette colors applied in order
  5. Auto-generated — Golden ratio algorithm when nothing else specified

User-defined <dc-palette> elements take precedence over built-in palettes with the same name.