CSS基础教程（五十七）颜色十六进制值：#FF3399！—— 解码CSS十六进制的百万色域，让你的网页不再“好色”！

引言：一场由“好色”引发的代码革命

在网页设计的广袤宇宙中，RGB和HSL等现代调色方式层出不穷，但有一位老家伙，它其貌不扬，却坚挺地统治着CSS颜色世界的大半壁江山——它就是十六进制颜色代码。

它看起来像是一串被外星人加密过的神秘代码：#6A5ACD（板岩蓝）、#B22222（火砖红）、#FFD700（黄金）。对于初学者来说，这简直比女朋友说“随便”还要难猜！但别怕，今天，我们就化身“颜色特工”，撬开这串代码的保险箱，看看里面究竟藏着怎样的彩虹。

第一章：解剖！十六进制颜色的“五脏六腑”

这串代码的结构，其实简单得令人发指。它的核心秘密就藏在它的名字和结构里。

1. 格式：要么短小精悍，要么长大全才

你通常会遇到两种格式：

• 三位短格式：#RGB

• • 例如：#F09。这其实是#FF0099的简写形式。浏览器会自动将每一位复制一份扩展成六位。#F09 = #FF0099。

• 六位长格式：#RRGGBB

• • 这是最最常见的形式，也是我们今天分析的重点。例如：#FF0099。

2. 解码：RRGGBB的终极含义

把这六位字符分成三组，就像这样：RR GG BB。

• RR：代表红色（Red）的强度
• GG：代表绿色（Green）的强度
• BB：代表蓝色（Blue）的强度

这就是著名的RGB色彩模型。所有颜色都是通过红、绿、蓝三色光以不同的比例混合而成的。

3. 进制：为什么是十六进制？

这是我们理解的关键！为什么不用熟悉的0-100%，而是用奇怪的字母和数字？

• 十进制（Decimal）：我们熟悉的0-9，逢十进一。
• 十六进制（Hexadecimal）：用16个符号表示，逢十六进一。即：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F