取色器与色轮
配色方案

从图像中获取颜色选择器 — 获取十六进制和 RGB 颜色代码
选择一个像素来读取 HEX、RGB 和 HSL 值,或将主调色板导出为 JSON 或 CSS 变量。
拖入图片——点击任意像素获取其颜色代码,或提取完整调色板
PNG、JPG、WEBP、GIF
使用 颜色拾取器 可以做什么
在开始之前查看主要功能。
- 从照片中选取颜色,获取 HEX、RGB 或 HSL 值
- 提取图片中的主色调色板
- 从截图或 Logo 中提取品牌色
- 为你的设计复制颜色代码
- 将调色板导出为 JSON 或 CSS 变量
- 根据参考照片生成配色方案
设置参考
9 个设置
颜色拾取器 的可用控件。
- 处理模式预设
- 可逐个处理输入内容,也可切换到 Premium 批量模式,将同一设置应用于多个输入。可用的输入类型取决于所用工具。选项: 单张图片批量
取色器与色轮
- 随机一键
- 一键随机跳到新配色,快速获取灵感;HEX、RGB、HSL 数值和配色方案都会同步更新。
- 饱和度与亮度滑块范围: 0–100%
- 在方形色板中拖动标记,即可设置颜色的鲜艳度(从左到右)和明暗度(从上到下)。
- 色相滑块范围: 0–360 · 默认: 211
- 沿彩虹色条滑动即可选择基础色相,依次经过红、黄、绿、蓝、洋红,再回到红色。
- HEX文字输入
- 输入或粘贴任意颜色值——HEX 色值、rgb() 或 hsl() 写法,或 CSS 颜色名称——即可直接跳转到该精确颜色。
- RGB数字输入框范围: 0–255
- 当你需要精确匹配设计规范中的某个 RGB 值时,可在 0 到 255 之间分别设置红、绿、蓝三个通道。
- HSL数字输入框范围: 0–360
- 以数值方式调整色相(0–360)以及饱和度和明度(0–100)——想在不改变色相的前提下把颜色调亮或调淡时特别好用。
主色调
- 尺寸下拉框
- 选择从上传的图片中提取多少种主色(默认 8 种);数量少适合干净的品牌配色,数量多则能挖出更多点缀色。选项: 58101624
- 已拾取的颜色取色器
- 在上传的照片上点击或轻触任意位置,即可取样该像素的准确颜色;每次拾取都会添加一个带 HEX、RGB 和 HSL 数值的色板,可逐个删除,也可一次性全部清除。
常见问题
颜色拾取器 如何助您完成任务
它每天为企业、创作者和日常任务解决实际问题。找到适合您的用例并开始。
品牌识别审查
从现有徽标或营销素材中提取精确的 HEX 值,添加到您的风格指南中。为定位演示文稿或路演匹配竞争对手的品牌色。
网页设计配色方案构建
从照片或情绪板中提取主色调,导出为 CSS 变量,直接放入你的样式表。5 至 8 种颜色的黄金区间涵盖主色、强调色和中性色,足以构成一套完整设计系统的起点。
电商产品列表
让产品照片的背景色与店铺主题相匹配。从运动鞋或连衣裙照片中提取主导的点缀色,将其用作商品列表的重点强调色。
家居与时尚灵感
拍下你喜欢的房间或穿搭,提取其配色方案。用它来挑选与现有风格相协调的涂料、面料或配饰——把视觉灵感转化为可落地的色卡。
数据可视化配色方案
从你想要呼应的图像中提取 10 到 16 种颜色,生成一套分类配色方案(例如用水彩画来配柔和的图表,用夕阳来做暖到冷的渐变)。比随手挑选通用色调要好得多。
游戏与 UI 素材工作流
从精灵图或 UI 样稿中提取索引调色板,导入像素画工具或游戏引擎使用。导出的调色板 JSON 可与 Aseprite、Photoshop 及大多数素材流程无缝衔接。
上线前进行 WCAG 对比度检查
在独立的取色器与色轮中调配一组文字与背景配色,即时读取它们相对于白色和黑色的对比度,让你在上线前就发现 AA/AAA 无障碍不合格问题。
精确调配自定义涂料与印刷色
完全跳过照片——输入确切的 HEX、RGB 或 HSL 值,或拖动饱和度/色相控件,来确定某种特定的油漆调配、专色或品牌色调,然后查看它最接近的命名颜色,便于与供应商沟通。
由一张照片生成多点色板
在单张参考照片上点击多个位置——天空、裙子、花朵——构建一套精选的多色色板,而不必依赖自动提取的主色调,然后将其导出为 JSON 或 CSS,用于客户情绪板。
即时品牌配色和谐方案
输入品牌十六进制代码以计算互补色、三元色和分割互补色样,以便在社交模板或广告调色板中进行审核。
从竞品截图中提取设计令牌配色
上传竞争对手网站或应用的截图(而非照片),主色调提取器会以 HEX 代码提取出其确切的背景色、强调色和文字色,你可以将其导出为 CSS 变量——这是为设计稿或路演文稿逆向还原配色方案的快捷方法。
观看每一个转变土地
每张照片都原封不动地穿过斜线,并在另一边完成。


























