← Back to Data Visualization

Carefully crafted color palettes optimized for data visualization. Each scale is designed for specific data types and accessibility requirements, ensuring clear and effective communication.

SequentialDivergingCategoricalSemanticAccessibleColorblind Safe

Heat Map (Sequential)

Categories (Categorical)

Status (Semantic)

Critical
Warning
Healthy

Sequential Blue

sequential

Single hue progression for continuous data

Best for

Heat maps, density plots, single metric intensity

#f0f9ff
#e0f2fe
#bae6fd
#7dd3fc
#38bdf8
#0ea5e9
#0284c7
#0369a1
#075985
HEX Values
1: #f0f9ff
2: #e0f2fe
3: #bae6fd
...and 6 more
CSS Variables
--color-scale-1: #f0f9ff
--color-scale-2: #e0f2fe
--color-scale-3: #bae6fd
...and 6 more
Tailwind Classes
bg-blue-50
bg-blue-100
bg-blue-200
...and 6 more

Diverging Red-Blue

diverging

Two-ended scale with neutral center for data with critical midpoint

Best for

Profit/loss, positive/negative sentiment, temperature anomalies

#b91c1c
#dc2626
#ef4444
#f87171
#f3f4f6
#93c5fd
#60a5fa
#3b82f6
#1d4ed8
HEX Values
1: #b91c1c
2: #dc2626
3: #ef4444
...and 6 more
CSS Variables
--color-scale-1: #b91c1c
--color-scale-2: #dc2626
--color-scale-3: #ef4444
...and 6 more
Tailwind Classes
bg-red-700
bg-red-600
bg-red-500
...and 6 more

Categorical Distinct

categorical

Visually distinct colors for different categories

Best for

Category comparison, pie charts, grouped bar charts

#3b82f6
#10b981
#f59e0b
#ef4444
#8b5cf6
#06b6d4
#84cc16
#f97316
#ec4899
HEX Values
1: #3b82f6
2: #10b981
3: #f59e0b
...and 6 more
CSS Variables
--category-1: #3b82f6
--category-2: #10b981
--category-3: #f59e0b
...and 6 more
Tailwind Classes
bg-blue-500
bg-emerald-500
bg-amber-500
...and 6 more

Traffic Light

semantic

Semantic colors for status and alerts

Best for

Status indicators, alerts, performance ratings

#dc2626
#ea580c
#d97706
#ca8a04
#eab308
#a3a3a3
#65a30d
#16a34a
#059669
HEX Values
1: #dc2626
2: #ea580c
3: #d97706
...and 6 more
CSS Variables
--status-critical: #dc2626
--status-high: #ea580c
--status-warning: #d97706
...and 6 more
Tailwind Classes
bg-red-600
bg-orange-600
bg-amber-600
...and 6 more

Accessible High Contrast

accessible

WCAG AAA compliant colors for accessibility

Best for

Critical interfaces, accessibility compliance, high contrast needs

#000000
#1f2937
#374151
#4b5563
#6b7280
#9ca3af
#d1d5db
#e5e7eb
#ffffff
HEX Values
1: #000000
2: #1f2937
3: #374151
...and 6 more
CSS Variables
--accessible-1: #000000
--accessible-2: #1f2937
--accessible-3: #374151
...and 6 more
Tailwind Classes
bg-black
bg-primary
bg-gray-700
...and 6 more

Viridis (Colorblind Safe)

colorblind safe

Perceptually uniform and colorblind-friendly scale

Best for

Scientific visualization, accessibility-first designs, heat maps

#440154
#482677
#3e4a89
#31688e
#26828e
#1f9e89
#35b779
#6ece58
#b5de2b
HEX Values
1: #440154
2: #482677
3: #3e4a89
...and 6 more
CSS Variables
--viridis-1: #440154
--viridis-2: #482677
--viridis-3: #3e4a89
...and 6 more
Tailwind Classes
bg-purple-900
bg-purple-800
bg-blue-800
...and 6 more

Choosing the Right Scale

Sequential

Use for continuous data, heat maps, intensity visualization

Diverging

Use when data has a meaningful center point (0, average, neutral)

Categorical

Use for distinct categories, no inherent order

Semantic

Use for status, alerts, or universally understood meanings

Accessibility Best Practices

  • • Ensure sufficient contrast ratios (WCAG 2.1 AA: 4.5:1 for text)
  • • Test with color blindness simulators
  • • Don't rely solely on color to convey information
  • • Use patterns, shapes, or labels as secondary indicators
  • • Provide alternative text descriptions for charts
  • • Consider high contrast mode compatibility
:root {
  /* Sequential Blue Scale */
  --color-scale-1: #f0f9ff;
  --color-scale-2: #e0f2fe;
  --color-scale-3: #bae6fd;
  --color-scale-4: #7dd3fc;
  --color-scale-5: #38bdf8;
  --color-scale-6: #0ea5e9;
  --color-scale-7: #0284c7;
  --color-scale-8: #0369a1;
  --color-scale-9: #075985;
}

/* Usage examples */
.heat-map-cell {
  background-color: var(--color-scale-5);
}

.data-point[data-intensity="high"] {
  background-color: var(--color-scale-8);
}

/* Dynamic color assignment */
.chart-element {
  background-color: var(--color-scale-${Math.floor(intensity * 9) + 1});
}

ColorBrewer

Research-based color schemes for maps and charts

colorbrewer2.org

Viz Palette

Color palette generator for data visualization

viz-palette

Accessible Colors

WCAG compliant color palette generator

accessible-colors.com

Coblis

Color blindness simulator for testing palettes

coblis simulator

Chroma.js

JavaScript library for color manipulation

npm install chroma-js

D3 Color Scales

Built-in color scales for D3 visualizations

d3.scaleSequential()