SuperAPI AI 工具集

data-viz-palette

设计与创作

查看项目

更新于 10-15 18:37

技能介绍

用途:为图表、图形和仪表盘生成优化过的配色方案,颜色在数学上均匀分布,以获得最大区分度和相等视觉权重。触发场景包括“为图表创建颜色”“我需要数据可视化调色板”“为图形生成区分明显的颜色”“仪表盘图表配色”。

安装:npx @basiclines/rampa

核心原则:固定明度,所有颜色同明度即等视觉权重;固定饱和度,保持整组配色鲜艳度一致;最大化色相间距,用和谐关系提升感知区分度;每种颜色只用单一色阶,数据可视化需要区分色相而非渐变序列。

按数量配方: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,再对每个三分色取互补色,或用两个不同明度交错三色组,如主三色组 rampa -C "<brand-color>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css,偏移三色组 rampa -C "<brand-color>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css。

完整示例:品牌色 #3b82f6 生成4色图表配色 rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css。

明度建议:白色背景与浅灰背景推荐45-55%,深色背景55-65%,黑色背景60-70%。饱和度建议:醒目突出用75-85%,专业柔和用55-65%,可访问(色盲友好)用60-70%。

色盲考虑:避免红绿配对作为主要区分;若使用相近色相,略微变化明度;用图案或形状作为辅助标识。

提示:--size=2 生成最少色阶(每种2个明暗),适合数据可视化;所有颜色保持饱和度一致;在浅色和深色图表背景上分别测试;图例顺序应与视觉显著性匹配;为“无数据”或基线值添加中性灰。

限制:资料未提供平台支持范围、是否收费、许可协议等具体信息。