HTML系列教程：18_HTML / CSS 颜色零基础详解

在网页中，文字、背景、边框都需要设置颜色。HTML 本身不处理颜色，颜色全部写在 CSS 里。 一共有 4 种写颜色的写法：

1. 颜色英文单词（命名颜色）
2. 十六进制颜色 #RRGGBB（最常用）
3. rgb () 红‑绿‑蓝
4. rgba () 红‑绿‑蓝‑透明度

网页颜色原理：屏幕由 红 (Red)、绿 (Green)、蓝 (Blue) 三种光混合而成，调节三种光强弱得到各种颜色。

---

一、英文颜色名（命名颜色）

直接写颜色英文单词，简单好记，数量有限，只有一百多种。

常用基础色：

red        红色
green      绿色
blue       蓝色
black      黑色
white      白色
gray       灰色
yellow     黄色
orange     橙色
pink       粉色
purple     紫色

示例代码：

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<style>
    .c1{ color: red; }                  /*文字红色*/
    .c2{ background‑color: green; }     /*背景绿色*/
    .c3{ border:3px solid blue; }       /*边框蓝色*/
</style>
</head>
<body>
    <p class="c1">我是红色文字</p>
    <p class="c2">我是绿色背景</p>
    <p class="c3">我有蓝色边框</p>
</body>
</html>

⚠缺点：颜色太少，很多细腻的颜色没有，实际开发很少只用单词。

---

二、十六进制颜色 #RRGGBB 【工作最常用】

格式：#RRGGBB

• # 号必须写
• RR：红色 00~FF
• GG：绿色 00~FF
• BB：蓝色 00~FF

取值：0 1 2 3 4 5 6 7 8 9 A B C D E F 00 代表该颜色光最弱；FF代表该颜色光最强。

基础规则

1. #000000：红 0，绿 0，蓝 0 → 黑色
2. #FFFFFF：红最大，绿最大，蓝最大 → 白色
3. #FF0000：红最大，绿 0，蓝 0 → 纯红
4. #00FF00：纯绿
5. #0000FF：纯蓝

简写：如果每两位数字相同，可以缩写成 3 位。 #FF0000 → #F00 #FFFFFF → #FFF #336699 → #369

示例：

color: #ff0000;      /*红色*/
background‑color:#00ff00; /*绿色背景*/
color:#333;          /*深灰色（网页常用文字颜色）*/
color:#666;          /*中灰色（次要文字）*/
color:#ccc;          /*浅灰色（边框、分割线）*/

