用 HSL 调提示色更直观可靠,因 H、S、L 三维度独立可控;推荐参数:H 90–160°、S 60%–85%、L 80%–92%,并确保文字对比度≥4.5:1。

直接调高 HSL 中的亮度(L)和饱和度(S),能让提示色更醒目,同时保持原有色相(H)不跑偏——比如把 hsl(120, 30%, 70%) 改成 hsl(120, 70%, 85%),绿色立刻更鲜亮、更易被扫到。
为什么 用 HSL 调比 HEX/RGB 更靠谱
HSL 把颜色拆成“色调 - 饱和度 - 亮度”三个直观维度,改提示色时不用反复试错:想更抢眼?直接拉高 S 和 L;想不刺眼又清晰?压一点 S、提一点 L。而 HEX 或 RGB 改一个值常连带影响多个视觉属性,容易调出灰蒙蒙或荧光辣眼的效果。
成功提示色推荐参数范围
适合大多数界面的成功提示(兼顾可访问性与友好感):
- 色相 H:保持在 90–160° 之间(青绿到翠绿),避免偏黄显脏或偏蓝显冷
- 饱和度 S:60%–85%,低于 50% 容易发灰,高于 90% 可能像荧光笔
- 亮度 L:80%–92%,太暗(94%)缺对比、显廉价
顺手检查可访问性
调完别急着上线,用 浏览器 插件(如 axe 或 Color Contrast Analyzer)测下文字与背景的对比度。成功提示通常配白色或浅灰字,确保 对比度 ≥ 4.5:1(AA 级)。例如:
hsl(140, 75%, 30%) 做底色 + 白字是够的,但 hsl(140, 50%, 70%) 就可能不够——这时候不是加亮,而是换深一点的文字色或提高底色饱和度。
基本上就这些,不复杂但容易忽略。
立即学习 “ 前端免费学习笔记(深入)”;
以上就是