basiclines Data 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