关键信息
- 分类
- 设计与颜色
- 输入类型
- 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 测试
jsonGrafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
十六进制/Unicode转换样本
十六进制和Unicode转义序列转换的测试样本
preferred input family json
分布式追踪示例
使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
preferred input family json
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
preferred input family json
相关专题
JSON 交换与格式翻译工具
在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
JSON 检查、对比与转换工具
把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
JSON Schema、Mock 数据与 API 夹具生成工具
围绕JSON Schema 生成、Mock 负载构建与 API 夹具准备整理的一组工具。
JSON 格式化、对比与规范化工具
在一个专题中比较 JSON 格式化、差异对比、日志审查、配置比较和数据规范化工具，适合需要让 JSON 更易读、更易审查的流程。
常见问题
支持哪些灰度转换方法？
支持平均值、光度（加权）、去饱和（HSL）、最大/最小值分解、单通道提取以及自定义RGB权重等多种方法。
“灰度强度”参数有什么作用？
强度参数控制颜色去饱和的程度。100%为完全灰度，0%则保持原始颜色不变，可用于创建部分去饱和的效果。
可以一次转换多个颜色吗？
可以。在“批量颜色”输入框中，用逗号分隔多个颜色值（如 #FF0000, #00FF00），即可一次性获得所有颜色的灰度结果。
“保持原始亮度”选项是什么意思？
勾选此选项后，转换算法会尝试保持原始颜色在人眼感知上的亮度，使灰度结果更符合视觉习惯。
输出结果是什么格式？
结果以可视化HTML形式展示，清晰对比原始颜色与转换后的灰度颜色，并显示对应的HEX色值。