---
URL: "/zh-CN/blog/2026-02/css-colors.html"
LLMS_URL: "/zh-CN/blog/2026-02/css-colors.md"
lastUpdated: true
commentabled: true
recommended: true
title: "颜色与渐变"
description: "hex、rgb、hsl、渐变、混合模式"
date:

pageClass: "blog-page-class"
cover: "/covers/css.svg"
---

---
lastUpdated: true
commentabled: true
recommended: true
title: 颜色与渐变
description: hex、rgb、hsl、渐变、混合模式
date: 2026-02-03 13:00:00 
pageClass: blog-page-class
cover: /covers/css.svg
---

CSS 颜色与渐变，绝对是我刚学前端时的“颜值瓶颈”——最开始只会抄设计稿上的 `hex` 色值，调个主题色 `hover` 效果，要反复改几十次色值才能勉强满意；写渐变要么过渡得生硬又突兀，要么角度写错导致整体错位，混合模式更是看都不敢看，总觉得太复杂。

直到踩够了坑、慢慢摸透了每种用法才发现，`hex`、`rgb`、`hsl`各有各的方便，渐变随手写就能出高级感，混合模式用对了还能省很多事。今天就把我实打实的实操经验、踩过的坑，还有整理的干货分享给大家，新手跟着学，能少走很多弯路。

## 一、颜色表示法：按需选择，我常用这3种（避坑指南） ##

CSS 颜色表示法其实有一大堆，关键字、`hex`、`rgb`、`hsl`、`oklch` 等等，但我日常开发里，真正用得上的就3种——`hex`、`rgb`、`hsl`。`oklch` 虽然色域广、颜色更鲜艳，但兼容性还不够好，我目前项目里还没敢用；关键字也就偶尔用个`transparent`，其他的基本不碰。

新手真不用贪多，把这3种核心用法吃透，就能应对99%的开发场景。

```css
/* 关键字：简单但不灵活，仅用在透明、基础色，我很少用 */
color: red;
background: transparent; /* 常用，透明背景 */

/* hex：最常用，简洁好复制，6位、8位（含透明度）都常用 */
color: #333; /* 3位简写，等价于#333333，适合基础灰色系 */
color: #333333; /* 6位标准写法，精准度高，日常最常用 */
color: #3333; /* 4位简写 + 透明度，33是透明度，等价于#33333333 */
color: #33333380; /* 8位写法，最后两位80=50%透明度，我做半透明常用这个 */

/* rgb / rgba：直观控制红绿蓝，带透明度，新手易理解 */
color: rgb(51, 51, 51); /* 无透明，和#333一致 */
color: rgba(51, 51, 51, 0.5); /* 传统透明写法 */
color: rgb(51 51 51 / 0.5);  /* 新语法，空格分隔，更简洁，我现在优先用 */

/* hsl / hsla：色相、饱和度、明度，调色超方便，做主题色首选 */
color: hsl(0, 100%, 50%);    /* 红：色相0，饱和度100%，明度50% */
color: hsl(120, 100%, 50%);  /* 绿：色相120 */
color: hsl(240, 100%, 50%);  /* 蓝：色相240 */
color: hsl(0 0% 20% / 0.5);  /* 新语法 + 透明度，灰色50%透明 */

/* oklch：现代色空间，色域更广，颜色更鲜艳，但兼容性一般，我暂不用 */
color: oklch(0.6 0.2 250);
```

我的实操心得+踩坑吐槽：这几种表示法，我踩过不少冤枉路，后来总结了一套固定用法，再也没出过错，新手直接照搬就行：

- 日常固定色（边框、基础文字色），首选hex：最简洁，设计稿给的色值基本都是hex，直接复制粘贴就行，不用额外转换，能省不少时间，也避免转换出错。
- 需要半透明效果（遮罩、悬浮层、半透明背景），必用 `rgb` 新语法：比 `8` 位 `hex` 直观太多，`0.5`就是`50%`透明度，一眼就能看懂。我早期傻愣愣用`8`位`hex`，每次都要算透明度对应的十六进制值，经常算错，改来改去浪费时间。
- 做主题色、`hover`变色、手动调色，一定要用`hsl`：这绝对是调色神器！改`H`（色相）就能切换颜色，比如从红色改成蓝色，不用重新找色值；改`S`（饱和度）调鲜艳程度，改L（明度）调明暗，比如按钮`hover`要变亮，只需要把`L`调高一点，比`hex`、`rgb`反复试色高效10倍。
避- 坑点：`4`位`hex`简写（`#3333`）新手千万别乱⽤，只有最后两位是透明度，很容易和`6`位色值混淆，我早期就因为简写看错了，把半透明色写成了实色；还有`rgb`新语法，“/”后面别加空格，不然部分低版本浏览器会不兼容，踩过一次坑就记牢了。

