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

上传任意照片,点击选择像素颜色(十六进制 / RGB / HSL),或自动提取主色调色板。下载为JSON或CSS变量。

投放一张图片以提取调色板

关于Color Picker

用每通道4位分桶法将你的图像量化成要求数量的主导色,然后按频率排序。它完全运行在浏览器中——你的图片永远不会离开你的设备。

Frequently Asked Questions

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

usage

图像在最长边被下采样到320像素,然后每个像素按每个通道的前4位分入桶。最密集的桶会被平均回全8位色彩,按频率排序,然后返回为你的调色板。结果通常是5到24种主导色彩,视觉上总结了图像。

technical

是的。下载按钮产生两种格式:一个是 CSS 变量块,可以粘贴到 :root 选择器(--color-1, --color-2...),另一个是包含每种颜色的十六进制、RGB 分量和权重百分比的 JSON 文件。两种格式都能干净利落地集成到设计标记、Tailwind配置和调色板库中。

features

不——颜色选择和调色板提取完全在浏览器中通过HTML画布API完成。图片会留在你的设备上,这使得该工具对未发布的产品照片、草稿和品牌资产的保密协议(NDA)是安全的。

privacy

对于品牌识别来说,5-8色是最佳选择——它捕捉了主导主题,同时不稀释点缀选择。对于数据可视化,我们建议使用10-16种颜色,这样你就有足够的分类色调。滑块可以让你在5到24之间选择。

tips

alpha低于128的像素被忽略,因此透明背景不会用“背景”色彩污染调色板。这使得图像色彩选择器特别适合产品剪纸、贴纸艺术和孤立主题。

technical

HEX(#RRGGBB)是最紧凑的,是CSS、Figma和Sketch默认使用的。RGB显示从0到255的三个分量值——在程序化处理图像数据时非常有用。HSL(色相、饱和度、明度)在调整颜色方面非常直观:通过调整色调来改变色系,调整亮度以适应色调和色调。

technical

是的。免费,无需账号,图片大小和调色板数量无限制。无需安装任何东西——整个工具就是一个网页。

pricing

Use Cases

品牌识别审计

从现有标志或营销资产中提取精确的HEX值,以融入你的风格指南中。匹配竞争对手品牌的颜色,用于定位牌或球场。

design

网页设计调色板构建

从照片或情绪板中提取主色调,导出为CSS变量,然后放入样式表。5-8色甜点涵盖了主色、点缀色和中性色,形成完整的设计系统种子。

design

电子商务产品列表

将产品照片背景颜色与你的店铺主题相匹配。从运动鞋或连衣裙照片中选取主色调,作为商品的亮点。

ecommerce

室内设计与时尚灵感

拍摄你喜欢的房间或服装,提取色彩。用它来选择与现有方案相得益彰的颜料、面料或配饰——将视觉灵感转化为可操作的样片。

lifestyle

数据可视化方案

生成一个由你想唤起的图像衍生的10-16种颜色的分类调色板(例如,水彩画作为柔和的图表,夕阳作为暖到冷的渐变)。比选普通色调要好。

data

游戏与UI资产工作流程

从精灵艺术或UI模型中提取索引色彩调色板,导入像素艺术工具或游戏引擎。调色板的JSON导出功能可与Aseprite、Photoshop及大多数资源管线集成。

gamedev