开发者指南
颜色转换和对比度检查:更实用的 UI 配色流程
颜色工具的价值不只是把 HEX 转成 RGB。它应该帮助设计师和开发者把视觉意图落到 CSS、组件状态、可访问性和长期维护上。
转换格式时保持设计意图
设计稿、品牌规范、截图和 CSS 可能使用不同颜色格式。准确转换 HEX、RGB、HSL 等格式,可以减少凭感觉取色造成的偏差。
用 HSL 做可控调整
HSL 更适合调整明度和饱和度。制作 hover、disabled、focus、边框和浅色背景时,用 HSL 微调通常比直接改 HEX 更容易保持同一色相。
尽早检查文字对比度
对比度问题越晚发现,修改成本越高。正文、小号标签、按钮、链接、提示和错误状态都应该在真实背景上检查,而不是只看单独的颜色值。
不要只依赖颜色表达状态
即使颜色对比足够,也不应该只靠颜色传达成功、失败、警告或禁用状态。配合文字、图标、边框或布局,界面会更容易理解。
让调色板保持克制
少量稳定颜色比大量一次性颜色更容易维护。每新增一个颜色,都要判断它是设计系统的一部分,还是只解决当前页面的小问题。
相关工具
打开 Color Tool,转换颜色并检查对比度。