分类

← View All Tools

灰度转换器

将颜色转换为灰度，支持多种转换方法和强度控制

0 100 100

Enter custom weights as JSON format. Example: {"red": 30, "green": 59, "blue": 11}

输入多个颜色，用逗号分隔（例如：#FF0000, #00FF00, #0000FF）

关键信息

分类
Design
输入类型
color, select, range, textarea, checkbox, text
输出类型
html
样本覆盖
4
支持 API
Yes

概览

灰度转换器是一款专业的在线颜色处理工具，能够将任意颜色精确转换为灰度值。它提供多种转换算法和强度控制，帮助设计师、开发者和内容创作者快速获得所需的单色效果。

适用场景

  • •需要为UI界面、图标或插图创建单色或黑白版本时。
  • •在打印前预览彩色设计稿的灰度效果，确保对比度和可读性。
  • •为设计系统或品牌创建一套基于单一颜色的灰度调色板。

工作原理

  • •输入一个基础颜色（如HEX值），或选择批量输入多个颜色。
  • •从多种转换方法中选择一种，如光度法、平均值法或去饱和法。
  • •通过强度滑块精确控制灰度转换的程度，或使用自定义RGB权重进行高级调整。
  • •工具即时计算并输出对应的灰度颜色值，支持并排对比查看效果。

使用场景

UI/UX设计师为深色模式或无障碍设计准备单色资源。
印刷行业人员预览彩色文档的黑白打印效果。
品牌设计师基于主色生成一套协调的灰度辅助色系。

用户案例

1. 创建单色图标系统

UI设计师
背景原因
设计师正在为一款应用设计一套图标，需要基于品牌主色 #3B82F6 生成一系列不同深浅的灰度图标，用于禁用状态或次要场景。
解决问题
手动计算不同灰度值费时费力，且难以保证视觉层次的一致性。
如何使用
在基础颜色中输入品牌色 #3B82F6。选择“光度（加权）”转换方法以获得最自然的灰度。调整“灰度强度”滑块，分别设置为100%、70%和40%，生成三个不同深浅的灰度值。
效果
快速获得了 #A1A1AA、#C8C8CC 和 #E4E4E7 三个协调的灰度色值，直接用于图标的不同状态设计。

2. 预览网页打印效果

前端开发者
背景原因
开发者需要确保一个色彩丰富的网页在黑白打印时，关键信息（如按钮、标题）依然清晰可辨。
解决问题
直接打印预览无法精确控制哪些颜色区域会变成难以区分的相似灰色。
如何使用
提取网页中的关键颜色（如按钮色 #10B981，警告色 #F59E0B，背景色 #F3F4F6），使用“批量颜色”功能一次性输入。选择“去饱和（HSL）”方法，并勾选“保持原始亮度”。
效果
清晰地看到 #10B981 变为深灰 #6B7280，#F59E0B 变为中灰 #9CA3AF，而 #F3F4F6 保持为浅灰 #F9FAFB，确保了打印时的对比度。

用 Samples 测试

json
十六进制/Unicode转换样本
十六进制和Unicode转义序列转换的测试样本
preferred input family json
json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
json
JWT 示例
从基础令牌结构到高级安全实现的全面JWT示例
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json

相关专题

JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。
JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
JsonFormat工具专题
探索 6 个围绕 json 的 format 工作流工具，快速找到相近能力。

常见问题

支持哪些灰度转换方法？

支持平均值、光度（加权）、去饱和（HSL）、最大/最小值分解、单通道提取以及自定义RGB权重等多种方法。

“灰度强度”参数有什么作用？

强度参数控制颜色去饱和的程度。100%为完全灰度，0%则保持原始颜色不变，可用于创建部分去饱和的效果。

可以一次转换多个颜色吗？

可以。在“批量颜色”输入框中，用逗号分隔多个颜色值（如 #FF0000, #00FF00），即可一次性获得所有颜色的灰度结果。

“保持原始亮度”选项是什么意思？

勾选此选项后，转换算法会尝试保持原始颜色在人眼感知上的亮度，使灰度结果更符合视觉习惯。

输出结果是什么格式？

结果以可视化HTML形式展示，清晰对比原始颜色与转换后的灰度颜色，并显示对应的HEX色值。

API 文档

请求端点

POST /zh/api/tools/color-grayscale-converter

请求参数

参数名 类型 必填 描述
baseColor color 是 -
conversionMethod select 否 -
intensity range 否 -
singleChannel select 否 -
customWeights textarea 否 Enter custom weights as JSON format. Example: {"red": 30, "green": 59, "blue": 11}
preserveLuminance checkbox 否 -
batchColors text 否 输入多个颜色，用逗号分隔（例如：#FF0000, #00FF00, #0000FF）
includeOriginal checkbox 否 -
showComparison checkbox 否 -

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-color-grayscale-converter": {
      "name": "color-grayscale-converter",
      "description": "将颜色转换为灰度，支持多种转换方法和强度控制",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-grayscale-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]