在后台系统或表单页面中，删除操作通常使用红色作为警告色。但很多默认红色在浅色背景下不够醒目，用户容易忽略风险。通过css的hsl函数，我们可以把颜色调到高饱和红色，让删除警示更突出。
为什么默认红色不够醒目
普通红色如 #f00 或 rgb(255,0,0) 虽然纯，但在有边框、阴影或浅灰背景的按钮上，视觉权重并不高。人眼对饱和度和明度对比更敏感，因此我们需要从 hsl 的三个维度入手。
hsl 颜色模式简介
hsl 分别代表色相（Hue）、饱和度（Saturation）、亮度（Lightness）。删除警告一般取色相 0 表示红色；饱和度越高颜色越鲜艳；亮度控制明暗。增强警示感的关键是拉高饱和度并适度降低亮度。
- 色相 0：纯红色
- 饱和度 100%：最浓艳
- 亮度 40% 左右：深而醒目，不刺眼
用 css 实现高饱和红色
下面代码将删除按钮背景设为 hsl(0, 100%, 42%)，相比默认红更暗更饱和，警示感更强。
/* 删除按钮基础样式 */
.delete-btn {
background-color: hsl(0, 100%, 42%); /* 高饱和深红 */
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
/* 悬停时进一步加深 */
.delete-btn:hover {
background-color: hsl(0, 100%, 35%);
}
对比普通红色效果
| 颜色写法 | 示例 | 警示感 |
|---|---|---|
| 默认红 | rgb(255,0,0) | 一般 |
| 高饱和红 | hsl(0,100%,42%) | 强 |
注意事项
使用 hsl() 函数时，旧版浏览器可能不支持，但现代浏览器均已兼容。若项目需兼容非常老的版本，可用十六进制兜底。另外，不要只依赖颜色，重要删除仍可加文字确认。
高饱和红色能提升警示，但应配合操作确认，避免单纯靠颜色承担全部安全职责。
小结
当 css 删除警告色不够醒目，改用 hsl(0, 100%, 42%) 类的高饱和红色，是成本低、效果明显的优化方式。