## 二、线性渐变 linear-gradient：日常最常用，按钮/背景首选 ##

线性渐变是我日常用得最多的渐变效果，没有之一！核心特别简单，就是“沿某个方向，从一种颜色过渡到另一种颜色”，按钮、卡片背景、页面装饰，用它都能轻松做出高级感。

新手只要记住“方向+色标”这两个关键点，就能快速上手，我早期踩的坑，基本都集中在方向写错、色标位置没设对这两点上。

```css
/* 基础用法：方向 + 色标（最少两种颜色） */
background: linear-gradient(to right, red, blue); /* 从左到右，红渐变到蓝 */
background: linear-gradient(90deg, red, blue); /* 用角度表示方向，90deg=to right，更精准 */
background: linear-gradient(to bottom right, red, blue); /* 从左上到右下，对角线渐变 */

/* 多个色标：实现多颜色过渡，更丰富 */
background: linear-gradient(to right, red, yellow 50%, blue); /* 红→黄（中间位置）→蓝 */

/* 色标位置：手动控制过渡节点，避免过渡生硬，我做精致渐变必用 */
background: linear-gradient(to right, red 0%, blue 50%, green 100%); /* 0%、50%、100% 是过渡位置 */

/* 实际场景1：按钮渐变（我项目里常用的写法） */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 135deg角度，更有立体感 */
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
}

/* 实际场景2：条纹背景（高频需求，我早期写错过background-size） */
background: linear-gradient(
  90deg,
  #333 0%,
  #333 50%,
  #666 50%,
  #666 100%
);
background-size: 20px 100%; /* 关键：控制条纹宽度，20px是条纹总宽，漏写就没有条纹效果 */
```

高频坑点：

- 方向混淆：`to right`是从左到右，`to left`是从右到左，我早期曾把`to right`写成`to left`，渐变方向完全反了，页面整体错乱，排查了半天才发现是这个小问题。
- 条纹背景漏写`background-size`：我第一次写条纹，只写了渐变代码，没写`background-size`，结果页面显示的是单一渐变，没有任何条纹效果，还以为是代码写错了，折腾了好久 。
- 色标位置不写：默认是均匀过渡，想要条纹那种生硬分界，必须给相邻色标设相同位置（比如`50%`、`50%`），不然过渡会很柔和，达不到想要的效果。

## 三、径向渐变 radial-gradient：做光晕、圆形背景超合适 ##

径向渐变和线性渐变不一样，它是“从中心点向外扩散”的，自带层次感，特别适合做圆形背景、卡片hover光晕、头像边框这些点缀性的效果，能悄悄提升页面质感。

它的核心也简单，就是控制“形状+圆心位置+色标”，不用写复杂代码，简单调一调就能出效果。

```css
/* 基础用法：圆形，从中心向外渐变（默认椭圆，circle设为圆形） */
background: radial-gradient(circle, red, blue); /* 圆形，红→蓝 */
background: radial-gradient(ellipse at center, red, blue); /* 椭圆（默认），中心点 */

/* 指定圆心位置：精准控制渐变扩散起点，我做局部光晕常用 */
background: radial-gradient(circle at 20% 80%, yellow, red); /* 圆心在左侧下方（20%宽度，80%高度） */

/* 色标控制：和线性渐变一致，可手动设位置，实现多颜色扩散 */
background: radial-gradient(circle, red 0%, blue 50%, green 100%); /* 红（中心）→蓝→绿（边缘） */
```

我的实操小技巧：径向渐变不用搞太复杂，简单的圆形渐变+半透明色，就能做出很好的效果。比如卡片`hover`时的光晕，我就用`radial-gradient(circle, rgba(102, 126, 234, 0.3), transparent)`，再配合`background-size`调一下范围，就能做出柔和又自然的光晕，比单纯用`box-shadow`质感好太多。

## 四、锥形渐变 conic-gradient：色轮、饼图专属 ##

