工具95

编辑 / 实用图像指南

如何选取图像颜色并创建调色板

从您注意到的颜色转向您可以使用的数值。

照片可以提供有用的色彩方向,但自动调色板只是一个起点。图像取色器结合了放大像素拾取器、可编辑色板以及用于设计或代码的导出功能。本指南使用了从植物样本中提取六种颜色的实际结果。

跟随指南
真实的输入与下载结果
处理前 在温暖的桃色背景下,紫色花朵和绿色叶子的原始照片。

collage-botanical.jpg: 1200 x 900 像素, 199,152 字节。

处理后 从植物照片中提取的实际六色调色板,带有标记的桃色、灰褐色、橄榄色和紫色色块。

palette.png: 600 x 500 像素, 9,163 字节。

原始植物样本和实际的六色 PNG 调色板。颜色从缩减的样本中分组;卡片包含提取的 HEX 值,而不是重新着色的照片。
广告
快速视频教程 How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. 英语旁白 观看视频

How to pick an image color and export a palette

广告

先提取示例调色板,然后使用精确拾取和手动编辑来决定哪些颜色属于您自己的项目。 打开 图像取色器.

01

上传并提取起始调色板

打开图像取色器并上传一张支持的图像,或尝试使用示例。自动提取会将源文件上传到服务器。本指南中的示例是 collage-botanical.jpg,一张 1200 x 900 的花卉、叶子和桃色背景照片。

将“提取颜色数量”保留为 6 并为示例选择“主色”。“主色”偏向于图像的主要颜色,而“鲜艳”则使彩色强调色更具影响力。请求可以使用 3 到 12 种颜色;颜色区分度较低的图像可能会返回较少的颜色。

实际的“主色”结果包含 #E3B49F、#A5927F、#F3C2AC、#FBCEBA、#746E4F、#C297CA。最大的色组是 #E3B49F,约占采样可见像素的 28.88%。提取过程使用了 512 x 384 的采样;这些百分比并非全分辨率图像的精确统计。

调色板颜色可以是附近颜色的平均值。当您需要某个小细节的数值时,请拾取特定像素。

02

拾取并优化单个颜色

点击或轻触图像,使用放大镜检查像素。聚焦图像并使用箭头键移动一个像素,按住 Shift 加箭头键移动十个像素,然后按 Enter 键拾取。使用各自的复制按钮复制 HEX、RGB 或 HSL 值,或使用“添加到调色板”。

选择一个色块以更改其 HEX 值或颜色、向左或向右移动它,或将其移除。添加自定义颜色可接受您选择的 HEX 值。锁定颜色可在“刷新调色板”或更改提取设置生成新的起始调色板时保留选定的色块。

采样与透明度提供“源颜色”和“背景合成”选项。源颜色在相关时包含复制代码中的不透明度;背景合成显示在所选采样背景上混合后的像素。调色板色块本身是不透明的 RGB 值。编辑和拾取的颜色没有预估的源百分比。

浏览器可解码的图像使用浏览器 sRGB 采样。如果使用归一化预览,拾色器会明确将颜色和坐标标记为近似值。

本指南中的示例

要提取的颜色: 6; 主色; 无手动更改或锁定; 另存为: PNG。自动提取采样了 512 x 384 像素。

源图像
1200 x 900 像素
提取的颜色
6 种不透明颜色
调色板卡片
600 x 500 像素
已下载 PNG
9,163 字节
03

检查文本和背景对

打开“检查颜色对比度”。使用颜色控件设置文本和背景,输入 HEX 代码,或为任一侧使用拾取的颜色。实时文本示例可让您比较两者,比率结果附带单独的“普通 AA”、“普通 AAA”、“大号 AA”和“大号 AAA”结果。

为预期用途选择一对颜色,而不是假设提取的每种颜色都能用作文本。浅桃色和浅紫色在照片中可以搭配,但作为文本和背景组合效果不佳。

此控件仅检查该颜色对的文本对比度。它不是完整的无障碍审计,也不会决定排版、键盘交互或设计的其余部分是否可用。

通过对比度比率是一个有用的检查,但不能保证整个页面都是无障碍的。

04

复制数值或导出调色板

如需快速交接,请复制单个代码或使用“复制调色板 HEX 颜色”。对于文件,请选择“另存为”并选择“开始”。PNG 生成带标签的调色板图像;SVG 将色块和标签保留为矢量内容;CSS 提供带编号的颜色变量;JSON 包含 HEX、RGB 和 HSL 值。

未经编辑的六色示例导出的 palette.png 大小为 600 x 500 像素,大小为 9,163 字节。其色块顺序与调色板匹配。编辑后,您的最终调色板可能包含 1 到 12 种颜色,即使自动起始计数不同。

离开或刷新前请下载。最终导出将上传源文件和所选颜色以进行服务器处理。它会创建一个新的调色板文件,不会对原始照片进行重新着色或替换。

PNG 和 SVG 是方便的视觉参考。CSS 和 JSON 在下一步需要可重用的颜色值时非常有用。

实用详情

常见问题

吸管工具返回的颜色与自动提取的颜色相同吗?

不一定。拾取的值描述特定的源像素或预览像素。自动提取会对采样的像素进行分组,并可能返回平均颜色。

透明像素会被计算在内吗?

完全透明的像素会被排除在提取之外。部分透明的像素权重会降低。源采样可以显示不透明度,但导出的调色板色块是不透明的。

刷新时锁定的颜色会怎样?

锁定的颜色保留在调色板中,而新的提取颜色会填充其他位置。保留或编辑的颜色不会被分配虚构的图像百分比。

我可以用它来获取准确的品牌颜色吗?

直接输入已知的 HEX 值或拾取合适的源像素。照片光照、压缩、色彩管理和归一化预览可能会改变采样值,因此自动生成的照片调色板不能作为原始品牌规格的证明。

轮到你了

构建一个可以带入下一个设计的调色板

尝试示例或使用您自己的文件,并在分享前检查结果。

打开 图像取色器

图像详情

语言38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

选择您的语言。视频教程目前使用英语旁白。