CSS 样式

CSS 所有颜色代码 深度精讲（从零到精通，底层规则 + 换算 + 简写 + 坑点）

把所有 CSS 颜色代码分类型、讲结构、讲换算、讲简写、讲透明度、讲底层等价关系，一次性吃透，以后看任何色值都能秒懂。

作者：洋柿子·2026-09-01·共 7 篇 · 当前 2

CSS 所有颜色代码 深度精讲（从零到精通，底层规则 + 换算 + 简写 + 坑点）

把所有 CSS 颜色代码分类型、讲结构、讲换算、讲简写、讲透明度、讲底层等价关系，一次性吃透，以后看任何色值都能秒懂。

一、最常用：十六进制色值 #RRGGBB

1. 基础结构

格式：# + 6位十六进制数

拆分：

plaintext

#  RR   GG   BB
   红色 绿色 蓝色

每两位控制一个颜色通道：红、绿、蓝。

2. 进制底层规则

十六进制范围：00 ~ FF

对应十进制亮度：0 ~ 255

  • 00 = 最暗（无光）
  • FF = 最亮（满亮度）

换算例子：

  • 00 → 十进制 0
  • 80 → 十进制 128
  • FF → 十进制 255

举例：

  • #FF0000：红 FF，绿 00，蓝 00 → 纯红
  • #00FF00 → 纯绿
  • #0000FF → 纯蓝
  • #000000 → 纯黑
  • #FFFFFF → 纯白

3. 十六进制简写 #RGB（3 位）

简写规则：每两位数值相同，才能缩写

规则：每一位翻倍还原成 6 位

例子：

  • #f00 → 还原 #ff0000
  • #abc → 还原 #aabbcc
  • #369 → 还原 #336699

❌ 不能简写的情况：

#123456 每两位不重复，不能缩成 3 位。

二、带透明度：8 位十六进制 #RRGGBBAA

结构

# 红 绿 蓝 透明度

最后两位 AA 是透明度通道，范围同样 00 ~ FF：

  • 00 = 完全透明
  • FF = 完全不透明

例子：

  • #FF000080：红色 + 半透明
  • #00000000：纯黑完全透明 = 和 transparent 等价

三、RGB / RGBA 函数色值

1. rgb(红, 绿, 蓝)

取值两种写法：

  1. 数值写法：0 ~ 255

css

rgb(255, 0, 0) /* 纯红 */
  1. 百分比写法：0% ~ 100%

css

rgb(100%, 0%, 0%) /* 同样纯红 */

2. rgba(红,绿,蓝, 透明度)

第四个参数 Alpha 透明度：范围 0 ~ 1

  • 0 = 完全透明
  • 1 = 完全不透明

css

rgba(255, 0, 0, 0.5) /* 红色半透明 */

底层等价

#FF0000 🔁 rgb(255,0,0)

浏览器底层识别是完全同一个颜色，只是写法不同。

四、HSL / HSLA 人类友好型颜色

不用记红绿蓝数值，按色相、饱和度、明度调色。

1. hsl(色相, 饱和度, 明度)

  1. 色相 H：0 ~ 360° 色环

    • 0° / 360° → 红
    • 120° → 绿
    • 240° → 蓝

  2. 饱和度 S：0% ~ 100%

    • 0% = 灰色
    • 100% = 最鲜艳

  3. 明度 L：0% ~ 100%

    • 0% = 纯黑
    • 100% = 纯白

例子：

css

hsl(0, 100%, 50%) /* 正红色 */
hsl(240, 100%, 50%) /* 正蓝色 */

2. hsla(色相,饱和度,明度, 透明度)

和 rgba 一样，最后加 0~1 透明度。

✅ 优势：

想变浅、变深、变艳，只改百分比就行，不用算 RGB 数值。

五、颜色关键字（命名颜色）

1. 基础预设名

red green blue black white gray orange…

浏览器内置一张映射表，直接对应固定 RGB 值。

2. 特殊关键字

  1. transparent

    底层等价：rgba(0,0,0,0) 完全透明。

  2. currentColor

    特殊继承色：

    自动继承当前元素 color 文字颜色；

    边框、阴影默认就是 currentColor。

六、灰色怎么快速写？

只要 R=G=B，就是灰色：

  • 十六进制：#999999 简写 #999

  • RGB：rgb(153,153,153)

    数值越大越白，越小越黑。

七、颜色代码通用规则（必记）

  1. 大小写不敏感

    #fff 和 #FFF 完全一样。

  2. 所有色值浏览器最终都会转成 RGB 渲染

    不管你写 #、rgb、hsl，引擎统一转成 RGB 通道亮度发给屏幕。

  3. 透明度只有两种载体

  • rgba / hsla → 0~1

  • 8 位 hex → 00~FF

    本质都是前景与背景像素混合。

八、快速对照表

表格

写法 格式 特点
6 位十六进制 #RRGGBB 设计稿最常用
3 位简写 #RGB 两两相同时缩写
8 位带透明 #RRGGBBAA 简洁带透明
rgb rgb(255,0,0) 直观数值
rgba rgba(255,0,0,.5) 带透明
hsl hsl(0,100%,50%) 好调色
关键字 red / transparent 省事简单

你要不要我给你做一套：任意十六进制 ↔ RGB ↔ HSL 手动换算口诀，以后不用工具自己就能口算转色值？

← 返回课程首页