有温度的CSS颜色指南：不用记代码，凭名字就能挑对色#

一、开头：你是不是也有”颜色名称PTSD”？#

每次写CSS想调个好看的蓝色，脑子里先冒出来的是：

“浅蓝是lightblue？还是skyblue？”
“那个像大海的蓝叫啥？teal？aquamarine？”
最后实在想不起来，妥协用hex码：#87CEEB（其实这就是skyblue）……

宝子们！CSS标准里自带140多个预定义颜色名称，从基础的red、green到文艺的cornflowerblue（矢车菊蓝）、thistle（蓟紫色），甚至还有金属感的goldenrod（金麒麟色）——根本不用记hex码！

今天这篇文章，把CSS颜色按”好记、好用”分类，附使用场景+代码示例+视觉效果，帮你彻底告别”颜色名称焦虑”～

二、先搞懂：CSS颜色名称的”底层逻辑”#

CSS的颜色名称不是乱起的，全部来自X11颜色系统（一套经典的图形界面颜色标准），后来被W3C纳入CSS2标准。简单来说：

名字要么对应实物（比如skyblue=天空蓝、coral=珊瑚色）；
要么对应颜色属性（比如lightgray=浅灰、darkorange=深橙）；
所有名称都是小写英文，没有空格（比如”淡紫色”是lavender，不是light purple）。

记住这个逻辑，后面记颜色名称会超容易！

三、按”使用场景”分类：CSS颜色名称速查#

1. 基础色：万年不会错的”安全牌”#

这些颜色是CSS里最基础的，名字直白到”看名知色”，适合新手入门或需要明确表意的场景（比如错误提示用red，成功提示用green）。

颜色名称	效果预览	使用场景	代码示例（CSS）
`red`	🔴 正红色	错误提示、危险按钮	`color: red;`（比如”提交失败”）
`green`	🟢 正绿色	成功提示、确认按钮	`background-color: green;`（比如”支付成功”）
`blue`	🔵 正蓝色	链接、重要信息	`a { color: blue; }`（比如网页链接）
`yellow`	🟡 正黄色	警告提示、高亮	`background-color: yellow;`（比如”请填写必填项”）
`black`	⚫ 纯黑色	正文文字、边框	`color: black;`（比如文章正文）
`white`	⚪ 纯白色	背景、卡片底色	`background-color: white;`（比如登录框）

视觉示例：

1
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
2
  <div style="background: red; color: white; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">red</div>
3
  <div style="background: green; color: white; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">green</div>
4
  <div style="background: blue; color: white; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">blue</div>
5
  <div style="background: yellow; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">yellow</div>
6
  <div style="background: black; color: white; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">black</div>
7
  <div style="background: white; border: 1px solid #ddd; padding: 15px; border-radius: 4px; min-width: 120px; text-align: center;">white</div>
8
</div>

red

green

blue

yellow

black

white

小贴士：基础色别加”light”或”dark”前缀（比如lightred不是标准名称！），要调深浅用rgba()或opacity～

2. 浅色系：温柔到骨子里的”莫兰迪平替”#

这些颜色带”light""pale""pastel”前缀，色调偏浅、饱和度低，适合文艺风、移动端、卡片背景，比基础色更有”呼吸感”。

颜色名称	效果预览	对应实物	使用场景
`lightblue`	🔹 浅蓝	淡蓝的天	导航栏背景、按钮 hover 效果
`palegreen`	🟢 淡绿	刚发芽的草	健康类App背景、提示框
`pastelpink`	🌸 淡粉	樱花花瓣	女性向产品、表单背景
`lavender`	💜 淡紫	薰衣草花	冥想类App、卡片阴影
`lightgray`	🩶 浅灰	雾霾天的云	分割线、输入框边框

视觉示例：

1
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
2
  <div style="background: lightblue; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">lightblue<br>淡蓝的天</div>
3
  <div style="background: palegreen; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">palegreen<br>刚发芽的草</div>
4
  <div style="background: pastelpink; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">pastelpink<br>樱花花瓣</div>
