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

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

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

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

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

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

常用基础色：

css 复制代码

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

示例代码：

css 复制代码

<!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代表该颜色光最强。

基础规则

#000000：红 0，绿 0，蓝 0 → 黑色
#FFFFFF：红最大，绿最大，蓝最大 → 白色
#FF0000：红最大，绿 0，蓝 0 → 纯红
#00FF00：纯绿
#0000FF：纯蓝

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

示例：

css 复制代码

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

完整示例：

css 复制代码

<!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：光拉到最大

css 复制代码

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) /*灰色，三个数值相等就是灰色*/

示例：

html 复制代码

<!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。

示例：

html 复制代码

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

完整演示半透明盒子：

html 复制代码

<!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()

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

css 复制代码

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

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

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

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

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

新手常见坑

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

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

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

✅必须写 #ff0000。

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

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

分不清 color 和 background‑color

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

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

html 复制代码

<!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>

本篇知识点总结

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

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