先提取示例调色板,然后使用精确拾取和手动编辑来决定哪些颜色属于您自己的项目。 打开 图像取色器.
上传并提取起始调色板
打开图像取色器并上传一张支持的图像,或尝试使用示例。自动提取会将源文件上传到服务器。本指南中的示例是 collage-botanical.jpg,一张 1200 x 900 的花卉、叶子和桃色背景照片。
将“提取颜色数量”保留为 6 并为示例选择“主色”。“主色”偏向于图像的主要颜色,而“鲜艳”则使彩色强调色更具影响力。请求可以使用 3 到 12 种颜色;颜色区分度较低的图像可能会返回较少的颜色。
实际的“主色”结果包含 #E3B49F、#A5927F、#F3C2AC、#FBCEBA、#746E4F、#C297CA。最大的色组是 #E3B49F,约占采样可见像素的 28.88%。提取过程使用了 512 x 384 的采样;这些百分比并非全分辨率图像的精确统计。
调色板颜色可以是附近颜色的平均值。当您需要某个小细节的数值时,请拾取特定像素。
拾取并优化单个颜色
点击或轻触图像,使用放大镜检查像素。聚焦图像并使用箭头键移动一个像素,按住 Shift 加箭头键移动十个像素,然后按 Enter 键拾取。使用各自的复制按钮复制 HEX、RGB 或 HSL 值,或使用“添加到调色板”。
选择一个色块以更改其 HEX 值或颜色、向左或向右移动它,或将其移除。添加自定义颜色可接受您选择的 HEX 值。锁定颜色可在“刷新调色板”或更改提取设置生成新的起始调色板时保留选定的色块。
采样与透明度提供“源颜色”和“背景合成”选项。源颜色在相关时包含复制代码中的不透明度;背景合成显示在所选采样背景上混合后的像素。调色板色块本身是不透明的 RGB 值。编辑和拾取的颜色没有预估的源百分比。
浏览器可解码的图像使用浏览器 sRGB 采样。如果使用归一化预览,拾色器会明确将颜色和坐标标记为近似值。
本指南中的示例
要提取的颜色: 6; 主色; 无手动更改或锁定; 另存为: PNG。自动提取采样了 512 x 384 像素。
- 源图像
- 1200 x 900 像素
- 提取的颜色
- 6 种不透明颜色
- 调色板卡片
- 600 x 500 像素
- 已下载 PNG
- 9,163 字节
检查文本和背景对
打开“检查颜色对比度”。使用颜色控件设置文本和背景,输入 HEX 代码,或为任一侧使用拾取的颜色。实时文本示例可让您比较两者,比率结果附带单独的“普通 AA”、“普通 AAA”、“大号 AA”和“大号 AAA”结果。
为预期用途选择一对颜色,而不是假设提取的每种颜色都能用作文本。浅桃色和浅紫色在照片中可以搭配,但作为文本和背景组合效果不佳。
此控件仅检查该颜色对的文本对比度。它不是完整的无障碍审计,也不会决定排版、键盘交互或设计的其余部分是否可用。
通过对比度比率是一个有用的检查,但不能保证整个页面都是无障碍的。
复制数值或导出调色板
如需快速交接,请复制单个代码或使用“复制调色板 HEX 颜色”。对于文件,请选择“另存为”并选择“开始”。PNG 生成带标签的调色板图像;SVG 将色块和标签保留为矢量内容;CSS 提供带编号的颜色变量;JSON 包含 HEX、RGB 和 HSL 值。
未经编辑的六色示例导出的 palette.png 大小为 600 x 500 像素,大小为 9,163 字节。其色块顺序与调色板匹配。编辑后,您的最终调色板可能包含 1 到 12 种颜色,即使自动起始计数不同。
离开或刷新前请下载。最终导出将上传源文件和所选颜色以进行服务器处理。它会创建一个新的调色板文件,不会对原始照片进行重新着色或替换。
PNG 和 SVG 是方便的视觉参考。CSS 和 JSON 在下一步需要可重用的颜色值时非常有用。
常见问题
吸管工具返回的颜色与自动提取的颜色相同吗?
不一定。拾取的值描述特定的源像素或预览像素。自动提取会对采样的像素进行分组,并可能返回平均颜色。
透明像素会被计算在内吗?
完全透明的像素会被排除在提取之外。部分透明的像素权重会降低。源采样可以显示不透明度,但导出的调色板色块是不透明的。
刷新时锁定的颜色会怎样?
锁定的颜色保留在调色板中,而新的提取颜色会填充其他位置。保留或编辑的颜色不会被分配虚构的图像百分比。
我可以用它来获取准确的品牌颜色吗?
直接输入已知的 HEX 值或拾取合适的源像素。照片光照、压缩、色彩管理和归一化预览可能会改变采样值,因此自动生成的照片调色板不能作为原始品牌规格的证明。
构建一个可以带入下一个设计的调色板
尝试示例或使用您自己的文件,并在分享前检查结果。