5
  <div style="background: lavender; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">lavender<br>薰衣草花</div>
6
  <div style="background: lightgray; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">lightgray<br>雾霾天的云</div>
7
</div>

lightblue
淡蓝的天

palegreen
刚发芽的草

pastelpink
樱花花瓣

lavender
薰衣草花

lightgray
雾霾天的云

代码示例（文艺风卡片）：

1
.card {
2
  background-color: lavender; /* 淡紫色背景，温柔感拉满 */
3
  border: 1px solid lightgray; /* 浅灰边框，不扎眼 */
4
  color: #333; /* 深灰文字，对比适中 */
5
  padding: 20px;
6
  border-radius: 8px;
7
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
8
}

效果预览：

1
<div class="card" style="background-color: lavender; border: 1px solid lightgray; color: #333; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
2
  <h3 style="margin-top: 0; color: #555;">文艺风卡片示例</h3>
3
  <p>这是一个使用lavender背景色和lightgray边框的卡片，适合冥想类App或文艺内容展示。</p>
4
  <button style="background-color: lightblue; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">点击查看</button>
5
</div>

文艺风卡片示例

这是一个使用lavender背景色和lightgray边框的卡片，适合冥想类App或文艺内容展示。

注解：lavender比#E6E6FA（hex码）好记100倍，而且代码可读性高——同事看了就知道”这是淡紫色卡片”，不用猜hex码！

3. 深色调：高级感拉满的”复古风”#

这些颜色带”dark""deep”前缀，或名字对应”深实物”（比如navy=藏青），适合高端品牌、夜间模式、标题文字，比基础色更有”质感”。

颜色名称	效果预览	对应实物	使用场景
`darkblue`	🔵 深蓝	深海	企业官网 header、夜间模式背景
`navy`	🔹 藏青	海军制服	高端品牌导航栏、按钮
`darkgreen`	🟢 深绿	老松树	环保类网站、侧边栏
`chocolate`	🤎 巧克力色	黑巧克力	美食类网站、复古按钮
`darkslategray`	🩶 深灰	黑板灰	代码块背景、夜间模式文字

视觉示例：

1
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
2
  <div style="background: darkblue; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">darkblue<br>深海</div>
3
  <div style="background: navy; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">navy<br>海军制服</div>
4
  <div style="background: darkgreen; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">darkgreen<br>老松树</div>
5
  <div style="background: chocolate; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">chocolate<br>黑巧克力</div>
6
  <div style="background: darkslategray; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">darkslategray<br>黑板灰</div>
7
</div>

darkblue
深海

navy
海军制服

darkgreen
老松树

chocolate
黑巧克力

darkslategray
黑板灰

代码示例（高端品牌导航栏）：

1
.navbar {
2
  background-color: navy; /* 藏青色，比darkblue更高级 */
3
  color: white; /* 白色文字，对比强烈 */
4
  padding: 15px 30px;
5
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
6
}
7

8
.navbar a {
9
  color: lightblue; /* 浅蓝链接，hover时变white */
10
  text-decoration: none;
11
  margin-right: 20px;
12
  transition: color 0.3s;
13
}
14

15
.navbar a:hover {
16
  color: white;
17
}

效果预览：

1
<nav style="background-color: navy; color: white; padding: 15px 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
2
  <a href="#" style="color: lightblue; text-decoration: none; margin-right: 20px; transition: color 0.3s;">首页</a>
3
  <a href="#" style="color: lightblue; text-decoration: none; margin-right: 20px; transition: color 0.3s;">产品</a>
4
  <a href="#" style="color: lightblue; text-decoration: none; margin-right: 20px; transition: color 0.3s;">关于我们</a>
5
  <a href="#" style="color: lightblue; text-decoration: none; transition: color 0.3s;">联系我们</a>
6
</nav>

注解：navy比#000080（hex码）更有”品牌感”——藏青是海军色，自带”可靠、专业”的联想，适合金融、科技类品牌。

