CSS颜色可通过预定义名称（如red、blue）或自定义值（如RGB、Hex、HSL）设置，前者简便但选择有限，后者灵活且支持透明度与精确调控；推荐使用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）。
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; }
通过修改
:root
下的变量值，可以一次性更新所有使用该变量的元素的颜色，极大地提高了代码的可维护性。
如何找到好看的配色方案？
寻找配色方案是一个见仁见智的问题，但有些工具和技巧可以帮助你。
- 配色网站： Adobe Color, Coolors, Paletton等网站提供了丰富的配色方案，可以根据你的需求进行筛选和调整。
- 色彩理论： 了解色彩理论，比如互补色、邻近色、三角色等，可以帮助你搭配出和谐的颜色。
- 灵感来源： 从自然、艺术作品、摄影作品等中寻找灵感，可以发现意想不到的配色方案。
配色没有绝对的正确答案，关键在于找到适合你的风格和需求的颜色组合。多尝试、多学习，就能逐渐掌握配色技巧。