做主题设置、后台可视化编辑器、图片配色分析这类功能时，经常需要让用户自己挑颜色，或者从一张图里自动提取出主色调。这些需求看着简单，真从零写起来挺折腾：色值格式要能互相转换、取色面板的交互手感要好、图片要做像素级分析才能拿到主色。用现成的库，这些细节问题都被处理过了，开发时间能省下一大截。这次整理了 4 款开源免费、可商用的网页取色配色工具库，从选色到算色都覆盖到了。
四款库各管一段
Pickr 负责让用户选色，交互精致的颜色面板支持 HSV、HSL、RGB 多种模式，带取色板、色相环、透明度调节和输入框，内置几种主题样式，能绑定到任意输入框上，也能直接在页面里内嵌。iro.js 更灵活，把色轮、色块、滑块、色域这些模块自由拼装成想要的取色界面，也可以只用其中一小块，支持触摸操作，移动端体验好。Node Vibrant 负责从图片里自动分析出主色调、次色调、鲜艳色和柔和色，做音乐播放器时让背景色跟着封面图变化，观感统一又有质感。TinyColor2 体积很小，专门做颜色解析和换算，十六进制、RGB、HSL、颜色名称之间互相转换，还能调明暗、饱和度、透明度，判断两个颜色对比度够不够。
配色上容易忽略的点
挑颜色不只是好看不好看的问题，可读性同样重要。正文和背景的对比度不够，用户看着费劲，无障碍评分也会被扣分，TinyColor2 这类库能直接算出两个颜色的对比度，用之前先卡一道阈值。另外浅色和深色主题要分别准备一套色值，直接把同一组颜色配上深色背景，往往不是太刺眼就是太灰，用工具批量调一下明暗会轻松很多。图片主色提取出来的色值饱和度常常偏高，落进界面之前最好再降一档。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。Pickr 的主题样式文件也一起打包了，想要深色面板直接引对应的即可。四款库互相独立、不依赖任何框架，用 script 标签引入就能用。常见的组合是 Pickr 或 iro.js 负责让用户选色，TinyColor2 做色值换算，需要跟着图片走就用 Node Vibrant 提取主色。每个目录都附带了说明文档和许可文件。
取色配色这类功能整体不大，但做好了产品质感会明显不一样，尤其是在后台工具和编辑器类产品里，一个顺手的取色面板能少挨很多吐槽。配色没把握的时候，可以先用图片主色提取的结果当基调，再手动微调，比凭空挑色靠谱得多。这四款加起来不到二百 KB，基本不占体积。全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容