跳至正文

理解 Web 颜色 🎨

在创建网站时，你会看到像 #FF5733、rgb(255, 87, 51) 这样的奇怪代码。这些都是颜色代码！我会用简单的方式讲解，让初学者也能轻松理解。

为什么使用颜色代码？​

我们说"红色"、"蓝色"，但计算机需要精确的数字。

例如：

  • 说"红色"：哪种红色？亮红色？深红色？ 🤔
  • 说 #FF0000：精确的红色！ ✅

Web 中使用的 3 种颜色表示方式​

1. HEX（十六进制）颜色 🔢​

最常见的格式！

color: #FF5733;
background: #3498db;

格式：

  • 以 # 符号开始
  • 6 位数字/字母（0-9，A-F）
  • 两位一组：#RRGGBB
    • RR = 红色（Red）
    • GG = 绿色（Green）
    • BB = 蓝色（Blue）

示例：

#FF0000  →  红色（Red 最大）
#00FF00  →  绿色（Green 最大）
#0000FF  →  蓝色（Blue 最大）
#FFFFFF  →  白色（所有颜色最大）
#000000  →  黑色（所有颜色为 0）

2. RGB 颜色 🎨​

用红色（Red）、绿色（Green）、蓝色（Blue）的量来表示！

color: rgb(255, 87, 51);
background: rgb(52, 152, 219);

格式：

  • rgb(红色, 绿色, 蓝色)
  • 每个数字在 0~255 之间

示例：

rgb(255, 0, 0)     →  红色
rgb(0, 255, 0)     →  绿色
rgb(0, 0, 255)     →  蓝色
rgb(255, 255, 255) →  白色
rgb(0, 0, 0)       →  黑色
rgb(128, 128, 128) →  灰色

添加透明度（RGBA）：

rgba(255, 0, 0, 0.5)  →  半透明红色
             ↑
        0.0 ~ 1.0（透明 ~ 不透明）

3. HSL 颜色 🌈​

人类最容易理解的方式！

color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);

格式：

  • hsl(色相, 饱和度, 亮度)
  • H（Hue）：色相（0~360 度）
  • S（Saturation）：饱和度（0~100%）
  • L（Lightness）：亮度（0~100%）

色相环（Hue）：

0° / 360°  →  红色
60°        →  黄色
120°       →  绿色
180°       →  青色
240°       →  蓝色
300°       →  品红

示例：

hsl(0, 100%, 50%)    →  纯红色
hsl(120, 100%, 50%)  →  纯绿色
hsl(240, 100%, 50%)  →  纯蓝色
hsl(0, 0%, 50%)      →  灰色
hsl(0, 100%, 100%)   →  白色
hsl(0, 0%, 0%)       →  黑色

颜色格式比较​

用三种方式表示同一颜色：

🔴 亮红色​

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(9, 100%, 60%)

🔵 蓝色​

HEX:  #3498db
RGB:  rgb(52, 152, 219)
HSL:  hsl(204, 70%, 53%)

🟢 绿色​

HEX:  #2ecc71
RGB:  rgb(46, 204, 113)
HSL:  hsl(145, 63%, 49%)

何时使用哪种格式？​

使用 HEX 📝​

  • 设计师给出颜色代码时（最常见）
  • 简单指定颜色时
  • CSS 文件中常用
.button {
  background-color: #3498db;
  color: #ffffff;
}

使用 RGB 🎨​

  • 需要透明度（alpha）时
  • 用 JavaScript 计算颜色时
  • 动态改变颜色时
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

使用 HSL 🌈​

  • 只想改变色相时
  • 只想调整亮度时
  • 创建相似色调的颜色时
.primary {
  background: hsl(200, 70%, 50%);
}
.primary-light {
  background: hsl(200, 70%, 70%); /* 只改变亮度 */
}
.primary-dark {
  background: hsl(200, 70%, 30%); /* 变暗 */
}

实战示例​

示例 1：按钮颜色 🔘​

/* 蓝色按钮 */
.button {
  background-color: #3498db;
  color: #ffffff;
}

/* 鼠标悬停时 */
.button:hover {
  background-color: #2980b9; /* 稍深的蓝色 */
}

示例 2：渐变背景 🌅​

.gradient-bg {
  background: linear-gradient(
    to right,
    #667eea,   /* 紫色 */
    #764ba2    /* 品红 */
  );
}

示例 3：半透明遮罩 👻​

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* 70% 不透明黑色 */
}

使用颜色工具​

转换颜色​

在 Color Converter 中：

  • HEX → RGB → HSL 转换
  • 用颜色选择器选择颜色
  • 复制各种格式

使用方法：

  1. 打开 Color Converter
  2. 用颜色选择器选择想要的颜色
  3. 自动生成 HEX、RGB、HSL 代码！
  4. 复制所需格式使用

创建 CSS 渐变​

在 Gradient Generator 中：

  • 用 2 种或更多颜色制作渐变
  • 设置方向
  • 自动生成 CSS 代码

颜色选择技巧 💡​

1. 颜色和谐​

互补色（对面的颜色）：

红色(0°) ↔ 青色(180°)
蓝色(240°) ↔ 黄色(60°)

