palette.js颜色科学揭秘RGB、线性RGB与HSV转换原理及环状彩虹色生成机制【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.jspalette.js 是 Google 开源的一款颜色调色板生成库专为图表、图形与地图提供科学配色。本文带你快速读懂 palette.js 背后的颜色科学RGB 颜色如何编码、线性 RGB 为何要做 gamma 校正、HSV 转换的六段法原理以及环状彩虹色生成机制如何做到首尾颜色不重复 。 快速认识palette.js 能做什么对 palette.js 来说一次函数调用就能得到一整条配色例如palette(tol-sq, 10)即生成 10 色的顺序色板palette(rainbow, 12)则生成 12 色环状彩虹色板。库中内置了三大类配色分组qualitative定性用于区分不同类别如饼图图例sequential顺序从浅到深表示数值大小如热力图diverging发散从两个极端向中性色过渡如偏差图理解两个核心概念即可玩转 API**palette调色板**是一组固定数量的RRGGBB十六进制颜色序列**scheme配色方案**是一个可调用的生成器函数负责按任意数量生产调色板。项目结构非常精简文件作用palette.js核心库颜色转换函数 全部内置色板约 1500 行demo.js演示页脚本渲染所有色板支持色盲模拟demo.html演示页拖动滑块实时预览 1–100 色README.md官方使用文档与色板命名规则package.jsonnpm 包信息包名 google-palette 颜色如何编码RGB 值到 RRGGBB 字符串所有内置色板最终都输出小写的 6 位十六进制字符串如ff8000可直接拼上#用于 CSS。这一步由rgbColor函数完成见 palette.js逻辑非常直白三个通道值各自限制在 [0, 1] 区间内超出会被clamp函数截断见 palette.js乘以 255 并四舍五入得到 0–255 的整数转成两位十六进制不足两位补零最后拼接这个clamp截断看似不起眼却很关键——它保证即使自定义颜色函数在边界处算飞了比如超过 1输出也始终是合法颜色而不会报错。 线性 RGB 与 sRGBgamma 校正的奥秘屏幕上的颜色数值并不是光能量的线性记录。人眼对暗部更敏感因此 sRGB 标准给颜色加了gamma 曲线数值上的中点128看起来比实际亮度中点更亮。如果要按物理光强处理颜色比如做插值、混合就必须先换算回线性空间处理完再转回来。palette.js 提供的linearRgbColor见 palette.js实现了标准的 sRGB 分段公式当v ≤ 0.0031308时v 12.92 × v否则v 1.055 × v^(1/2.4) − 0.055几个典型换算结果能直观感受这条曲线线性 RGB 值转换后 (0–255)十六进制直观效果0.0000纯黑0.04≈ 5638低光区被明显提亮0.5≈ 188bc中间调已升至约 74%1.0255ff纯白实践意义在两个颜色之间插值时如果在线性空间计算再经 gamma 转换输出中间过渡色会自然、不发灰这正是 palette.js 让自定义色板保持视觉平滑的底层工具。 HSV 转换原理六段法拆解色相环HSV 用三个直觉维度描述颜色H色相 0–1对应 0°–360°、S饱和度、V明度。hsvColor函数见 palette.js把色相环切成 6 段每段恰好对应 RGB 色轮的一条棱边色相段h×6 取整RGB 通道排列颜色过渡0(v, x, m)红 → 黄1(x, v, m)黄 → 绿2(m, v, x)绿 → 青3(m, x, v)青 → 蓝4(x, m, v)蓝 → 品红5(v, m, x)品红 → 红其中m v × (1 − s)是饱和度垫出的底色x v × (1 − s × |h%2 − 1|)是在每段内做线性变化的中间通道。整个转换没有任何循环与三角函数只有一个 switch 六分支——这是性能与可读性兼顾的经典实现。饱和度与明度默认都为 1即最鲜艳的纯色。 环状彩虹色生成机制首尾为何不重复色相环有个陷阱0° 和 360° 都是正红色。如果按常规方式在 [0, 1] 上均匀取 n 个点步长1/(n−1)第一个和最后一个颜色完全相同白白浪费一个色位图上会出现两条挨着的红条。palette.js 用cyclic环状采样优雅地解决了这个问题见 palette.js当颜色函数首尾同色时步长改为(end − start) / n从 0 开始取 n 个点最末一个停在(n−1)/n——刚好在转回起点之前刹住车。一行公式palette.jsstep (opt_end - opt_start) / (opt_cyclic ? i : (i - 1))内置的rainbow方案正是这样注册的HSV 色相函数 环状采样 定性分组见 palette.js可以生成任意数量的彩虹色板。按 12 等分实际采样的结果如下每个单元格即该色ff0000ff8000ffff0080ff0000ff0000ff8000ffff0080ff0000ff8000ffff00ffff0080⚠️ 注意rainbow不是色盲友好红绿难以区分所以它的-cbf查询会返回空。演示页内置了红盲/绿盲/灰度模拟见 demo.js你可以亲眼验证这一点。️ 内置色板一览从图表到地图的科学配色除了程序化生成的彩虹库还内置了大量人工精心调校的色板全部可通过名称调用完整清单见 palette.js名称分组特点rainbow定性HSV 环状采样可生成任意数量颜色mpn65定性65 色大色板适合批量图表自动配色tol/tol-sq/tol-dv/tol-rainbow定性/顺序/发散/定性Paul Tol 数学推导配色全部色盲友好cb-YlGn…cb-Spectral等 27 组顺序/发散/定性ColorBrewer 地图配色标准每档 3–12 色sol-base/sol-accent顺序/定性Solarized 终端风格配色其中tol-sq的顺序色板最有意思它是用误差函数 erf对三个通道做平滑函数得到的见 palette.js从浅蓝平滑过渡到深蓝任意取色都协调。色盲友好CBF是库的一等公民每个方案都记录cbf_max最多多少色仍色盲友好调用时只需在名称后加-cbf后缀如palette(qualitative-cbf, 8)即可只获得色盲友好的色板。 三步上手生成你的第一个配色获取代码git clone https://gitcode.com/gh_mirrors/pa/palette.js引入脚本在页面中通过 script 标签加载palette.js即可无依赖。调用生成palette(tol-sq, 10)生成顺序色板palette([sequential], 10, 1)取顺序组的第 2 个方案方便为不同数据系列分配互不冲突的配色传入负数如-8则得到倒序颜色。✅ 小结palette.js 颜色科学要点RGB 编码通道值 clamp 到 [0,1] → 乘 255 → 转十六进制输出统一的RRGGBB字符串线性 RGB通过 sRGB 分段公式做 gamma 校正让颜色混合符合物理直觉HSV 转换色相环六段法 线性插值无三角函数、高效易读环状彩虹色cyclic 采样把步长从1/(n−1)改为1/n巧妙避开首尾同色科学配色内置 Paul Tol、ColorBrewer、mpn65 等方案并原生支持色盲友好筛选理解这些原理后无论是做数据可视化还是地图着色你都能 confidently 选对颜色、并知道为什么 。【免费下载链接】palette.jsScript for generating colour palettes for use with graphs, charts and cartography.项目地址: https://gitcode.com/gh_mirrors/pa/palette.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考