如何从图片中取出准确颜色：HEX、RGB 和 HSL

要获得图片中的准确颜色，应读取某一个像素的数值，而不是凭肉眼估计。在图片取色器中打开图片，把鼠标移到目标位置，点击后复制 HEX 代码。读取结果就是该像素存储的数值，因此在同一文件中取同一位置，每次结果都相同。

图片取色器需要准确的颜色代码免费使用

像素存储了什么

每个像素都是一个很小的色块。在屏幕或图片文件中，它由三个数字存储，分别对应红、绿、蓝三个通道，取值范围都是 0 到 255。纯红色是 255, 0, 0。这三个数字在各种格式中包含的信息是相同的，因此同一种颜色可以有多种写法。

HEX、RGB 和 HSL

• HEX 把每个数字写成十六进制，每个通道两位字符。#FF0000 就是纯红色。网页、CSS 和大多数设计软件都使用这种写法。
• RGB 用十进制写出同样的数字，写作 rgb(255, 0, 0)。它与 HEX 代码表示的是同一种颜色。
• HSL 按人们描述颜色的方式来表示。色相是颜色在色轮上的角度，饱和度是颜色的鲜艳程度，明度是颜色的明暗程度。hsl(0, 100%, 50%) 就是纯红色。

把颜色粘贴到代码中时用 HEX，工具要求时用 RGB，想得到同一色相的更亮或更暗版本时用 HSL。在 HSL 中只调整明度就能保持色相不变，而手动用 HEX 做这件事就比较麻烦。如果需要检查两种颜色之间的对比度，可以参考HEX、RGB、HSL、CMYK 与对比度。

下面是一段样式表中使用颜色的例子：

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

为什么代码与屏幕颜色可能不一致

• 图片经过了压缩。 JPEG 通过平滑细节来节省空间，因此靠近边缘的像素可能与色块中央看到的颜色略有不同。
• 边缘会混合。 两种颜色交界处的像素是混合色，本身并不代表某种独立的颜色。
• 色彩配置文件不同。 取色器读取的是浏览器解码后的数值，采用 sRGB 色域。使用广色域配置文件保存的照片，在其他程序中可能显示得不一样。
• 缩放会混合像素。 以缩放后的显示尺寸截取的屏幕截图，像素可能已经混合。如果可以，请按原始尺寸截图。
• 超大图片从副本中读取。 长边超过 6000 像素的图片，会从一份 6000 像素的副本中读取，因此单个像素与原始文件可能有轻微差异。

从纯色区域的中央取色

先找到一块单一颜色的区域，再移动到它的中央。放大镜会显示指针周围 11 乘 11 个像素，方便你判断该位置是否混色。使用键盘时，按方向键每次移动十字准线一个像素，按住 Shift 则每次移动十个像素，然后按 Enter 取色。复制之前，先检查读数是否正确。

用调色板配色

照片中你关心的颜色通常不止一种。调色板会列出其中最多六种主要颜色。它的原理是把每个像素的每个通道取整到 16 个级别，统计各组的数量，并保留彼此差异明显的最常见颜色组。每个色块显示其所属组的平均值。点击色块即可复制它的 HEX 代码。调色板只能作为起点使用，因为它显示的是平均值，而不是实测的品牌色。

在不同格式之间转换

如果设计软件要求另一种格式，可以把 HEX 代码粘贴到颜色转换器中。它会在 HEX、RGB 和 HSL 之间转换，且不改变颜色，转换结果与你取到的代码保持一致。

最近取色记录与隐私

工具会在页面上保留你最近的取色记录，方便对比。这些记录只保存在当前标签页的内存中，关闭标签页后即被清除。图片本身在你的浏览器内读取，不会发送到任何服务器。

在 fixmint 中操作步骤

1. 打开图片取色器，把照片拖入页面。
2. 将指针移到目标位置。也可以先点选图片，然后用方向键逐个像素移动十字准线，按住 Shift 则每次移动十个像素。
3. 点击或按 Enter 键取色。复制之前，先检查读数是否正确。
4. 点击 HEX、RGB 或 HSL 旁边的复制按钮，复制所需的数值。
5. 如果设计软件要求另一种格式，把数值粘贴到颜色转换器中。

常见问题速答

为什么我屏幕上的颜色看起来不一样？ 你的屏幕显示的是经过色彩管理和缩放后的文件效果。请在纯色区域的中央取色，并将 HEX 代码与已知的色块进行对比。

应该复制哪种格式？ 网页和大多数设计软件使用 HEX。如果工具要求 RGB 或 HSL，就复制对应的格式。

这个工具会上传我的图片吗？ 不会。图片在你的浏览器内解码和读取。