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