web前端颜色代码

1. 十六进制颜色码

格式：`RRGGBB` 或 `RGB`（简写）

css

color: ff0000; / 红色 /

background: 0f0; / 简写绿色（00ff00） /

2. RGB/RGBA

格式：`rgb(r, g, b)` 或 `rgba(r, g, b, a)`

css

color: rgb(255, 0, 0); / 红色 /

background: rgba(0, 255, 0, 0.5); / 半透明绿色 /

3. HSL/HSLA

格式：`hsl(h, s%, l%)` 或 `hsla(h, s%, l%, a)`

css

color: hsl(0, 100%, 50%); / 红色 /

background: hsla(120, 100%, 50%, 0.3); / 半透明亮绿色 /

4. 预定义颜色名称

CSS支持140+种英文颜色名称（如 `red`, `blue`, `transparent` 等）：

css

border-color: skyblue; / 天蓝色 /

background: transparent; / 透明 /

5. 其他格式

css

rrggbbaa / 最后两位为透明度（00-FF） /

background: ff000080; / 半透明红色 /

继承父元素的文字颜色，常用于图标与文字颜色同步：

css

svg { fill: currentColor; } / 与父元素文字颜色一致 /

颜色工具推荐

1. 在线取色器：

2. 浏览器开发者工具：

在Chrome/Firefox中按F12，使用颜色选择器直接拾取页面颜色。

示例总结

| 颜色 | 十六进制 | RGB | HSL | 名称 |

||-||-||

| 红色 | `ff0000`| `rgb(255,0,0)` | `hsl(0,100%,50%)` | `red` |

| 绿色 | `00ff00`| `rgb(0,255,0)` | `hsl(120,100%,50%)` | `lime` |

| 蓝色 | `0000ff`| `rgb(0,0,255)` | `hsl(240,100%,50%)` | `blue` |

根据场景选择合适的格式，十六进制和RGB常用于精确控制，HSL更适合动态调整色相或亮度。