灰度转换器

背景

设计师正在为一款应用设计一套图标，需要基于品牌主色 #3B82F6 生成一系列不同深浅的灰度图标，用于禁用状态或次要场景。

问题

手动计算不同灰度值费时费力，且难以保证视觉层次的一致性。

如何使用

在基础颜色中输入品牌色 #3B82F6。选择“光度（加权）”转换方法以获得最自然的灰度。调整“灰度强度”滑块，分别设置为100%、70%和40%，生成三个不同深浅的灰度值。

结果

快速获得了 #A1A1AA、#C8C8CC 和 #E4E4E7 三个协调的灰度色值，直接用于图标的不同状态设计。

背景

开发者需要确保一个色彩丰富的网页在黑白打印时，关键信息（如按钮、标题）依然清晰可辨。

问题

直接打印预览无法精确控制哪些颜色区域会变成难以区分的相似灰色。

如何使用

提取网页中的关键颜色（如按钮色 #10B981，警告色 #F59E0B，背景色 #F3F4F6），使用“批量颜色”功能一次性输入。选择“去饱和（HSL）”方法，并勾选“保持原始亮度”。

结果

清晰地看到 #10B981 变为深灰 #6B7280，#F59E0B 变为中灰 #9CA3AF，而 #F3F4F6 保持为浅灰 #F9FAFB，确保了打印时的对比度。