图片色板提取器 - 获取 HEX、RGB 与 HSL

色板提取器的工作原理

这个工具精准地解答一个窄域问题：如果必须用几种颜色来描述这张图片，会是哪几种？它会在浏览器中解码您的图片，将长边缩小到约 200 像素，然后从 Canvas 上读取原始像素数据。降低分辨率并非折损精度的捷径——在缩放过程中对相邻像素取均，能消弭 JPEG 振铃和传感器噪点，否则这些噪点会表现为几十个几乎雷同的暗色块。此举还将整体分析量控制在四万像素以内，即便在手机上也能即时完成。在一切处理开始前，透明度低于 128 的像素会被直接丢弃。这一步正是让背景透明的 logo 不再将黑色误报为主色的关键，也是其他提取器最常犯的错误。剩下的不透明像素会通过中位切分法进行分组。中位切分法将像素视作三维 RGB 空间中的点云，用一个盒子将其包络，然后反复挑选颜色分布最分散、且基数最大的盒子，并在色值确实发生变化的位置将其一分为二。重复此步骤，直到盒子数量达到您设定的颜色数，这样得到的聚类遵循图像的实际色彩结构，每个聚类汇报的结果是内部所有像素的平均值，而非一个武断的插值中点。正因如此，结果呈现的是您图片中实实在在的颜色，而非固定网格插值所产生的那种灰蒙蒙的色调。随后，工具会调整排序。单纯按像素占比排序是个陷阱：一张照片通常有百分之四十的区域是天空或白色摄影棚背景，如果按原始数量排行，这些色块会霸占前排，将您真正想要的颜色挤下去。因此，在对列表排序时，近乎中性色、近乎黑色和近乎白色的聚类会被降低权重，但它们绝不会被丢弃，且每个色块旁显示的百分比始终是真实、未经修改的像素占比。最后，每个色块都会根据 WCAG 2.1 相对亮度计算出一个配文颜色，通过比较黑与白对该具体颜色的对比度高低来做出选择。这个测试用的是亮度而非明度，所以在中调色彩上能得到正确的结果，简单的亮度阈值往往会在此犯错。