ImageColorPicker
客户发来一张参考图说「就按这个蓝」，问题是你不知道那个蓝到底是多少。取色器就是干这个的：把图放上去，鼠标点哪儿就报哪儿的色值，复制走就能用。
ImageColorPicker 能取出哪些色值
- 三种取色入口：上传本地图片、从剪贴板粘贴截图、或者直接贴图片网址
- 一次给三个色值：HEX（#623919）、RGB、HSL，复制按钮点一下就到剪贴板
- 放大镜对位：按住方向键微调取色点，Shift 加大步长，密密麻麻的小图标区域也能点准
- 自动提取配色：从整张图里挑 10 个主色排成一条，做 PPT 配色够用
- 顺带做检查：对比度检测、渐变生成器、色盲模拟，同一个站里都有
取色点在图上会放大显示，右下角直接给出色值：
怎么从照片里取一个准的颜色：三步
- 打开 imagecolorpicker.com，把图拖进上传框，或按 Ctrl/⌘+V 直接粘截图
- 在图上点住要取的位置，看放大镜里的十字对准了再松手
- 在 HEX / RGB / HSL 里点一下复制，粘到设计稿或 CSS 里
免费吗：不上传服务器，但有广告
- 免费、不注册，官网写明图片留在你自己的设备上，不上传服务器
- 页面有广告，想去广告要单独付费订阅，取色本身不受影响
- 结果只有色值，不告诉你这是什么配色体系（莫兰迪、潘通都认不出来）
- 图片被压缩过、带半透明叠加时，取到的颜色和你眼睛看到的会有偏差，靠边缘位置取更准
- 一张图里渐变很多时，自动提取的 10 色偏平均，未必是你想要的主色
配色下一步：色阶、渐变和色值转换
- 要做整套 UI 配色：站内12 级色阶方法，先把主色定下来再扩
- 要做渐变：站内 CSS 渐变生成器，拖色标直接出代码
- 取到的 HEX 还要换成 RGB/ARGB 或 alpha 值：站内颜色转换工具一次转完
- 在 Chrome 里临时取色：装个 ColorZilla 扩展，不用来回切页面
小提示：从照片取色先避开高光和阴影，取画面中间调的像素，转成 UI 色才不会一放到白底就发飘。
地址：https://imagecolorpicker.com/