锥形渐变我早期接触得很少，一直觉得它没用，直到做数据可视化、需要写简单饼图时才发现，它简直是“神器”！它和径向渐变的“向外扩散”完全不同，是“围绕中心点旋转”的环形过渡，最适合做色轮、饼图、加载动画，不用写复杂的定位和嵌套，几行代码就能搞定。

```css
/* 基础用法：色轮效果（多颜色环形过渡） */
background: conic-gradient(red, yellow, green, blue, red); /* 从红开始，环形过渡，最后回到红 */

/* 从指定角度开始渐变：控制渐变的起始位置 */
background: conic-gradient(from 90deg, red, blue); /* 从90度位置开始，红→蓝 */

/* 实际场景：饼图（最常用，精准控制每个扇形角度） */
background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 360deg); /* 红（0-90度）、蓝（90-180度）、绿（180-360度） */
```

避坑提醒 ：锥形渐变的角度的是“环形角度”，`0deg`在右侧，顺时针递增，和线性渐变的角度逻辑完全不一样！我第一次做饼图，就按线性渐变的角度逻辑来写，结果扇形位置全错了，排查了好久才找到问题；另外，做饼图时，相邻色标的结束角度和开始角度一定要衔接好（比如`90deg`接`90deg`），不然两个扇形之间会出现缝隙，特别丑。

## 五、重复渐变：条纹、网格等重复效果，不用写多余标签 ##

重复渐变真的太省代码了！它的核心就是“把渐变效果重复排列”，不用写多个`div`嵌套，就能做出条纹、网格、点阵这些重复样式，我做表格条纹、页面背景网格时，基本都用它，比手动写多个div方便太多。

重点就是控制好“渐变长度+重复间距”，就能做出想要的效果。

```css
/* 重复线性渐变：常用做水平/垂直条纹，我做表格条纹必用 */
background: repeating-linear-gradient(
  90deg, /* 方向：水平条纹 */
  #333,
  #333 10px, /* 第一个条纹：#333，宽度10px */
  #666 10px, /* 衔接位置，和上一个结束位置一致，避免缝隙 */
  #666 20px /* 第二个条纹：#666，宽度10px，总重复宽度20px */
);

/* 重复径向渐变：常用做圆形点阵、环形重复效果 */
background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px); /* 圆形重复，红→蓝，每个重复单元20px */
```

我的实操小技巧：重复渐变的关键，就是“相邻色标的位置要衔接好”，比如前一个颜色在`10px`结束，下一个颜色就从`10px`开始，这样两个渐变之间才不会出现缝隙；另外，重复单元的总宽度（比如`20px`），决定了条纹的密集程度，宽度越小，条纹越密，根据设计稿灵活调整就好，不用死记硬背。

## 六、混合模式 mix-blend-mode：高级叠加效果，提升页面质感 ##

混合模式我早期一直不敢碰，总觉得它太复杂，怕用错了把页面颜色搞乱，直到后来做Banner图、需要文字和背景叠加时才发现，它能做出特别高级的效果，而且没那么难。

核心就是“让当前元素，和它下方的内容产生叠加反应”，比如正片叠底、滤色，选对模式，就能轻松做出高级感，不用写多余的样式。

```css
/* 元素混合：让当前元素（叠加层）与下方元素叠加 */
.overlay { /* 叠加层，比如遮罩、文字 */
  mix-blend-mode: multiply;   /* 正片叠底：常用做图片暗化遮罩，我最常用 */
  mix-blend-mode: screen;    /* 滤色：常用做图片提亮，适合浅色叠加 */
  mix-blend-mode: overlay;   /* 叠加：保留底层细节，同时叠加上层颜色，高级感强 */
  mix-blend-mode: difference; /* 差值：颜色对比强烈，适合特殊效果，少用 */
}

/* 背景混合：让元素的背景（比如渐变+图片）内部叠加 */
background-blend-mode: multiply; /* 背景内部叠加 */
background: linear-gradient(red, blue), url(bg.jpg); /* 渐变与背景图叠加，配合上面的混合模式 */
```

避坑提醒 ：

- 混合模式必须“下方有内容”才能生效！我第一次用`mix-blend-mode`，给一个单独的遮罩层加了这个属性，结果一点效果都没有，折腾了半天，才发现遮罩层下方是空的，没有可叠加的内容。
-  别滥用混合模式！它会改变元素原本的颜色呈现，普通页面尽量不用，只在Banner、详情页这种需要高级效果的地方用，不然很容易导致颜色错乱，影响页面可读性。

