颜色拾取器与调色板提取器——从图片中拾取颜色

上传任意照片,点击拾取像素颜色(HEX / RGB / HSL),或自动提取主色调配色。可下载为 JSON 或 CSS 变量。

拖入一张图片以提取其调色板

PNG, JPG, WEBP, GIF

文件在处理后自动删除无水印免费使用——无需注册

Frequently Asked Questions

上传任意 JPG、PNG、WebP 或 GIF,然后点击所显示图像上的任意位置——光标下的精确像素将被采样,并以 HEX、RGB 和 HSL 格式显示,每种格式均可一键复制。非常适合匹配品牌色、从照片中取色,或从设计样稿中提取点缀色调。

usage

图像最长边会被降采样至 320 像素,随后每个像素按其各通道的高 4 位归入分组。占比最多的分组会被平均还原为完整的 8 位色彩,按出现频率排序,并作为您的调色板返回。结果通常为 5 到 24 种主色,可在视觉上概括整幅图像。

technical

可以。下载按钮会生成两种格式:一段可直接粘贴到 :root 选择器中的 CSS 变量代码块(--color-1、--color-2…),以及一个包含每种颜色的十六进制值、RGB 分量和权重百分比的 JSON 文件。两种格式都能完美集成到设计令牌、Tailwind 配置和调色板库中。

features

不会——取色和调色板提取完全在你的浏览器中通过 HTML canvas API 完成。图片始终留在你的设备上,因此该工具可安全用于未发布的产品照片、设计草稿和受保密协议约束的品牌素材。

privacy

对于品牌视觉识别工作,5-8 种颜色是最佳区间——既能抓住主导主题,又不会冲淡点缀色的选择。对于数据可视化,我们建议使用 10-16 种颜色,以获得足够的分类色相。滑块可让你在 5 到 24 之间选择。

tips

Alpha 值低于 128 的像素会被忽略,因此透明背景不会用「背景」颜色干扰配色方案。这使得图片取色器特别适合产品抠图、贴纸图稿和独立主体。

technical

HEX(#RRGGBB)最为简洁,也是 CSS、Figma 和 Sketch 默认使用的格式。RGB 显示三个分量的取值(0–255)——在以编程方式处理图像数据时很有用。HSL(色相、饱和度、亮度)则更便于直观地调整颜色:改变色相可切换色系,调整亮度可得到不同的浅色和深色。

technical

可以。免费使用,无需账户,对图片大小或提取的调色板数量均无限制。无需安装任何东西——整个工具就是一个网页。

pricing

How Color Picker helps you get it done

Real problems it solves every day — for businesses, creators, and everyday tasks. Find the use case that fits you and start in seconds.

For Creators

品牌识别审查

从现有徽标或营销素材中提取精确的 HEX 值,添加到您的风格指南中。为定位演示文稿或路演匹配竞争对手的品牌色。

For Creators

网页设计配色方案构建

从照片或情绪板中提取主色调,导出为 CSS 变量,直接放入你的样式表。5 至 8 种颜色的黄金区间涵盖主色、强调色和中性色,足以构成一套完整设计系统的起点。

For E-commerce

电商产品列表

让产品照片的背景色与店铺主题相匹配。从运动鞋或连衣裙照片中提取主导的点缀色,将其用作商品列表的重点强调色。

Personal Use

家居与时尚灵感

拍下你喜欢的房间或穿搭,提取其配色方案。用它来挑选与现有风格相协调的涂料、面料或配饰——把视觉灵感转化为可落地的色卡。

For Developers

数据可视化配色方案

从你想要呼应的图像中提取 10 到 16 种颜色,生成一套分类配色方案(例如用水彩画来配柔和的图表,用夕阳来做暖到冷的渐变)。比随手挑选通用色调要好得多。

For Creators

游戏与 UI 素材工作流

从精灵图或 UI 样稿中提取索引调色板,导入像素画工具或游戏引擎使用。导出的调色板 JSON 可与 Aseprite、Photoshop 及大多数素材流程无缝衔接。