如何为图表快速挑选专业配色？palette.js颜色调色板生成库完全入门指南

如何为图表快速挑选专业配色palette.js颜色调色板生成库完全入门指南【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js做数据可视化时你是不是也纠结过图表里这 10 种颜色到底该选什么palette.js是 Google 开源的一款颜色调色板生成库colour palette generator专门用于为图表、图形和地图快速生成专业的配色方案。它内置了 Paul Tol 和 ColorBrewer 等经典配色方案支持定性qualitative、顺序sequential、发散diverging三大类型还能生成色盲友好的CBF色板——一行代码就能拿到一组可直接使用的十六进制颜色。为什么需要专业配色库手动挑颜色有三个常见痛点颜色不够协调随意搭配容易显得花且难读色数难以控制图例有 3 个分类和 12 个分类需要的色板完全不同色盲用户看不清楚红绿色盲约占男性 6%~8%红绿色不友好的配色会直接丢失受众。palette.js 的思路是把配色方案scheme封装成函数你只需指定想要的颜色数量它就返回一组RRGGBB格式的颜色数组直接喂给 ECharts、Chart.js、D3 等任何图表库都能用。快速上手一行代码生成调色板先克隆仓库到本地git clone https://gitcode.com/gh_mirrors/pa/palette.js核心入口是 palette.js 中定义的palette函数签名很简单var seq palette(tol-sq, 10); // 生成 10 色的 Paul Tol 顺序色板第二个参数就是你想要的颜色个数。如果指定了不存在的方案名函数会返回null方便你在业务代码里做兜底判断。核心概念Scheme方案与 Palette色板理解两个词整个库的 API 就通了详见 README.md 的 Naming 一节概念含义类比Scheme配色方案一组可生成色板的规则表现为函数色卡品牌Palette色板固定数量、有序的颜色数组你买到的具体一卡片色比如调用hsv_rainbow(6)就是从HSV 彩虹方案里取出一张 6 色的色板。方案还可以带分组名例如palette(sequential, 10)会自动选用第一个可用的顺序型方案。三种配色方案怎么选这是新手最该记住的选型口诀定性qualitative分类数据颜色之间无大小关系。例如饼图的各个扇区、地图上的行政区。推荐tolPaul Tol 定性方案。顺序sequential数值从低到高渐变如热力图、密度图。推荐tol-sq或 ColorBrewer 的cb-sequential分组。发散diverging数据有正负两个方向从中心色向两端渐变如温度偏差、投票倾向。推荐tol-dv或cb-diverging分组。 小技巧传分组名加第三个参数索引可以为不同数据系列取到互不重样的色板例如palette([sequential], 10, 0)与palette([sequential], 10, 1)会返回两种不同的顺序配色。内置方案清单这些名字值得收藏打开 palette.js 中listSchemes的注释可以看到完整清单常用的有tol/tol-sq/tol-dv/tol-rainbowPaul Tol 的定性、顺序、发散、彩虹方案全部色盲友好cb-qualitative/cb-sequential/cb-divergingColorBrewer 全家桶是地图制图领域的事实标准部分色板仅在小色数时色盲友好mpn65专为同一页面显示大量图表场景设计的 65 色定性大色板sol-base/sol-accentSolarized 的基础色与强调色适合做 UI 辅助配色rainbowHSV 彩虹生成器可自定义饱和度和明度理论上能生成任意数量的色板RGB 渐变函数通过palette.rgbColor(r, g, b)见 palette.js可生成红、蓝、灰等单通道渐变。想列出所有可用方案调用palette.listSchemes(name)palette.js传入方案名、分组名或色板名都能查到。色盲友好CBF被忽视的细节每个方案都记录了cbf_max属性——该方案下仍然色盲友好的最大颜色数见 palette.js。例如 ColorBrewer 的 Paired 方案 4 色时色盲可辨颜色一多就不行了。选择 CBF 配色只需在名称后加-cbf约束例如palette(sequential-cbf, 10)库会自动跳过对色盲不友好的方案这对面向公众的数据报告尤其重要。本地运行交互 Demo直观看效果仓库自带可视化演示页面 demo.html用浏览器直接打开即可顶部输入框可实时调整颜色数量1~100 色下方表格即时刷新所有方案的色板支持色盲模拟模式红盲 / 绿盲 / 灰度让你亲眼看到色盲用户眼中的效果相关实现见 demo.js 的滤镜定义鼠标悬停在任意色块上会显示对应的 RGB/十六进制值点击还能把该色设为页面背景方便取色见 demo.js。演示页面中所有方案的遍历与刷新逻辑集中在 demo.js 的regenerate函数是了解各方案调用方式的绝佳参考。项目结构速览整个库非常轻量核心只有一个文件方便阅读和二次开发文件说明palette.js库主体约 1500 行含全部方案定义与生成逻辑demo.js交互演示脚本含色盲模拟滤镜demo.html演示页面浏览器直接打开即可体验README.md官方说明文档含 API 用法示例package.jsonnpm 包信息包名google-paletteApache-2.0 协议LICENSEApache 2.0 许可可自由用于商业项目写在最后palette.js 用一个极简的palette(方案名, 颜色数)接口把专业配色这件设计难题变成了三秒钟的代码问题。无论是做业务报表、学术图表还是地图可视化花几分钟体验一下它的 Demo基本就能形成自己的配色选型习惯。【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考