取色器是干什么的
取色器从图片中读取指定位置的像素颜色，输出颜色值。看到一张图里某个好看的颜色，想知道具体色值，用取色器一点就行。
常见用途：
- 提取品牌色（从 logo 取主色）
- 配色参考（从好看的照片提取配色）
- 还原颜色（设计稿取色，复刻到代码）
- 调试（确认图片某处实际颜色）
颜色的几种格式
取色器会输出不同格式，适用不同场景：
HEX（十六进制）
如 #FF5733。最常用，CSS、设计软件通用。6 位分别表示红绿蓝分量。
RGB
如 rgb(255, 87, 51)。红绿蓝各 0~255。CSS 常用。
HSL
如 hsl(11, 100%, 60%)。色相、饱和度、亮度。调色更直观，改色相换色、改饱和度换鲜艳度。
HSV/HSB
类似 HSL，部分设计软件用。
CMYK
印刷用，四色油墨比例。屏幕取色一般不直接给 CMYK。
前端用 HEX 或 RGB 最多，设计调色用 HSL 直观。
取色器的使用步骤
- 用 图片取色器工具 上传图片
- 鼠标移动到想取色的位置
- 实时显示该像素颜色值
- 点击锁定颜色，复制色值
- 取多个颜色组成配色板
取色技巧
取主色调
整张图的主色，取面积最大的区域。这是配色的基调。
取强调色
找图片里最鲜艳、最突出的颜色，常作为强调色（按钮、链接）。
取多个颜色组配色板
一张和谐的图片，提取 4~6 个颜色就能组成一套配色：主色、辅色、强调色、背景色、文字色。
避免取噪点
放大的图能看到像素颗粒，单个像素可能受压缩噪点影响。取色时取稍大区域的平均值更准，或取多个相邻像素看是否一致。
渐变取两端
渐变色取起止两端颜色，中间色用插值。
配色提取的应用
从品牌 logo 取色
公司 logo 通常有品牌主色。取色后应用到网站、PPT、海报，保持视觉统一。
从照片提取配色
看到色调好看的照片（如风景照），提取主色组配色板，用到自己的设计里，复刻那种氛围。
还原设计稿
设计稿是图片，前端要复刻颜色。用取色器从设计稿取色，填到 CSS 里。
常见坑
颜色显示不一致
不同屏幕色域、色温不同，同一颜色显示有差异。取色以色值为准，别以肉眼为准。
取到压缩伪影
JPEG 压缩会产生颜色噪点，尤其边缘。取色时避开边缘和过渡区，取纯色块中间。
透明像素取色
PNG 透明区域的颜色值可能不准（透明像素有颜色但不可见）。取色前确认该位置是不透明的。
打印颜色差异
屏幕 RGB 取色，打印 CMYK，颜色会变。要打印的设计别直接用屏幕取色，要做色彩管理转换。
配色规范建议
- 主色 1 个：占比 60%
- 辅色 1~2 个：占比 30%
- 强调色 1 个：占比 10%
- 中性色（黑灰白）：文字、背景
取色后按这个比例分配，配色和谐不杂乱。
小结
取色器是从图片提取颜色的小工具。取主色、辅色、强调色组配色板，应用到设计保持统一。注意避开噪点和压缩伪影，取纯色块中间。前端用 HEX/RGB，调色用 HSL。DocsAll 取色器浏览器端处理，图片不上传，设计稿取色不泄露。