刚入行做前端时,设计师给我一个颜色 #0F62FE,我直接 CSS 里用了。 后来要做一个"鼠标悬停时颜色深一点"的效果,我对着 #0F62FE 这串十六进制发懵 —— 怎么把它"调深一点"?难道要一位位手算十六进制?
后来才知道,这种"调深 / 调浅 / 调鲜艳"的操作,用 HSL 表示法一个数字就搞定。 HEX / RGB / HSL 三种颜色写法各有擅长场景。这篇讲清楚它们的区别和实战用法。
三种写法,同一个颜色
同一个品牌蓝,三种表示法:
- HEX:
#0F62FE - RGB:
rgb(15, 98, 254) - HSL:
hsl(220, 99%, 53%)
它们指向完全相同的颜色,只是表示法不同。理解每种的思路:
HEX 和 RGB:红绿蓝三原色
HEX 和 RGB 本质是一回事 —— 都是红(R)、绿(G)、蓝(B)三原色的值, 只是 HEX 用十六进制写。
rgb(15, 98, 254):红 15,绿 98,蓝 254(每个 0-255)#0F62FE:0F = 15,62 = 98,FE = 254(十六进制,两位一组)
HEX 的优势:简洁。#0F62FE 比 rgb(15,98,254) 短, CSS 里最常用。
RGB 的优势:直观对应屏幕的红绿蓝发光,适合做颜色运算(代码里调整某个通道)。
但它们的共同问题:不符合人类直觉。你想"把这个蓝调深一点", 对着 15, 98, 254 三个数,根本不知道该改哪个、改多少。
HSL:符合人类直觉的颜色
HSL 用三个符合直觉的维度描述颜色:
- H(色相):0-360 度,决定"是什么颜色"(0 红、120 绿、240 蓝)
- S(饱和度):0-100%,决定"多鲜艳"(0% 是灰,100% 最鲜艳)
- L(明度):0-100%,决定"多亮"(0% 黑,100% 白,50% 标准)
hsl(220, 99%, 53%) = 色相 220(蓝)+ 饱和度 99%(很鲜艳)+ 明度 53%(中等亮度)。
HSL 的杀手锏:想"调深一点",把 L 从 53% 改成 35%,色相饱和度不变, 得到同一个蓝的深色版。一个数字搞定我当年发懵的需求。
什么场景用哪个
用 HEX:日常 CSS 写颜色
最简洁,前端写固定颜色用 HEX。设计师交付色值也多用 HEX。
用 RGB / RGBA:需要透明度 / 颜色运算
rgba(15, 98, 254, 0.5) 做半透明。代码里动态计算颜色用 RGB 数值方便。
用 HSL:调色板 / 派生颜色 / 主题
做一套配色用 HSL 最爽:固定色相饱和度,只调明度, 就能得到主色的深浅系列。下面详细讲。
透明度怎么处理
三种写法都有带透明度的版本:
- 8 位 HEX:
#0F62FE80,最后两位是透明度(80 ≈ 50%) - RGBA:
rgba(15, 98, 254, 0.5),最后是 0-1 的透明度 - HSLA:
hsla(220, 99%, 53%, 0.5)
做半透明遮罩 / 阴影 / 叠加层时用带透明度的版本。
用 HSL 从主色生成一套配色
这是 HSL 最实用的场景。假设主色 hsl(220, 99%, 53%):
1. 深浅系列(固定色相,调明度)
- 浅背景:
hsl(220, 99%, 95%)(明度调到 95%) - 主色:
hsl(220, 99%, 53%) - 深文字:
hsl(220, 99%, 30%)(明度调到 30%)
2. 邻近色(色相 ±30 度)
hsl(190, ...) 偏青,hsl(250, ...) 偏紫, 跟主色搭配和谐。
3. 互补色(色相 +180 度)
hsl(40, ...) 是橙色,跟蓝色形成强对比,适合做强调 / 警告色。
设计稿颜色和网页对不上怎么办
常见原因:
- 色彩空间:设计软件用 P3 广色域,浏览器默认 sRGB,同一个值显示不同
- 显示器没校色:不同屏幕显示有差异
- 透明度叠加:半透明色叠在不同背景上视觉不同
解决:前端统一用 sRGB + 精确色值(不要"看着像"), 设计交付时确认 HEX / RGB 数值。
总结
三种颜色写法:HEX 简洁(日常 CSS)、RGB 直观(透明度 / 运算)、HSL 符合直觉(调色板 / 派生)。 记住关键:想调深浅 / 做配色,转成 HSL 改明度色相,比对着 HEX 硬算简单一万倍。
站里的颜色转换工具 支持 HEX / RGB / HSL 实时互转 + 可视化拾色器 + 透明度调整,做配色派生很顺手,纯本地运行。