MUTools

颜色与设计工具

关于颜色与设计工具

帮助配色与设计工作的免费工具集，包含取色器、颜色代码转换、对比度检查、调色板生成等。全部在浏览器中运行，免注册、免安装。

适用于确定 UI 配色、检查符合无障碍（WCAG）的对比度、挑选品牌色等场景。适合设计师、网页开发者、前端工程师等所有处理颜色的人。

颜色与设计工具一览

取色器

从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 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。复制即用，全程在浏览器中完成。

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

CSS 阴影生成

box-shadow 生成器，拖动滑块即可实时生成 CSS 阴影（box-shadow、drop-shadow）。支持多图层、inset 内阴影，以及新拟态、长阴影、发光等预设，可导出为 CSS、CSS 变量、Tailwind、SCSS。还支持分享 URL，全程在浏览器中完成。

  • 生成器
  • 设计/配色

颜色名称与相近色查询

免费的颜色名称查询工具：输入 HEX 或 RGB 即可查找最相近的 CSS / Web 颜色名称，也可用颜色名称反查 HEX、RGB。适合查询十六进制颜色名称、相近颜色与 CSS 颜色名称。全程在浏览器中完成。

  • 检查
  • 设计/配色

Tailwind 色阶生成

只需指定一种基础色，即可自动生成 Tailwind 风格 50-950（11 级色阶）配色的免费 tailwind 调色板生成器。可导出为 Tailwind v4 的 @theme（OKLCH）、v3 的 config、CSS 变量、JSON，并支持 HEX/OKLCH/HSL/RGB 显示切换与对比度参考，全程在浏览器中完成。

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

其他分类