data-viz-palette

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

安装方式

bash

npx @basiclines/rampa

bash

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)

3种颜色（三色调）

Perfect for pie charts, simple bar charts:

bash

rampa -C "<brand-color>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css

Outputs:

base

triadic-1

triadic-2

(120° apart)

适用于饼图、简单柱状图：

bash

rampa -C "<品牌色>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css

输出：

base

triadic-1

triadic-2

（色相间隔120°）

4 Colors (Square)

4种颜色（四方形配色）

Good for quarterly data, four-category comparisons:

bash

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)

适合季度数据、四类对比场景：

bash

rampa -C "<品牌色>" --add=square --size=2 -L 50:50 -S 70:70 -O css

输出：

base

square-1

square-2

square-3

（色相间隔90°）

4 Colors (Compound)

4种颜色（复合配色）

Alternative with complementary + split for more nuance:

bash

rampa -C "<brand-color>" --add=compound --size=2 -L 50:50 -S 75:75 -O css

另一种方案，结合互补色与分裂互补色，层次更丰富：

bash

rampa -C "<品牌色>" --add=compound --size=2 -L 50:50 -S 75:75 -O css

6 Colors

6种颜色

Combine triadic with complementary:

bash

rampa -C "<brand-color>" --add=triadic -L 50:50 -S 70:70 --size=2 -O json

结合三色调与互补色：

bash

rampa -C "<品牌色>" --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:

```bash


或者使用两组不同亮度的交错三色调：

```bash

Primary triad

主三色调

rampa -C "<brand-color>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css

rampa -C "<品牌色>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css

Offset triad (shift hue by 60°)

偏移三色调（色相偏移60°）

rampa -C "<brand-color>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css

undefined

rampa -C "<品牌色>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css

undefined

Complete Example

完整示例

For brand color

#3b82f6

bash

undefined

针对品牌色

#3b82f6

：

bash

undefined

4-color chart palette

4色图表配色方案

rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css


Output:
```css
:root {
  --base-0: #3b82f6;      /* Blue */
  --square-1-0: #a855f7;  /* Purple */
  --square-2-0: #f97316;  /* Orange */
  --square-3-0: #22c55e;  /* Green */
}

rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css


输出：
```css
:root {
  --base-0: #3b82f6;      /* 蓝色 */
  --square-1-0: #a855f7;  /* 紫色 */
  --square-2-0: #f97316;  /* 橙色 */
  --square-3-0: #22c55e;  /* 绿色 */
}

Lightness Recommendations

亮度推荐

Background	Recommended Lightness
White (#fff)	45-55%
Light gray (#f5f5f5)	45-55%
Dark (#1a1a1a)	55-65%
Black (#000)	60-70%

背景色	推荐亮度
白色 (#fff)	45-55%
浅灰 (#f5f5f5)	45-55%
深色 (#1a1a1a)	55-65%
黑色 (#000)	60-70%

Saturation Guidelines

饱和度指南

Use Case	Saturation
Bold, attention-grabbing	75-85%
Professional, muted	55-65%
Accessible (colorblind-friendly)	60-70%

使用场景	饱和度
醒目、吸引注意力	75-85%
专业、低饱和度	55-65%
无障碍（色弱友好）	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:

bash

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

针对色弱/色盲友好的配色方案：

避免红绿色搭配作为主要区分方式
微调亮度如果使用相似色相
辅以图案/形状作为备用识别标识

亮度调整示例：

bash

rampa -C "#3b82f6" --add=square --size=1 -L 40:40 -S 70:70 -O css  # 偏暗
rampa -C "#3b82f6" --add=square --size=1 -L 60:60 -S 70:70 -O css  # 偏亮

Tips

小贴士

```
--size=2
```
gives 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

```
--size=2
```
生成最少渐变（每种颜色2个色调）- 适合数据可视化场景
保持所有颜色饱和度一致
在浅色和深色图表背景上都进行测试
图例顺序应与视觉突出度匹配
添加中性灰色用于“无数据”或基准值