Simple Charts includes six carefully designed color palettes optimized for classroom use, printability, and accessibility. Each palette provides six distinct colors that work well together.
Available Palettes
All palettes are defined in src/constants/palettes.js:
// From palettes.js:1-38
export const CHART_PALETTES = [
// ... palette definitions
];
Classroom
Soft Report
Pastel Math
Print Safe
Science Lab
Editorial
Balanced tones for worksheets and slides.Palette ID: classroom (default)Colors
{
id: "classroom",
name: "Classroom",
description: "Balanced tones for worksheets and slides.",
colors: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4"]
}
This is the default palette used when creating new charts. It provides excellent balance between vibrancy and readability.
Muted and professional for handouts.Palette ID: soft-reportColors
{
id: "soft-report",
name: "Soft Report",
description: "Muted and professional for handouts.",
colors: ["#4f46e5", "#0ea5e9", "#22c55e", "#eab308", "#f97316", "#e11d48"]
}
Light but readable palette for younger students.Palette ID: pastel-mathColors
{
id: "pastel-math",
name: "Pastel Math",
description: "Light but readable palette for younger students.",
colors: ["#60a5fa", "#34d399", "#fbbf24", "#fb7185", "#a78bfa", "#2dd4bf"]
}
These softer colors are easier on the eyes and work well for elementary-level materials.
High-contrast colors that remain clear on print.Palette ID: print-safeColors
{
id: "print-safe",
name: "Print Safe",
description: "High-contrast colors that remain clear on print.",
colors: ["#1d4ed8", "#047857", "#ca8a04", "#b91c1c", "#7c3aed", "#0f766e"]
}
These darker, high-contrast colors maintain clarity when printed, even on lower-quality printers or in black and white.
Cool tones with crisp separation.Palette ID: science-labColors
{
id: "science-lab",
name: "Science Lab",
description: "Cool tones with crisp separation.",
colors: ["#2563eb", "#14b8a6", "#84cc16", "#f59e0b", "#f43f5e", "#6366f1"]
}
Clean palette for presentations.Palette ID: editorialColors
{
id: "editorial",
name: "Editorial",
description: "Clean palette for presentations.",
colors: ["#0f766e", "#0284c7", "#7c3aed", "#ea580c", "#dc2626", "#4d7c0f"]
}
Palette Structure
Each palette follows the same structure:
{
id: string, // Unique identifier
name: string, // Display name
description: string, // Usage guidance
colors: string[] // Array of 6 hex colors
}
Default Palette
The “Classroom” palette is set as the default:
// From palettes.js:40
export const DEFAULT_PALETTE_ID = CHART_PALETTES[0].id;
Retrieving Palettes
Use the helper function to get a palette by its ID:
// From palettes.js:46-48
export function getPaletteById(paletteId) {
return CHART_PALETTES.find((palette) => palette.id === paletteId) ?? CHART_PALETTES[0];
}
Color Application
Colors are applied to chart data points in order, cycling through the palette if there are more data points than colors:
// From App.jsx:306-315
const resolvedColors = useMemo(
() =>
chartRows.map((row, index) => {
if (options.advancedColorsEnabled && options.customColors[row.id]) {
return options.customColors[row.id];
}
return palette.colors[index % palette.colors.length];
}),
[chartRows, options.advancedColorsEnabled, options.customColors, palette.colors]
);
If you have more than 6 data points, colors will repeat starting from the first color in the palette.
Advanced Color Swatches
For custom color selection, Simple Charts provides a unified set of swatches from all palettes:
// From palettes.js:42-44
export const ADVANCED_SWATCHES = [
...new Set(CHART_PALETTES.flatMap((palette) => palette.colors))
];
Custom Colors
While palettes provide preset color schemes, Simple Charts also supports custom colors for individual data points:
// From App.jsx:100-119 (default state)
customColors: {},
advancedColorsEnabled: false,
advancedColorsEnabled is true, custom colors in the customColors object take precedence over palette colors:
// From App.jsx:309-311
if (options.advancedColorsEnabled && options.customColors[row.id]) {
return options.customColors[row.id];
}
Choosing the Right Palette
For Digital Display
- Classroom - All-purpose, balanced colors
- Soft Report - Professional presentations
- Pastel Math - Young students, extended viewing
For Printing
- Print Safe - Optimal for black & white printers
- Editorial - Clean, professional handouts
For Specific Subjects
- Science Lab - STEM content with cool tones
- Pastel Math - Elementary math worksheets
- Editorial - Literature and humanities
All palettes are designed to be accessible and maintain good contrast ratios, but “Print Safe” is specifically optimized for physical handouts.