图表与地图该怎么选色？palette.js内置5大配色家族完整指南

图表与地图该怎么选色palette.js内置5大配色家族完整指南【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js做图表和地图时总纠结颜色怎么搭palette.js 是 Google 开源的免费配色生成工具内置 Paul Tol、ColorBrewer、mpn65、Solarized 和 rainbow 五大配色家族覆盖定性、顺序、发散三类场景一行代码就能拿到专业的图表配色方案。 30秒搞懂palette.js 是怎么工作的palette.js 围绕两个核心概念设计详见 README.md方案scheme一类配色的生产线比如tol-sqPaul Tol 顺序色调色板palette一串具体颜色用RRGGBB字符串数组表示你只需要告诉它方案名 颜色数量它就会返回对应数量的色值。核心实现全部在palette.js主文件中零依赖、引入即用。 快速上手三步拿到第一组配色第 1 步克隆仓库git clone https://gitcode.com/gh_mirrors/pa/palette.js第 2 步引入脚本把palette.js放到你的页面或 Node 项目中支持module.exports前后端都能用。第 3 步一行代码生成调色板var seq palette(tol-sq, 10); // 生成 10 色的 Paul Tol 顺序配色就这么简单——返回的数组直接可以赋给柱状图、折线或地图图层。 五大内置配色家族一张表看懂配色家族方案名示例类型特色Paul Toltol、tol-sq、tol-dv、tol-rainbow定性/顺序/发散全部色盲友好色数可无限生成ColorBrewercb-Blues、cb-RdBu、cb-Set1顺序/发散/定性地图制图标准30 种细分方案mpn65mpn65定性65 色大色板多线图表救星Solarizedsol-base、sol-accent顺序/定性护眼低对比开发者最爱rainbowrainbow定性HSV 彩虹颜色数量不封顶1️⃣ Paul Tol 配色色盲友好的安全牌Paul Tol 的配色为视觉传达而专门设计所有方案都对色盲人群友好。定性方案tol最多提供 12 个互不干扰的颜色而tol-sq、tol-dv、tol-rainbow内置了颜色生成函数你要 5 色还是 50 色都能平滑生成。var tol12 palette(tol, 12); // 12 色定性分类 var sq30 palette(tol-sq, 30); // 30 色渐变画热力地图正好2️⃣ ColorBrewer 配色地图制图的专业之选ColorBrewer 是地理信息领域的老牌标准palette.js 内置了它的 30 多个方案统一加cb-前缀顺序色数值越大越深cb-Blues、cb-YlOrRd、cb-Greys等 18 种发散色以中间值向两边发散cb-RdBu、cb-PuOr、cb-Spectral等 9 种定性色类别区分cb-Set1、cb-Dark2、cb-Paired等 7 种var heat palette(cb-OrRd, 9); // 温度/密度地图 var diff palette(cb-RdBu, 7); // 涨跌、偏差类数据⚠️ 小提示cb-Spectral和cb-RdYlGn的中间黄色对色盲不够友好追求无障碍时可换cb-RdYlBu。3️⃣ mpn65 配色多线图表的救星如果你的仪表盘要同时画十几条曲线mpn65 就是为此而生的——65 个精心挑选的颜色专为没有人为每张图单独挑色的场景设计见palette.js源码中的注册逻辑var many palette(mpn65, 20); // 20 条线各领一个色4️⃣ Solarized 配色温和不刺眼的选择Solarized 以护眼著称提供sol-base8 色明暗基底和sol-accent8 色强调色。它并非为图表设计但用来给深色主题看板打底非常舒服var dark palette(sol-base, 8);5️⃣ rainbow 配色要多少色有多少色最朴素的 HSV 彩虹色环颜色数量理论上无限。适合数据维度极多、只要求每个类别颜色不同的场合注意它不色盲友好var arc palette(rainbow, 16); 图表类型一键对号选色决策表你的数据形态推荐方案一行调用类别区分饼图、分组柱状图tol或cb-Set2palette(tol, n)数值高低热力图、分级填色地图tol-sq或cb-Bluespalette(cb-Blues, 9)正负偏差涨跌、异常检测tol-dv或cb-RdBupalette(cb-RdBu, 7)几十条曲线同屏mpn65palette(mpn65, 25)需要给不同图各配一套不同色分组 索引见下文技巧—✨ 进阶技巧4 个选色实用操作① 按类型选而不是按名字选不确定用哪个方案时直接传分组名库会自动挑一个可用的var any palette(sequential, 10); // 任取一个顺序配色方案② 加-cbf后缀只选色盲友好方案var safe palette(qualitative-cbf, 8); // 限定色盲友好③ 用索引轮换给不同图表配不同色系var pal_q palette(sequential, 10, 0); // 第 1 套 var pal_e palette(sequential, 10, 1); // 第 2 套 var pal_l palette(sequential, 10, 2); // 第 3 套④ 传负数反转渐变方向var reversed palette(tol-sq, -10); // 深→浅反转 想直观对比效果用浏览器打开demo.html即可运行交互式演示配合demo.js它还内置了红/绿色盲模拟模式能亲眼看到哪些配色在色盲眼里糊掉了。✅ 小结一张清单带走palette.js零依赖、引入即用一行palette(方案名, 数量)出配色 分类数据选Paul Tol / mpn65数值渐变选tol-sq / ColorBrewer正负对比选tol-dv / cb-RdBu♿ 面向公众的图表记得加-cbf过滤色盲友好方案 完整方案清单可调用palette.listSchemes(all)动态查看也可翻阅palette.js源码注释 许可证为 Apache 2.0见LICENSE可放心商用别再对着调色盘发呆把选色这件事交给 palette.js 的五大配色家族吧【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考