类似色（相似的颜色）：

hsl(200, 70%, 50%)  蓝色
hsl(210, 70%, 50%)  偏紫的蓝色
hsl(190, 70%, 50%)  偏青的蓝色

2. 明度对比​

为了让文字清晰可见：

/* 良好对比 ✅ */
.good-contrast {
  background: #000000;  /* 黑色 */
  color: #ffffff;       /* 白色 */
}

/* 不良对比 ❌ */
.bad-contrast {
  background: #cccccc;  /* 浅灰色 */
  color: #ffffff;       /* 白色 - 看不清！ */
}

3. 保持一致性​

相似的元素使用相似的颜色：

/* Primary 颜色系列 */
.primary       { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark  { background: hsl(200, 70%, 30%); }

/* Success 颜色系列 */
.success       { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark  { background: hsl(120, 60%, 30%); }

常用颜色代码​

基本颜色​

红色： #FF0000  rgb(255, 0, 0)    hsl(0, 100%, 50%)
绿色： #00FF00  rgb(0, 255, 0)    hsl(120, 100%, 50%)
蓝色： #0000FF  rgb(0, 0, 255)    hsl(240, 100%, 50%)
黄色： #FFFF00  rgb(255, 255, 0)  hsl(60, 100%, 50%)
品红： #FF00FF  rgb(255, 0, 255)  hsl(300, 100%, 50%)
青色： #00FFFF  rgb(0, 255, 255)  hsl(180, 100%, 50%)

无彩色​

白色：     #FFFFFF  rgb(255, 255, 255)
浅灰色：   #CCCCCC  rgb(204, 204, 204)
灰色：     #808080  rgb(128, 128, 128)
深灰色：   #333333  rgb(51, 51, 51)
黑色：     #000000  rgb(0, 0, 0)

流行颜色​

天蓝色： #87CEEB  rgb(135, 206, 235)
粉红色： #FFC0CB  rgb(255, 192, 203)
橙色：   #FFA500  rgb(255, 165, 0)
紫色：   #800080  rgb(128, 0, 128)
金色：   #FFD700  rgb(255, 215, 0)

简写 HEX 代码​

如果相同数字重复，可以简写：

#FF0000  →  #F00   （红色）
#00FF00  →  #0F0   （绿色）
#0000FF  →  #00F   （蓝色）
#FFFFFF  →  #FFF   （白色）
#000000  →  #000   （黑色）
#CCCCCC  →  #CCC   （灰色）

使用颜色名称​

CSS 中也可以使用颜色名称：

color: red;
color: blue;
color: green;
color: white;
color: black;

但最好使用精确的颜色代码！

考虑可访问性 ♿​

检查对比度​

  • 普通文本：最小 4.5:1
  • 大文本：最小 3:1

良好示例：

background: #000000;  /* 黑色 */
color: #FFFFFF;       /* 白色 - 对比度 21:1 */

不良示例：

background: #777777;  /* 灰色 */
color: #888888;       /* 稍亮的灰色 - 对比度太低 */

实践：颜色实验​

实践 1：相同颜色，不同亮度​

.color-1 { background: hsl(200, 70%, 20%); } /* 很暗 */
.color-2 { background: hsl(200, 70%, 40%); } /* 暗 */
.color-3 { background: hsl(200, 70%, 60%); } /* 普通 */
.color-4 { background: hsl(200, 70%, 80%); } /* 亮 */

实践 2：相同亮度，不同颜色​

.color-1 { background: hsl(0, 70%, 50%); }   /* 红色 */
.color-2 { background: hsl(120, 70%, 50%); } /* 绿色 */
.color-3 { background: hsl(240, 70%, 50%); } /* 蓝色 */
提示

在 Color Converter 中直接改变颜色进行实验！

常见问题（FAQ）​

Q1：HEX 中的数字和字母是什么？​

A：使用十六进制。

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
                                ↑
                        A=10, B=11 ... F=15

Q2：RGB 为什么到 255？​

A：计算机用 8 位（0~255）表示每种颜色。

0 = 最小（无颜色）
255 = 最大（颜色满）

Q3：如何创建透明颜色？​

A：使用 RGBA 或 HSLA：

rgba(255, 0, 0, 0.5)   /* 半透明红色 */
hsla(0, 100%, 50%, 0.5) /* 半透明红色 */

Q4：如何创建渐变？​

A：使用 Gradient Generator 或：

background: linear-gradient(to right, #667eea, #764ba2);

下一步 🚀​

理解颜色后：

  1. ✅ Color Converter - 练习颜色转换
  2. ✅ Gradient Generator - 创建渐变
  3. ✅ Shadow Generator - 创建颜色阴影
  4. ✅ Border Radius Generator - 创建圆角

总结​

Web 颜色并不难！

记住要点：

  • HEX：#RRGGBB - 最常见
  • RGB：rgb(红色, 绿色, 蓝色) - 可添加透明度
  • HSL：hsl(色相, 饱和度, 亮度) - 人类容易理解

经常用 Color Converter 工具实验，很快就会熟悉！ 🎨

颜色是决定网站氛围的重要元素。尝试各种颜色吧！