在CSS中指定颜色有很多种方式，比如颜色名称、rgb函数、hsl函数，但使用频率最高的依然是十六进制颜色代码，也就是形如#FF0000这样的写法。它简短、直观，设计师在PhotoShop或Figma里取色时给出的默认值通常就是十六进制形式。本文将系统讲解十六进制颜色代码的原理、写法细节和实际应用，帮你彻底掌握这一最基础也最常用的颜色表示方式。
十六进制颜色代码的组成原理
要理解十六进制颜色，先要了解显示器显色的基本原理。屏幕上的每一个像素都由红、绿、蓝三个颜色通道组合而成，这就是常说的RGB色彩模式。每个通道的取值范围是0到255，三个通道以不同的强度混合，就能呈现出上千万种颜色。
十六进制颜色代码本质上就是把这三个通道的数值用十六进制表示出来。所谓十六进制，就是逢十六进一，数字部分用0到9加上字母A到F表示，其中A代表10，F代表15。一个两位的十六进制数可以表示的范围是00到FF，换算成十进制正好是0到255，恰好对应一个颜色通道的完整取值范围。
所以一个标准的六位十六进制颜色代码结构是：井号开头，随后每两位代表一个通道。例如#FF0000中，FF表示红色通道拉满，00和00表示绿色、蓝色通道关闭，最终呈现纯红色。再看#336699，33是红色通道（十进制51），66是绿色通道（十进制102），99是蓝色通道（十进制153），三者混合形成一种偏深的蓝灰色。理解了这个结构，看到任何颜色代码你都能大致推断出它的色彩倾向。
三种常见写法：六位、三位与八位
除了标准的六位写法，CSS还支持简化的三位写法。当每个通道的两位数字相同时，可以各取一位缩写。比如#FF0000可以缩写为#F00，#FFFFFF可以缩写为#FFF。需要注意三位缩写只能在每个通道两个字符完全一致的情况下使用，#FA8072这种颜色就无法缩写，因为F和A并不相同。
现代浏览器还支持八位写法，也就是在六位颜色后面追加两位表示透明度的通道。例如#FF000080表示半透明的红色。最后两位同样采用十六进制，00表示完全透明，FF表示完全不透明，中间数值呈现不同程度的半透明效果。80换算成十进制是128，约为255的一半，所以#FF000080大致相当于rgba(255, 0, 0, 0.5)的视觉效果。
关于大小写问题，#ff0000和#FF0000在浏览器眼里完全等价，具体用哪种主要看团队规范。另外井号是十六进制颜色代码的必需前缀，漏掉井号写成了ff0000，浏览器会认为这是一个非法值而忽略整条声明，这是初学者经常踩的坑。下面通过一个综合示例展示三种写法的实际效果：
/* 六位标准写法：纯蓝色背景 */
.box1 {
background-color: #0000FF;
}
/* 三位缩写写法：与 #0000FF 等价 */
.box2 {
background-color: #00F;
}
/* 八位写法：带 50% 透明度的蓝色 */
.box3 {
background-color: #0000FF80;
}在实际样式中的应用
十六进制颜色代码可以应用在任何接受颜色值的CSS属性上，最常见的是color、background-color和border相关属性。color控制文字颜色，background-color控制背景填充，border或border-color控制边框颜色。下面这段代码演示了一个卡片组件的配色：
.card {
color: #333333; /* 深灰色文字 */
background-color: #F8F9FA; /* 浅灰色背景 */
border: 1px solid #DEE2E6; /* 边框用更深一点的灰 */
}
.card .title {
color: #0D6EFD; /* 蓝色标题 */
}
.card .desc {
color: #6C757D; /* 次要说明文字用中灰色 */
}在实际项目中，一套成熟的配色方案通常只会使用有限的几个十六进制值，比如主色#0D6EFD、成功色#198754、警告色#FFC107、危险色#DC3545。建议把这些颜色定义成CSS自定义属性，统一管理，需要调整主题时只改一处即可：
:root {
--primary: #0D6EFD;
--success: #198754;
--warning: #FFC107;
--danger: #DC3545;
--text-main: #212529;
--text-muted: #6C757D;
}
.button-primary {
background-color: var(--primary);
color: #FFFFFF;
}与rgba、hsl等方式的对比选择
rgba函数也能设置透明度，比如rgba(255, 0, 0, 0.5)和#FF000080效果相同，但rgba的透明度参数是十进制小数，更直观易读，需要频繁调整透明度时用rgba更方便。而十六进制的优势在于简短，且可以直接从设计软件复制粘贴，不需要换算，所以在还原设计稿的场景下十六进制依然是首选。
hsl方式则用色相、饱和度、亮度三个维度描述颜色，例如hsl(210, 100%, 50%)。它的好处是调整颜色更符合人的直觉，想把颜色调亮一点只需要增大亮度百分比。适合需要程序化生成一组近似色调的场景。而十六进制适合颜色已经确定的场景。三种方式没有优劣之分，理解各自特点后按需选择即可。对于刚入门的开发者，先把十六进制颜色代码用熟，能够覆盖日常开发中百分之九十以上的配色需求。
最后提醒一点，在编写代码时要留意颜色值的合法性：六位写法必须是井号加六个十六进制字符，多一位少一位都会导致声明失效。如果遇到颜色不生效的情况，先检查井号有没有写、位数对不对、有没有混入字母G之类的非法字符，多数问题都能快速定位。