颜色

这一课你将能做到

1. 用 hex、rgb、hsl 三种表示法写颜色，知道何时用哪种
2. 用 alpha 通道做半透明效果
3. 用 linear-gradient 和 radial-gradient 写出常见渐变

为什么要学

颜色是设计的第一感官要素。同一个颜色可以有多种写法，但选择不同写法决定了你后续调整方不方便——hsl 改明度只改一个数，hex 改明度要重算整个色值。

人话：hex 像快递单号（精确但读不出信息），rgb 像 RGB 调色盘（三个数值各管一色），hsl 像「色号-浓淡-明暗」三件套（最符合人脑思维）。

先建立图像

<style>
    .a { background: #ff6b6b; }                /* hex */
    .b { background: rgb(255, 107, 107); }     /* rgb */
    .c { background: hsl(0, 100%, 71%); }      /* hsl */
    .d { background: rgba(255, 107, 107, 0.5); } /* 半透明 */
    .e { background: linear-gradient(to right, #ff6b6b, #ffd93d); }
    .f { background: radial-gradient(circle, #ffd93d, #ff6b6b); }
    div { height: 50px; margin: 4px 0; color: #fff; padding: 8px; }
</style>

<div class="a">#ff6b6b hex</div>
<div class="b">rgb(255,107,107)</div>
<div class="c">hsl(0,100%,71%)</div>
<div class="d">rgba 半透明 0.5</div>
<div class="e">linear-gradient 横向</div>
<div class="f">radial-gradient 圆形</div>

前三个块颜色完全一样——三种写法只是「表达方式」不同。

跟着做

步骤 1：hex 十六进制

格式：#RRGGBB，每两位是一个 0-255 的十六进制数：

.red    { color: #ff0000; }   /* 红 */
.green  { color: #00ff00; }   /* 绿 */
.blue   { color: #0000ff; }   /* 蓝 */
.gray   { color: #888888; }   /* 灰 */
.short  { color: #f00; }      /* 三位简写，每位重复一次 = #ff0000 */

工程上最常见，设计稿导出基本是这个格式。

步骤 2：rgb / rgba

.text   { color: rgb(255, 0, 0); }         /* 不透明红 */
.overlay { background: rgba(0, 0, 0, 0.5); } /* 半透明黑，遮罩常用 */

rgba 的第 4 个参数是 alpha，0 完全透明，1 完全不透明。

步骤 3：hsl / hsla——人类友好

H = Hue 色相（0-360 度，0 红、120 绿、240 蓝） S = Saturation 饱和度（0% 灰，100% 鲜艳） L = Lightness 明度（0% 黑、50% 正色、100% 白）

.brand       { background: hsl(210, 80%, 50%); }  /* 正蓝 */
.brand-hover { background: hsl(210, 80%, 40%); }  /* 深一点 */
.brand-light { background: hsl(210, 80%, 90%); }  /* 浅一点 */

只改 L 值就能生成同色系配色，比 hex 直观一百倍。

步骤 4：transparent 和 currentColor

.a { background: transparent; }      /* 完全透明 */
.b { color: #333; border: 1px solid currentColor; } /* 边框跟着文字颜色走 */

currentColor 是关键字，表示「用当前元素的 color 值」。

步骤 5：linear-gradient 线性渐变

/* 默认从上到下 */
.a { background: linear-gradient(#ff6b6b, #ffd93d); }

/* 指定方向 */
.b { background: linear-gradient(to right, #ff6b6b, #ffd93d); }
.c { background: linear-gradient(45deg, #ff6b6b, #ffd93d); }

/* 多色阶 */
.d { background: linear-gradient(to right, red, yellow, lime, cyan); }

/* 指定色标位置 */
.e { background: linear-gradient(to right, #333 0%, #333 50%, #fff 50%, #fff 100%); }
/* 上面是硬切两半，做棋盘格常用 */

步骤 6：radial-gradient 径向渐变

/* 从中心向外 */
.a { background: radial-gradient(circle, #fff, #000); }

/* 椭圆 + 位置 */
.b { background: radial-gradient(ellipse at top left, #ffd93d, #ff6b6b); }

/* 重复渐变做光斑 */
.c { background: repeating-radial-gradient(circle, #fff 0 10px, #eee 10px 20px); }

步骤 7：实战——做一个按钮

<style>
    .btn {
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        background: linear-gradient(135deg, hsl(210, 90%, 55%), hsl(260, 80%, 60%));
        transition: filter 0.2s;
    }
    .btn:hover { filter: brightness(1.1); }
</style>

<button class="btn">点我</button>

讲清楚要点

1. hex 是历史主流，hsl 是心智友好：新代码推荐 hsl，旧代码迁移不必强求。
2. alpha 用 rgba/hsla 或 8 位 hex：#ff000080 是 8 位 hex 写法，最后两位 80 是 50% 透明度。
3. 渐变是 background-image：渐变本质上是「生成的图片」，要写在 background 或 background-image 里，不能写 color 里。
4. 多个背景用逗号：background: url(a.png), linear-gradient(...)，前面的在上面。
5. 色标可指定位置：linear-gradient(to right, red 30%, blue 70%)，30% 之前纯红，70% 之后纯蓝，中间过渡。

你可能会懵的地方

• 为什么我的渐变不显示？ 渐变是背景图，元素没高度就看不到。检查元素是否有内容或显式 height。

• 能用变量做渐变吗？ 能，background: linear-gradient(var(--c1), var(--c2))，配合 CSS 变量做主题。

• opacity 和 rgba 区别？ opacity 让整个元素（含子元素、文字）半透明；rgba 只让指定颜色半透明，文字仍是不透明。

• 8 位 hex 兼容性？ IE 不支持，其他现代浏览器都支持。需要兼容老浏览器就用 rgba。

• 怎么做透明边框但保留背景？ background-clip: padding-box; + border: 10px solid rgba(0,0,0,0.3);，经典技巧。

错法对照

错法	问题	正解
color: linear-gradient(...)	渐变不能用在 color	用 background-image
rgb(255,0)	少一个值	rgb 必须 3 个或 4 个值
hsl(180, 50, 50)	饱和度明度漏 %	hsl(180, 50%, 50%)
#fff5 想表 5% 透明度	实际 33%（0x55/0xFF）	用 rgba 直观写 0.05
写 opacity: 0.5 想只让背景半透明	整个元素都半透明	用 rgba 只控制背景色

卡点急救

1. 渐变色没出现：F12 看元素背景，是否被 background-color 覆盖（写在后面的会赢）。
2. 颜色和设计稿不一致：检查浏览器是否启用色彩管理；也可能是设计稿用了 Display P3 广色域。
3. 半透明叠加颜色变深：两个半透明叠在一起必然变深，是物理规律。要么只用一层，要么改用不透明色。

面试常问

• rgba 和 opacity 区别？ rgba 只影响指定颜色通道；opacity 影响整个元素及所有子元素的渲染结果。

• 怎么实现渐变文字？ background: linear-gradient(...) + -webkit-background-clip: text + color: transparent。

• CSS 颜色有几种表示法？ 命名色（red）、hex（#ff0000 / #f00 / #ff000080）、rgb/rgba、hsl/hsla、currentColor、transparent，新规范还有 hwb、lab、lch、oklch。

自测三问

1. 把 #3a7bd5 转成 hsl 大概什么色？
2. linear-gradient(to right, red 50%, blue 50%) 长什么样？
3. 为什么 opacity: 0.5 不适合做文字遮罩？

小结一句话

hex 用于精确沟通、rgb 用于程序处理、hsl 用于人类调整；渐变是 background-image，掌握线性加径向就能应付 90% 场景。

延伸

• MDN CSS 颜色
• 下一课：文字排版，让内容真正可读。