## 七、color-mix：颜色混合新语法，主题色变体超方便 ##

`color-mix` 绝对是CSS新增语法里，我最爱的一个！它能快速混合两种颜色，不用手动计算色值，省了大量试色的时间，尤其适合做主题色变体——比如按钮`hover`变亮、禁用色、浅色系背景，用它来写，高效又精准，比手动调`hex`、`hsl`方便太多，我现在做主题色相关的样式，全靠它。

```css
/* 基础用法：混合两个颜色，指定混合比例 */
color: color-mix(in srgb, red 50%, blue); /* 在srgb色空间，红50% + 蓝50%，混合出紫色 */
background: color-mix(in hsl, #333 80%, white); /* 深灰80% + 白20%，混合出浅灰色 */

/* 实际场景：按钮hover变亮（我项目里的常用写法） */
.btn {
  --primary: #667eea; /* 主题色变量 */
  background: var(--primary);
}
.btn:hover {
  /* 主题色85% + 白15%，实现hover变亮，不用重新找色值 */
  background: color-mix(in srgb, var(--primary) 85%, white);
}
```

我的实操心得：`color-mix` 不用记复杂语法，核心就是“指定色空间+混合比例”。建议优先用in srgb，兼容性更好；混合比例也不用写两个，只写一个就行，另一个会自动补全（比如红50%，蓝就默认是50%）。

做主题色变体时，混合白色就能变亮，混合黑色就能变暗，比手动调hsl的明度更精准，而且全站主题色能保持统一，不会出现色差。

## 八、我的实际示例（直接套用，少踩坑） ##

结合我日常开发的高频场景，整理了4个实操写法，新手可以直接复制套用，全是我项目里常用的，避开了所有我踩过的坑，不用再自己瞎琢磨：

```css
/* 场景1：卡片渐变边框（高级感拉满，不用额外写边框标签） */
.card {
  background: white;
  border-radius: 8px;
  position: relative;
  padding: 24px; /* 给内部留空间，避免内容贴边框 */
}
.card::before {
  content: "";
  position: absolute;
  inset: 0; /* 全屏覆盖父元素 */
  padding: 1px; /* 边框宽度，关键 */
  border-radius: inherit; /* 继承父元素圆角，避免圆角错位 */
  background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变边框颜色 */
  /* 关键：实现只显示边框，不覆盖内部背景 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* 场景2：文字渐变（标题常用，高级不生硬） */
.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2); /* 渐变颜色 */
  -webkit-background-clip: text; /* 把背景裁剪到文字上，webkit前缀兼容移动端 */
  -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
  background-clip: text; /* 标准写法 */
  font-size: 2rem;
  font-weight: 600;
}

/* 场景3：简单饼图（数据可视化常用，不用复杂组件） */
.pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形容器 */
  background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 360deg);
}

/* 场景4：带hover效果的渐变按钮（日常高频） */
.btn-primary {
  --primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary:hover {
  /* 混合主题色和白色，实现hover变亮，同时保留渐变 */
  background: color-mix(in srgb, var(--primary) 90%, white);
  transform: translateY(-2px); /* 轻微上浮，提升交互感 */
}
```

## 九、个人总结：颜色与渐变避坑核心 ##

- 颜色表示法：`hex` 日常凑活用、`rgb` 专门做透明、`hsl` 负责调色，`oklch` 暂不考虑，新手聚焦这3种，足够应对所有场景，不用贪多求全；

- 线性渐变：方向+色标是核心，按钮、背景首选它，写条纹千万别漏写`background-size`，不然等于白写；

- 径向渐变：做圆形、光晕的神器，控制好圆心位置，就能悄悄提升页面层次感，不用搞复杂样式；

- 锥形渐变：色轮、饼图专属，记住它的角度是环形角度，相邻色标衔接好，避免出现缝隙；

- 重复渐变：相邻色标位置衔接好，能省很多嵌套代码，做条纹、网格超方便；

- 混合模式：按需选用，正片叠底、叠加最常用，记住“下方要有内容”，不然没用，别滥用；

- `color-mix`：主题色变体神器，混合白色/黑色实现亮暗变化，不用手动试色，高效又精准。

其实颜色与渐变真的不难，我最开始也是只会抄hex、写简单线性渐变，踩了无数坑，才慢慢熟练起来。核心就是“多试、多总结”，不用一开始就追求复杂效果，先掌握基础用法，再逐步尝试高级效果，慢慢就能做出有质感的页面。