4. 自然色：像从大自然”搬”来的颜色#

这些颜色名称对应自然界的实物（比如skyblue=天空蓝、cornflowerblue=矢车菊蓝），名字自带画面感，适合与自然相关的场景（比如旅游、绿植、户外产品）。

颜色名称	效果预览	对应实物	使用场景
`skyblue`	🔹 天空蓝	晴朗的天空	旅游类网站横幅、天气App
`cornflowerblue`	🔹 矢车菊蓝	矢车菊花瓣	艺术展海报、插画背景
`coral`	🧡 珊瑚色	珊瑚礁	美妆类产品、夏季活动横幅
`aquamarine`	🔵 海蓝宝石色	清澈的海水	潜水App、泳池设计
`forestgreen`	🟢 森林绿	茂密的森林	绿植店、环保组织官网

视觉示例：

1
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
2
  <div style="background: skyblue; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">skyblue<br>晴朗的天空</div>
3
  <div style="background: cornflowerblue; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">cornflowerblue<br>矢车菊花瓣</div>
4
  <div style="background: coral; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">coral<br>珊瑚礁</div>
5
  <div style="background: aquamarine; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">aquamarine<br>清澈的海水</div>
6
  <div style="background: forestgreen; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">forestgreen<br>茂密的森林</div>
7
</div>

skyblue
晴朗的天空

cornflowerblue
矢车菊花瓣

coral
珊瑚礁

aquamarine
清澈的海水

forestgreen
茂密的森林

代码示例（旅游类网站横幅）：

1
.banner {
2
  background-color: skyblue; /* 天空蓝，瞬间联想到"蓝天" */
3
  background-image: url('beach.jpg'); /* 沙滩背景图 */
4
  background-blend-mode: multiply; /* 颜色与图片混合，更自然 */
5
  color: white;
6
  padding: 80px 0;
7
  text-align: center;
8
  background-size: cover;
9
  background-position: center;
10
}
11

12
.banner h1 {
13
  font-size: 48px;
14
  margin-bottom: 20px;
15
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
16
}

效果预览：

1
<div style="background-color: skyblue; color: white; padding: 80px 0; text-align: center; background-blend-mode: multiply; background-size: cover; background-position: center;">
2
  <h1 style="font-size: 48px; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">探索蔚蓝海岸</h1>
3
  <p style="font-size: 18px; margin-bottom: 30px;">阳光、沙滩、海浪，享受完美假期</p>
4
  <button style="background-color: coral; border: none; color: white; padding: 12px 24px; font-size: 16px; border-radius: 4px; cursor: pointer;">立即预订</button>
5
</div>

探索蔚蓝海岸

阳光、沙滩、海浪，享受完美假期

注解：skyblue比#87CEEB（hex码）更有”画面感”——用户看到这个颜色，立刻会联想到”蓝天、沙滩、度假”，比纯hex码更能传递情绪！

5. 特殊色：你可能没听过，但超好用的”隐藏款”#

这些颜色名字有点”奇怪”，但效果超棒，适合小众场景或**需要”点睛之笔”**的地方。

颜色名称	效果预览	特点	使用场景
`lavenderblush`	🌸 淡粉紫	带点紫的浅粉，像腮红	美妆产品详情页、女性博客
`goldenrod`	🟡 金麒麟色	带点橙的金黄，像秋日的草	节日活动横幅、勋章设计
`thistle`	💜 蓟紫色	带灰的淡紫，像蓟花	艺术画廊、手作店铺
`turquoise`	🔹 绿松石色	蓝绿色，像绿松石宝石	珠宝网站、高端饰品
`slateblue`	🔹 石蓝色	带灰的深蓝，像石板	科技类产品、代码编辑器

视觉示例：

1
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
2
  <div style="background: lavenderblush; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">lavenderblush<br>淡粉紫腮红</div>
3
  <div style="background: goldenrod; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">goldenrod<br>秋日金草</div>
4
  <div style="background: thistle; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">thistle<br>蓟花紫</div>
