指南 · 设计

如何从图片中提取颜色代码和调色板

发现一张配色很好看的照片或设计图,想知道它的Hex代码用在自己的项目里?本文教你如何直接从图片中提取颜色,可以逐个提取,也可以一次性生成调色板。

取色器有两种模式:直接点击图片上的某一点提取颜色(结果包括Hex、RGB和HSL代码),或者让工具自动从整张图片中提取出最主要的颜色,生成调色板。

立即体验

图片取色器 — MEA Tools

点击图片即可提取颜色代码,或自动提取主色调调色板,全部在浏览器本地完成。

打开取色器 →

提取颜色的步骤

  1. 打开 tools.meaecosystem.com/color-picker。
  2. 上传要提取颜色的图片。
  3. 点击图片上想要的位置——该点的Hex、RGB和HSL代码会立即显示,点击一下即可复制。
  4. 要查看整体的主色调调色板,滚动到调色板部分,选择想显示的颜色数量(4、8或16个)。

Hex、RGB、HSL有什么区别?

三者表示的是同一种颜色,只是写法不同,各自更常用于特定场景。Hex(比如 #3B82F6)在CSS和网页设计中最常用。RGB把红、绿、蓝三个分量分开表示——如果你用的软件需要分别输入数值,这种格式很实用。HSL(色相、饱和度、明度)在你想调整颜色的明暗或饱和度而不改变"色相本身"时更直观。

什么时候点击取色,什么时候用自动调色板?

如果你已经清楚知道图片中哪个部分的颜色需要提取——比如某个标志或产品的颜色——直接点击更合适。自动调色板在初期阶段更有用,比如你刚开始从一张参考图或情绪板中确定配色方案的时候。

常见问题

我的图片会上传到服务器吗?

不会。图片的读取和处理都直接在你的浏览器中通过Canvas API完成。

支持哪些图片格式?

支持浏览器能读取的所有常见图片格式,如JPG、PNG和WebP。

为什么提取出的颜色和我在图片上看到的不一样?

屏幕和设备的亮度设置会影响你对颜色的视觉感知,但提取出的颜色代码始终基于图片文件中的原始像素值,而不是你屏幕上显示的效果。