About data-viz-palette
A guide for generating chart, graph, and dashboard color palettes with rampa. It uses consistent lightness and saturation with spaced hues to distinguish categories, and includes recipes and guidance for colorblind considerations.
Key features
- 01Palette recipes for different color counts
- 02Consistent lightness and saturation guidance
- 03Hue spacing for category distinction
- 04Background-specific lightness recommendations
- 05Colorblind palette considerations
Use cases
- 01Choose distinct colors for a pie chart
- 02Build a palette for quarterly comparisons
- 03Select chart colors for light or dark backgrounds
- 04Reduce reliance on red-green distinctions
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/data-viz-palettein Claude Code to confirm it loaded.
Details
From the project READMEData Visualization Palette
Generate color sets optimized for charts, graphs, and dashboards. Colors are mathematically spaced for maximum distinction and equal visual weight.
When to Use
- "Create colors for my chart"
- "I need a data visualization palette"
- "Generate distinct colors for a graph"
- "Colors for dashboard charts"
Installation
npx @basiclines/rampa
Key Principles
- Fixed lightness - All colors at same lightness = equal visual weight
- Fixed saturation - Consistent vibrancy across the palette
- Maximum hue spacing - Use harmonies for perceptual distinction
- Single shade per color - Data viz needs distinct hues, not ramps
Recipes by Color Count
3 Colors (Triadic)
Perfect for pie charts, simple bar charts:
rampa -C "<brand-color>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css
Outputs: base, triadic-1, triadic-2 (120° apart)
4 Colors (Square)
Good for quarterly data, four-category comparisons:
rampa -C "<brand-color>" --add=square --size=2 -L 50:50 -S 70:70 -O css
Outputs: base, square-1, square-2, square-3 (90° apart)
4 Colors (Compound)
Alternative with complementary + split for more nuance:
rampa -C "<brand-color>" --add=compound --size=2 -L 50:50 -S 75:75 -O css
6 Colors
Combine triadic with complementary:
rampa -C "<brand-color>" --add=triadic -L 50:50 -S 70:70 --size=2 -O json
# Then run complementary of each triadic color
Or use two interlocking triads at different lightness:
# Primary triad
rampa -C "<brand-color>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css
# Offset triad (shift hue by 60°)
rampa -C "<brand-color>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css
Complete Example
For brand color #3b82f6:
# 4-color chart palette
rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css
Output:
:root {
--base-0: #3b82f6; /* Blue */
--square-1-0: #a855f7; /* Purple */
--square-2-0: #f97316; /* Orange */
--square-3-0: #22c55e; /* Green */
}
Lightness Recommendations
| Background | Recommended Lightness |
|---|---|
| White (#fff) | 45-55% |
| Light gray (#f5f5f5) | 45-55% |
| Dark (#1a1a1a) | 55-65% |
| Black (#000) | 60-70% |
Saturation Guidelines
| Use Case | Saturation |
|---|---|
| Bold, attention-grabbing | 75-85% |
| Professional, muted | 55-65% |
| Accessible (colorblind-friendly) | 60-70% |
Colorblind Considerations
For colorblind-safe palettes:
- Avoid red-green pairs as primary distinction
- Vary lightness slightly if using similar hues
- Use patterns/shapes as backup identifiers
Example with lightness variation:
rampa -C "#3b82f6" --add=square --size=1 -L 40:40 -S 70:70 -O css # darker
rampa -C "#3b82f6" --add=square --size=1 -L 60:60 -S 70:70 -O css # lighter
Tips
--size=2gives minimal ramps (2 shades each) - good for data viz- Keep saturation consistent across all colors
- Test on both light and dark chart backgrounds
- For legends, the order should match visual prominence
- Add a neutral gray for "no data" or baseline values