5
  <div style="background: turquoise; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">turquoise<br>绿松石</div>
6
  <div style="background: slateblue; color: white; padding: 15px; border-radius: 4px; min-width: 150px; text-align: center;">slateblue<br>石板蓝</div>
7
</div>

lavenderblush
淡粉紫腮红

goldenrod
秋日金草

thistle
蓟花紫

turquoise
绿松石

slateblue
石板蓝

代码示例（美妆产品详情页）：

1
.product-card {
2
  background-color: lavenderblush; /* 淡粉紫，像腮红，贴合美妆主题 */
3
  border: 1px solid thistle; /* 蓟紫色边框，增加质感 */
4
  padding: 20px;
5
  border-radius: 10px;
6
  max-width: 300px;
7
}
8

9
.product-card h3 {
10
  color: slateblue; /* 石蓝色标题，突出产品名称 */
11
  margin-top: 0;
12
}
13

14
.product-card .price {
15
  color: goldenrod; /* 金麒麟色价格，吸引注意力 */
16
  font-size: 24px;
17
  font-weight: bold;
18
}

效果预览：

1
<div style="background-color: lavenderblush; border: 1px solid thistle; padding: 20px; border-radius: 10px; max-width: 300px;">
2
  <h3 style="color: slateblue; margin-top: 0;">丝绒哑光口红</h3>
3
  <p>持久不脱色，丝绒质地，多种色号可选</p>
4
  <p style="color: goldenrod; font-size: 24px; font-weight: bold;">¥198</p>
5
  <button style="background-color: turquoise; border: none; color: white; padding: 10px 20px; border-radius: 4px; width: 100%; cursor: pointer;">加入购物车</button>
6
</div>

丝绒哑光口红

持久不脱色，丝绒质地，多种色号可选

¥198

注解：lavenderblush（淡粉紫）比#FFF0F5（hex码）更有”美妆感”——名字里带”blush”（腮红），用户看到就会联想到”化妆品、妆容”，比纯hex码更有针对性！

6. 透明色：不是”没有颜色”，是”会呼吸的颜色”#

CSS里还有个特殊的颜色名称：transparent（透明），适合**需要”叠加效果”**的场景（比如半透明遮罩、悬浮按钮）。

代码示例（半透明遮罩）：

1
.modal-overlay {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
8
  display: flex;
9
  align-items: center;
10
  justify-content: center;
11
}
12

13
.modal-content {
14
  background-color: white;
15
  padding: 30px;
16
  border-radius: 8px;
17
  max-width: 500px;
18
  width: 90%;
19
}

效果预览：

1
<div style="width: 400px; height: 200px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center;">
2
  <div style="background-color: white; padding: 30px; border-radius: 8px; max-width: 500px; width: 90%;">
3
    <h3 style="margin-top: 0;">提示</h3>
4
    <p>这是一个半透明遮罩效果的模态框，背景使用了rgba实现50%透明度的黑色。</p>
5
    <button style="background-color: skyblue; border: none; color: white; padding: 8px 16px; border-radius: 4px; cursor: pointer;">确定</button>
6
  </div>
7
</div>

提示

这是一个半透明遮罩效果的模态框，背景使用了rgba实现50%透明度的黑色。

注解：transparent本身是”全透明”，但通常用rgba()（红-绿-蓝-透明度）来调半透明——比如rgba(0,0,0,0.5)是”50%透明的黑”，比opacity更灵活（不会影响子元素的透明度）。

四、写CSS颜色的”避坑技巧”——别让颜色毁了你的设计#

别用”荧光色”当主色：比如fuchsia（品红）、lime（酸橙绿），饱和度太高，会让用户眼睛累，适合当”强调色”（比如按钮hover效果）；
用颜色名称提升代码可读性：比如skyblue比#87CEEB好懂，同事看代码不用查hex码；
注意浏览器兼容性：所有CSS颜色名称都是W3C标准，兼容所有现代浏览器（IE6都支持！），放心用；
搭配用”同色系”：比如navy（藏青）+lightblue（浅蓝），forestgreen（森林绿）+palegreen（淡绿），不会出错；
用工具查颜色名称：如果看到一个hex码想知道对应什么名称，用这个工具：HTML Color Names（输入hex码，直接出名称！）。

