css颜色名称和自定义颜色使用方法-css教程-PHP中文网

css颜色名称和自定义颜色使用方法

P粉602998670

发布： 2025-09-21 17:30:02

原创

445人浏览过

CSS颜色可通过预定义名称（如red、blue）或自定义值（如RGB、Hex、HSL）设置，前者简便但选择有限，后者灵活且支持透明度与精确调控；推荐使用CSS变量统一管理颜色，提升维护性，同时借助配色工具与色彩理论优化视觉效果。

css颜色名称和自定义颜色使用方法

CSS颜色名称和自定义颜色使用方法，简单来说，就是教你如何在网页上给东西涂上你想要的颜色。前者用的是预定义好的名字，后者则给你更大的自由度，可以调配出独一无二的颜色。

解决方案

CSS中设置颜色主要有两种方式：使用预定义的颜色名称和使用自定义颜色值。

1. 预定义的颜色名称：

CSS预定义了一些常用的颜色名称，可以直接在样式中使用，比如

red

登录后复制

、

blue

登录后复制

、

green

登录后复制

、

black

登录后复制

、

white

登录后复制

等等。使用起来非常简单直观。

立即学习“前端免费学习笔记（深入）”；

body {
  background-color: lightblue; /* 背景色设置为淡蓝色 */
  color: darkgreen; /* 文字颜色设置为深绿色 */
}

h1 {
  color: red; /* 标题颜色设置为红色 */
}

登录后复制

虽然颜色名称方便，但选择有限，无法满足所有需求。

2. 自定义颜色值：

自定义颜色值才是精髓，它允许你通过不同的方式指定颜色，包括：

RGB (Red, Green, Blue): 使用红、绿、蓝三原色的组合来定义颜色。每个颜色的取值范围是0-255。
```
p {
  color: rgb(255, 0, 0); /* 红色 */
}

div {
  background-color: rgb(100, 149, 237); /* 淡蓝色 */
}
```
登录后复制
RGBA (Red, Green, Blue, Alpha): 在RGB的基础上增加了Alpha通道，用于控制颜色的透明度。Alpha的取值范围是0-1，0表示完全透明，1表示完全不透明。
```
.transparent-box {
  background-color: rgba(255, 255, 0, 0.5); /* 半透明的黄色 */
}
```
登录后复制
Hexadecimal (十六进制): 使用十六进制数来表示颜色。格式为
```
#RRGGBB
```
登录后复制
，其中RR、GG、BB分别代表红、绿、蓝的十六进制值（00-FF）。

NameGPT名称生成器
免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

0

查看详情
```
a {
  color: #00FF00; /* 绿色 */
}

button {
  background-color: #FFA500; /* 橙色 */
}
```
登录后复制
简写形式：如果RGB的每两位都相同，可以简写为
```
#RGB
```
登录后复制
，例如
```
#FF0000
```
登录后复制
可以简写为
```
#F00
```
登录后复制
。
HSL (Hue, Saturation, Lightness): 使用色相、饱和度、亮度来定义颜色。
- Hue (色相)：取值范围是0-360，表示颜色在色轮上的角度。
- Saturation (饱和度)：取值范围是0%-100%，表示颜色的纯度。0%为灰色，100%为完全饱和的颜色。
- Lightness (亮度)：取值范围是0%-100%，表示颜色的亮度。0%为黑色，100%为白色，50%为正常亮度。
```
h2 {
  color: hsl(120, 100%, 50%); /* 绿色 */
}
```
登录后复制
HSLA (Hue, Saturation, Lightness, Alpha): 在HSL的基础上增加了Alpha通道，用于控制颜色的透明度。
```
.overlay {
  background-color: hsla(240, 100%, 50%, 0.3); /* 半透明的蓝色 */
}
```
登录后复制

如何选择合适的颜色表示方法？

选择哪种颜色表示方法取决于具体的需求和个人偏好。

颜色名称: 简单易懂，适合快速设置常用颜色。
RGB/RGBA: 广泛支持，适合精确控制颜色，RGBA适合需要透明效果的场景。
Hexadecimal: 简洁常用，在很多设计工具中被广泛使用。
HSL/HSLA: 更符合人类对颜色的感知，易于调整颜色的亮度和饱和度。

为什么我的颜色在不同浏览器上显示不一样？

颜色显示差异可能由多种因素导致。不同显示器存在色域差异，导致颜色还原不一致。浏览器对颜色配置文件的处理方式也可能不同，导致颜色显示略有差异。为了尽量减少差异，建议使用sRGB颜色空间，并校准显示器。

如何使用CSS变量来管理颜色？

CSS变量（也称为自定义属性）允许你定义可重复使用的颜色值，方便统一管理和修改。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

登录后复制

通过修改