Data Visualization Colors with Tailwind CSS - Tailwind CSS Tutorial

intermediate10 min readbest-practice

Choosing Chart Colors

Data visualization requires colors that are distinct from each other, color-blind safe, and consistent in perceived brightness. Pick from different hue families rather than adjacent shades of the same color.

Recommended Chart Palette

// A color-blind-safe chart palette from Tailwind colors
const chartColors = [
  '#3b82f6', // blue-500
  '#f59e0b', // amber-500
  '#10b981', // emerald-500
  '#8b5cf6', // violet-500
  '#ec4899', // pink-500
  '#06b6d4', // cyan-500
  '#f97316', // orange-500
  '#6366f1', // indigo-500
];

// Lighter versions for area fills
const chartFills = chartColors.map(c => `${c}33`); // 20% opacity

Semantic Colors for Data

Positive trends: emerald-500 for growth, profit, upward movement
Negative trends: red-500 for loss, decline, downward movement
Neutral: slate-400 for benchmarks and averages
Highlighted: amber-500 for attention or anomalies
Sequential data: Use a single hue from light (blue-100) to dark (blue-700)

Frequently Asked Questions

How many colors can I safely use in a chart?

Limit to 6-8 distinct colors for readability. Beyond that, colors become hard to distinguish. If you have more categories, consider grouping smaller ones into an 'Other' category.

How do I make charts accessible to color-blind users?

Use colors with different luminance levels, add patterns or textures, include data labels directly on chart elements, and provide a legend with both color swatches and text labels.