MUTools
颜色与设计检查设计/配色

颜色名称与相近色查询

颜色名称与相近色查询可以帮你找到与输入颜色最接近的「颜色名称」,也能根据名称反查颜色。输入 #FF6347 这样的 HEX 或 rgb(255, 99, 71),工具会按相近程度依次列出 CSS 命名颜色(Web 颜色名称),并显示各自的 HEX 与接近度(ΔE)。反过来输入 tomato 等颜色名称,则会立即给出该颜色的 HEX 与 RGB。

输入 HEX/RGB/HSL 颜色代码可查找最相近的颜色名称,输入颜色名称可查看对应的颜色。

输入的颜色
#1E90FF
rgb(30, 144, 255)

最相近的 CSS 颜色名称

  • dodgerblue完全匹配
    #1E90FF · ΔE 0.000
  • cornflowerblue
    #6495ED · ΔE 0.059
  • royalblue
    #4169E1 · ΔE 0.102
  • steelblue
    #4682B4 · ΔE 0.113
  • mediumslateblue
    #7B68EE · ΔE 0.117
  • deepskyblue
    #00BFFF · ΔE 0.127
  • mediumpurple
    #9370DB · ΔE 0.135
  • slateblue
    #6A5ACD · ΔE 0.149

“ΔE”是 OKLab 色彩空间中的感知接近度指标(数值越小越接近)。这是近似值,与 CIE ΔE2000 不同。

全部处理全程在浏览器中完成,输入的颜色不会发送到任何服务器。

取色器

从图片中提取颜色并获取颜色代码的免费取色器,可用放大镜按像素精确拾取,支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。

  • 设计/配色
  • 效率

图片配色提取

在线图片取色工具,上传图片即可自动提取主色调与代表色,生成可用的调色板。支持 HEX/RGB/HSL 切换、显示各颜色占比、自由调整 4–12 种颜色,并可一键导出为 CSS 变量、SCSS、Tailwind 配置或 JSON。图片不上传服务器,全程在浏览器中完成,免费使用、无需注册。

  • 提取
  • 设计/配色

配色生成器

只需选择一种基础色,即可基于配色理论自动生成互补色、类似色、三角配色等配色方案的免费在线配色工具。可导出为 CSS 变量、Tailwind、SCSS、JSON 格式,并能查看对比度参考,全程在浏览器中完成。

  • 生成器
  • 设计/配色

颜色代码转换

在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具,支持透明度(RGBA、8 位 HEX)与 CMYK 参考值,一键复制任意格式,全程在浏览器中完成。

  • 转换
  • 设计/配色

对比度检查器

实时计算前景色与背景色对比度的免费颜色对比度检查器,判定 WCAG 2.1/2.2 AA、AAA 是否达标,并支持达标色建议、色盲(色觉)模拟与 APCA,全程在浏览器中完成。

  • 检查
  • 设计/配色
  • 无障碍

CSS 渐变生成

通过可视化界面调整颜色、方向和色标,即可自动生成 CSS 渐变代码的免费在线工具。支持线性、径向、圆锥(conic)渐变,可调整不透明度,并能导出为 CSS 变量、Tailwind、SCSS 格式,还支持分享 URL。复制即用,全程在浏览器中完成。

  • 生成器
  • 开发
  • 设计/配色

颜色名称与相近色查询是什么?

颜色名称与相近色查询可以帮你找到与输入颜色最接近的「颜色名称」,也能根据名称反查颜色。输入 #FF6347 这样的 HEX 或 rgb(255, 99, 71),工具会按相近程度依次列出 CSS 命名颜色(Web 颜色名称),并显示各自的 HEX 与接近度(ΔE)。反过来输入 tomato 等颜色名称,则会立即给出该颜色的 HEX 与 RGB。

当你想知道「这个 HEX 是什么颜色名称」或「这种颜色叫什么」时,这个工具可以一并完成颜色名称查询、rgb 转颜色名、十六进制颜色名称的确认。在你想用命名颜色编写 CSS,或为颜色取一个易于沟通的名字时尤其方便。

工具不是简单比较数值差异,而是在贴近人眼感知的 OKLab 色彩空间中计算距离,因此「看起来最接近」的颜色会排在前面。输入框同时接受颜色代码与颜色名称,无需先选择格式。你也可以用系统拾色器选色,或从命名颜色列表中挑选。

全部处理全程在浏览器中完成,输入的颜色不会发送到任何服务器。无需注册、无需安装,打开即用。

使用方法

  1. 在输入框粘贴 HEX、RGB 或 HSL 颜色代码(会自动识别格式),也可以用拾色器选择颜色。
  2. 工具会按相近程度依次显示最相近的 CSS 颜色名称。若有完全一致的名称,会标注「完全匹配」。
  3. 用复制按钮复制颜色名称或 HEX 值,直接用于 CSS 或设计工具。
  4. 若想用名称反查颜色,输入颜色名称(例如 tomato),即可看到对应的 HEX 与 RGB。
  5. 展开「从列表中查找命名颜色」,即可从完整的 CSS 颜色名称列表中挑选并确认。

使用场景

  • 希望为设计稿中的 HEX 找到相近且易懂的颜色名称的网页设计师。
  • 更想用命名颜色而非数值来设置 CSS color 属性的前端工程师。
  • 想确认 tomato、teal 等 CSS 颜色名称实际对应什么 HEX、RGB 的开发者。
  • 想为品牌色或取色得到的颜色起一个便于沟通的名字的设计师与负责人。
  • 需要快速查找相近颜色名称、把 rgb 转换成颜色名的用户。

注意事项

  • 颜色名称涵盖 CSS 标准化的 148 个命名颜色(Web 颜色名称)。由于名称本身是 CSS 关键字,各语言界面下均以英文显示。
  • 接近度「ΔE」是贴近人眼感知的 OKLab 色彩空间中的欧氏距离,与印刷领域使用的 CIE ΔE2000 不同,仅作为排序的参考。
  • 指向同一颜色的别名(aqua 与 cyan、gray 与 grey 等)在相近结果中会按 HEX 合并为一条;反查与列表中则保留全部名称。
  • 查询与计算全程在浏览器中完成,输入的颜色不会发送到任何地方。

常见问题

输入的颜色会被发送到服务器吗?
不会。颜色名称查询与相近色计算全程在浏览器中完成,处理工作配色或品牌色时也很放心。
可以根据 HEX 查询颜色名称吗?
可以。输入 `#FF6347` 这样的 HEX,工具会按视觉相近程度列出最相近的 CSS 命名颜色(Web 颜色名称)。若有完全一致的名称会标注「完全匹配」,适合查询十六进制颜色名称。
可以用颜色名称反查 HEX、RGB 吗?
可以。输入 `tomato` 等 CSS 颜色名称,工具会显示对应的 HEX 与 RGB,让你也能从颜色名称反查到代码。
「相近颜色」是怎么判定的?
工具在贴近人眼感知的 OKLab 色彩空间中计算输入颜色与各命名颜色的距离(ΔE),再由小到大排序。由于比较的是感知上的接近度而非单纯的 RGB 差异,看起来最接近的颜色会排在前面。
颜色名称会翻译成中文吗?
CSS 颜色名称是标准关键字(代码中使用的标识符),因此无论界面语言如何,都以英文原样显示。