完整示例：

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<style>
    p.red {color:#ff0000;}
    p.gray1 {color:#333333;}
    p.gray2 {color:#666;} /*简写形式 #666666*/
    .box{
        width:200px;
        height:100px;
        background‑color:#ffa500; /*橙色*/
    }
</style>
</head>
<body>
    <p class="red">十六进制红色 #ff0000</p>
    <p class="gray1">深灰文字 #333333</p>
    <p class="gray2">中灰色 #666</p>
    <div class="box">橙色盒子 #ffa500</div>
</body>
</html>

---

三、rgb () 颜色

格式：rgb(红,绿,蓝) 每个数值范围：0 ~ 255

• 0：光最弱
• 255：光拉到最大

rgb(255,0,0)     /*红色，红255，绿0，蓝0*/
rgb(0,255,0)     /*绿色*/
rgb(0,0,255)     /*蓝色*/
rgb(0,0,0)       /*黑色*/
rgb(255,255,255) /*白色*/
rgb(100,100,100) /*灰色，三个数值相等就是灰色*/

示例：

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<style>
    .t1{ color:rgb(255,0,0); }
    .t2{ background‑color:rgb(0,200,100); }
    .t3{ color:rgb(80,80,80); }
</style>
</head>
<body>
    <p class="t1">rgb红色文字</p>
    <p class="t2">rgb绿色背景</p>
    <p class="t3">rgb深灰色文字</p>
</body>
</html>

小规律：rgb 三个数字完全相等，出来就是灰色。 rgb(50,50,50)深灰；rgb(200,200,200)浅灰。

---

四、rgba () 带透明度颜色（重点）

rgba(红,绿,蓝,透明度) 前三个和 rgb 完全一样；第四个是透明度 alpha 透明度取值：0 ~ 1

• 0：完全透明（看不见）
• 1：完全不透明
• 0.5：半透明

注意：十六进制 # 模式本身不能直接写透明度，想要透明优先用 rgba。

示例：

rgba(255,0,0,1)    /*红色，完全不透明*/
rgba(255,0,0,0.5)  /*红色，50%半透明，可以看到底下内容*/
rgba(0,0,0,0.3)    /*黑色30%透明度，常用于遮罩层*/

完整演示半透明盒子：

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<style>
    .bg{
        width:300px;
        height:150px;
        background‑color:orange;
    }
    .trans{
        width:180px;
        height:80px;
        background‑color:rgba(0,120,220,0.4); /*蓝色，40%透明度*/
    }
</style>
</head>
<body>
    <div class="bg">
        <div class="trans">我是半透明蓝色盒子，能看到底下橙色背景</div>
    </div>
</body>
</html>

效果：蓝色盒子半透明，底层橙色会透出来。

---

四种写法对比总结

写法	格式	特点
英文单词	color: red;	简单，颜色少，适合练习
十六进制	#RRGGBB / #RGB	项目最常用，复制取色器直接拷贝
rgb()	rgb(R,G,B)	0‑255，直观理解三原色
rgba()	rgba(R,G,B,A)	rgb + 透明度，做半透明效果

💡开发习惯

• 普通颜色优先：十六进制 #xxxxxx
• 需要透明度：用 rgba()

网页常用通用配色（直接复制用）

/*文字*/
color:#333;    /*正文深灰，网页正文首选，比纯黑#000柔和*/
color:#666;    /*次要说明文字*/
color:#999;    /*提示、占位浅灰*/

/*边框分割线*/
border‑color:#ccc;

/*背景*/
background‑color:#f5f5f5; /*页面浅灰背景*/

---

怎么拿到想要的颜色？（取色）

1. VS Code 写 #颜色，编辑器会弹出小色块预览颜色。
2. 浏览器 F12 开发者工具，可以拾取页面任意颜色，复制十六进制 /rgb 值。
3. 取色器工具：吸取图片、网页上任意颜色。

新手常见坑

1. ❌把颜色写在 HTML 标签属性里，如 <p color="red">

HTML5 不推荐，颜色全部写 CSS color:xxx。

1. 十六进制忘记写 #，直接写 ff0000，颜色完全不生效。

✅必须写 #ff0000。

1. rgba 透明度写成 1‑255 数字。

alpha 只能是 0~1，比如 0.5，不要写 255。

1. 分不清 color 和 background‑color

• color：文字颜色
• background‑color：盒子背景颜色

综合完整示例，复制直接运行

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>颜色综合演示</title>
<style>
    .word‑eng{ color: blue; }
    .word‑hex{ color:#ff4400; }
    .word‑rgb{ color:rgb(20,160,60); }
    .box‑rgba{
        width:260px;
        height:100px;
        background‑color:rgba(50,120,200,0.5);
    }
    .common‑text{ color:#333; }
</style>
</head>
<body>
    <p class="word‑eng">英文颜色 blue 蓝色</p>
    <p class="word‑hex">十六进制 #ff4400 橙红色</p>
    <p class="word‑rgb">rgb(20,160,60)绿色</p>
    <p class="common‑text">网页正文常用深灰色 #333</p>
    <div class="box‑rgba">rgba半透明蓝色盒子</div>
</body>
</html>

本篇知识点总结

1. 网页颜色由红、绿、蓝三原色混合。
2. 四种表示：英文名字、十六进制 #、rgb ()、rgba ()（带透明）。
3. color 设置文字颜色；background‑color 设置背景色。
4. 十六进制是项目最常用；要半透明效果用rgba()。
5. rgba 最后一位透明度取值是 0~1，不是 0‑255。

✍小练习：写页面，①文字设置 #f40；②一个盒子背景 rgb (100,150,220)；③做一个 rgba 半透明盒子。