颜色

这一课你将能做到

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; } /* 边框跟着文字颜色走 */

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