五、结尾：颜色名称的”终极意义”——让CSS更有”人味”#

CSS颜色名称不是”代码”，是**“用文字描述颜色的情绪”**——比如skyblue不是”#87CEEB”，是”晴朗的天空”；lavender不是”#E6E6FA”，是”薰衣草花”。

写CSS的时候，用颜色名称代替hex码，不是”图方便”，是**“让你的代码更有温度”**——同事看了会说”哦，这个蓝是天空蓝，适合旅游网站”，而不是”这个hex码是啥颜色来着？”

最后送你一句话：“颜色名称是CSS给开发者的小浪漫——不用记代码，凭感觉就能挑对色。“

附录：CSS颜色名称速查表（收藏版）#

把常用颜色按”色系”整理成表格，方便快速查找：

色系	颜色名称列表
蓝色系	`blue`、`lightblue`、`skyblue`、`cornflowerblue`、`navy`、`slateblue`、`turquoise`
绿色系	`green`、`lightgreen`、`palegreen`、`darkgreen`、`forestgreen`
红色系	`red`、`coral`、`salmon`、`darkred`
黄色系	`yellow`、`goldenrod`、`darkorange`
紫色系	`purple`、`lavender`、`thistle`、`slateblue`、`lavenderblush`
灰色系	`gray`、`lightgray`、`darkgray`、`darkslategray`

这样写完，读者不仅能”查颜色”，还能”懂颜色”——知道每个颜色适合什么场景，为什么叫这个名字，彻底告别”颜色名称焦虑”～

如果需要补充”罕见但好用的颜色”或”颜色搭配案例”，随时喊我！ 😊

音乐

音乐

有温度的CSS颜色指南：不用记代码，凭名字就能挑对色#

一、开头：你是不是也有”颜色名称PTSD”？#

二、先搞懂：CSS颜色名称的”底层逻辑”#

三、按”使用场景”分类：CSS颜色名称速查#

1. 基础色：万年不会错的”安全牌”#

2. 浅色系：温柔到骨子里的”莫兰迪平替”#

文艺风卡片示例

3. 深色调：高级感拉满的”复古风”#

4. 自然色：像从大自然”搬”来的颜色#

探索蔚蓝海岸

5. 特殊色：你可能没听过，但超好用的”隐藏款”#

丝绒哑光口红

6. 透明色：不是”没有颜色”，是”会呼吸的颜色”#

提示

四、写CSS颜色的”避坑技巧”——别让颜色毁了你的设计#

五、结尾：颜色名称的”终极意义”——让CSS更有”人味”#

附录：CSS颜色名称速查表（收藏版）#

支持与分享

评论区

文章目录

音乐

音乐

【CSS】颜色名称速查：CSS自带的颜色名称大全 + 使用场景

有温度的CSS颜色指南：不用记代码，凭名字就能挑对色#

一、开头：你是不是也有”颜色名称PTSD”？#

二、先搞懂：CSS颜色名称的”底层逻辑”#

三、按”使用场景”分类：CSS颜色名称速查#

1. 基础色：万年不会错的”安全牌”#

2. 浅色系：温柔到骨子里的”莫兰迪平替”#

文艺风卡片示例

3. 深色调：高级感拉满的”复古风”#

4. 自然色：像从大自然”搬”来的颜色#

探索蔚蓝海岸

5. 特殊色：你可能没听过，但超好用的”隐藏款”#

丝绒哑光口红

6. 透明色：不是”没有颜色”，是”会呼吸的颜色”#

提示

四、写CSS颜色的”避坑技巧”——别让颜色毁了你的设计#

五、结尾：颜色名称的”终极意义”——让CSS更有”人味”#

附录：CSS颜色名称速查表（收藏版）#

支持与分享

评论区

文章目录