mcpField
D
data-viz-palette

data-viz-palette

github.com/basiclines设计与 UI1645 次安装32 周前更新
代码仓库

关于 data-viz-palette

一份使用 rampa 生成图表和仪表盘配色的指南。它通过统一明度与饱和度、拉开色相间距来区分类别，并提供配色方案及色盲友好建议。

主要功能

  1. 01提供不同颜色数量的配色方案
  2. 02指导统一明度与饱和度
  3. 03利用色相间距区分类别
  4. 04按背景推荐明度范围
  5. 05提供色盲友好配色建议

适用场景

  1. 01为饼图选择易区分的颜色
  2. 02为季度数据对比制作配色
  3. 03为浅色或深色背景选择图表颜色
  4. 04减少对红绿色差异的依赖

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/basiclines/rampa-studio --skill data-viz-palette

安装后在 Claude Code 中输入/data-viz-palette确认已加载。

详细介绍

数据可视化调色板

生成适用于图表、统计图和仪表板的配色组。颜色在数学上均匀间隔，以实现最大的区分度和相同的视觉权重。

适用场景

  • “为我的图表生成配色”
  • “我需要一个数据可视化调色板”
  • “为统计图生成容易区分的颜色”
  • “为仪表板图表配色”

安装

npx @basiclines/rampa

核心原则

  1. 固定明度 - 所有颜色保持相同明度，确保视觉权重相同
  2. 固定饱和度 - 整个调色板保持鲜艳程度一致
  3. 最大化色相间隔 - 使用色彩和谐方案，提升感知区分度
  4. 每种颜色只用一种色调 - 数据可视化需要容易区分的色相，而不是渐变色阶

按颜色数量选择配方

3 种颜色（三色组合）

适用于饼图和简单的条形图：

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

输出：base、triadic-1、triadic-2（彼此相隔 120°）

4 种颜色（正方形组合）

适用于季度数据和四类对比：

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

输出：base、square-1、square-2、square-3（彼此相隔 90°）

4 种颜色（复合组合）

另一种方案，将互补色与分裂互补色结合，呈现更多变化：

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

将三色组合与互补色结合：

rampa -C "<brand-color>" --add=triadic -L 50:50 -S 70:70 --size=2 -O json
# Then run complementary of each triadic color

也可以在不同明度下使用两组三色组合交错搭配：

# 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

完整示例

使用品牌色 #3b82f6：

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

输出：

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

明度建议

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

饱和度指南

使用场景饱和度
醒目、引人注意75-85%
专业、柔和55-65%
易于识别（适合色盲人士）60-70%

色盲注意事项

要创建对色盲人士友好的调色板：

  1. 避免将红色与绿色配对作为主要区分方式
  2. 使用相近色相时，略微调整明度
  3. 使用图案/形状作为备用标识

明度变化示例：

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

提示

  1. --size=2 会生成最少的色阶（每种颜色 2 个色阶），适用于数据可视化
  2. 确保所有颜色的饱和度一致
  3. 在浅色和深色图表背景下进行测试
  4. 图例中的顺序应与视觉突出程度一致
  5. 添加中性灰色，用于表示“无数据”或基线值

评论

支持 Markdown