取色器与色轮

最接近的颜色名称: dodgerblue
在白底上 3.31:1(AA Large) · 在黑底上 6.35:1(AA)

配色方案

互补色
邻近色
三角色
分裂互补色
四角色
单色系
“颜色拾取器”结果预览

从图像中获取颜色选择器 — 获取十六进制和 RGB 颜色代码

选择一个像素来读取 HEX、RGB 和 HSL 值,或将主调色板导出为 JSON 或 CSS 变量。

拖入图片——点击任意像素获取其颜色代码,或提取完整调色板

PNG、JPG、WEBP、GIF

使用 颜色拾取器 可以做什么

在开始之前查看主要功能。

  • 从照片中选取颜色,获取 HEX、RGB 或 HSL 值
  • 提取图片中的主色调色板
  • 从截图或 Logo 中提取品牌色
  • 为你的设计复制颜色代码
  • 将调色板导出为 JSON 或 CSS 变量
  • 根据参考照片生成配色方案

设置参考

颜色拾取器 的可用控件。

处理模式预设
可逐个处理输入内容,也可切换到 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,用于客户情绪板。

市场营销

即时品牌配色和谐方案

输入品牌十六进制代码以计算互补色、三元色和分割互补色样,以便在社交模板或广告调色板中进行审核。

网站与 SEO

从竞品截图中提取设计令牌配色

上传竞争对手网站或应用的截图(而非照片),主色调提取器会以 HEX 代码提取出其确切的背景色、强调色和文字色,你可以将其导出为 CSS 变量——这是为设计稿或路演文稿逆向还原配色方案的快捷方法。

观看每一个转变土地

每张照片都原封不动地穿过斜线,并在另一边完成。