HTML 颜色值
颜色名只有一百多个，而人眼能分辨的颜色远不止这些。HTML/CSS 用颜色值精确描述任意颜色：十六进制（HEX）、RGB、RGBA、HSL、HSLA，其中 HEX 与 RGB 用得最多，掌握后即可调配出约 1600 万种颜色。
十六进制 HEX
HEX 用 #RRGGBB 表示颜色：RR、GG、BB 分别是红、绿、蓝分量，取值 00~FF（十六进制）。#FF0000 红分量最大、其余为 0，所以是纯红；#000000 全 0 为黑色，#FFFFFF 全 FF 为白色。
<p style="color:#FF0000;">纯红 #FF0000</p>
<p style="color:#00FF00;">纯绿 #00FF00</p>
<p style="color:#0000FF;">纯蓝 #0000FF</p>
<p style="color:#FFFFFF;background-color:#000000;">黑底白字</p>
在浏览器中显示为：红、绿、蓝三行彩色文字，以及一行黑底白字。若两位相同可缩写，如 #FF0000 可写 #F00。
RGB 与 RGBA
RGB 用 rgb(红, 绿, 蓝) 表示，三个分量取值 0~255：rgb(255,0,0) 等价于 #FF0000。RGBA 比 RGB 多一个 A（Alpha）透明度参数，取值 0~1，0 全透明、1 不透明，可做出半透明效果。
<p style="color:rgb(255,0,0);">rgb(255,0,0) 纯红</p>
<p style="color:rgba(255,0,0,0.5);">rgba 半透明红</p>
在浏览器中显示为：第一行纯红文字，第二行与第一行相同但明显偏淡（半透明）的红色文字。
HSL 与 HSLA
HSL 用色相、饱和度、明度描述颜色：hsl(色相, 饱和度%, 明度%)。色相取值 0360，0/360 是红、120 是绿、240 是蓝；饱和度与明度为百分比。HSLA 同样多一个 01 的透明度参数。
<p style="color:hsl(120,100%,50%);">hsl(120,100%,50%) 纯绿</p>
<p style="color:hsla(120,100%,50%,0.4);">40% 透明的绿</p>
在浏览器中显示为：第一行纯绿色文字，第二行为同色但明显半透明的绿色文字。
几种写法的换算关系
RGB 的三个分量转成两位十六进制即可得 HEX：分量值除以 16 的商与余数分别对应一个十六进制位，如 255 转成 FF、128 转成 80。rgb(255,0,0) 与 #FF0000、hsl(0,100%,50%) 表示的是同一种纯红，效果完全一致。
| 写法 | 示例 | 说明 |
|---|---|---|
| 颜色名 | red | 直观，数量少 |
| HEX | #FF0000 | 紧凑，最常用 |
| RGB | rgb(255,0,0) | 直观控制三原色分量 |
| RGBA | rgba(255,0,0,0.5) | 带透明度 |
| HSL | hsl(0,100%,50%) | 符合直觉的色相调节 |
| HSLA | hsla(0,100%,50%,0.5) | 色相 + 透明度 |
获取颜色值的工具
不必手工换算每个颜色：系统自带的取色器、浏览器的开发者工具（F12 的 Styles 面板）、各类在线取色网站，都能直接给出选中颜色的 HEX/RGB 值，复制到代码里即可使用，准确又省事。
小结
想精确控制颜色就用颜色值：HEX 的 #RRGGBB 与 RGB 的 0~255 分量一一对应，需要透明则用 RGBA/HSLA。配合取色工具，你就能调配出任何想要的颜色。