新手学CSS颜色应掌握HEX、RGB、HSL三类核心表示法：HEX是RGB的十六进制压缩写法，适合设计稿复用；RGB用数值直观调控三原色明暗与透明度；HSL按人眼习惯通过色相、饱和度、亮度实现自然调色与主题管理。
新手学CSS颜色，不用死记硬背，抓住三类核心表示法的逻辑差异，就能快速上手。重点不是“怎么写”，而是“为什么这么写”——每种方式解决的问题不同。
HEX：设计师给你的“成品色号”
它本质是RGB的十六进制压缩写法，比如 #ff6b35 就等于 rgb(255, 107, 53)。前两位ff是红，中间6b是绿，后两位35是蓝。只要记住“#RRGGBB”这个结构，就能看懂大部分设计稿里的颜色值。
- 简写规则很实用：#f63 等于 #ff6633，适合快速手写
- 不带透明度，想半透明得换 rgba 或 #RRGGBBAA（后者兼容性略差）
- 复制粘贴最方便——Figma、Sketch、Chrome开发者工具都默认显示 HEX
RGB：用数字“调光”一样控制三原色
rgb(255, 107, 53) 直接告诉你：红色开满，绿色中等，蓝色偏弱。数值越接近 0 越暗，越接近 255 越亮。这种写法让你一眼看出颜色构成。
- rgb(0,0,0) 是黑，rgb(255,255,255) 是白，rgb(128,128,128) 是标准灰
- 加个第四位就变 rgba(255, 107, 53, 0.6)，透明度独立可控，不影响子元素
- 适合做动态效果——JavaScript 改数字比改 HEX 容易得多
HSL：按人眼习惯“调色”而不是“调数”
hsl(14, 90%, 60%) 的意思是：从红色（0°）往黄方向转14°，饱和度拉高，亮度适中。它把颜色拆成三个更自然的维度：
立即学习“前端免费学习笔记（深入）”；
- 色相（H）：0–360°的色轮角度，0=红，120=绿，240=蓝
- 饱和度（S）：0% 是灰，100% 是最纯的色
- 亮度（L）：0% 是黑，100% 是白，50% 是“标准亮度”
- 想让按钮悬停时颜色变亮？直接改 L 值就行，不用重新算 RGB
- 配色系超简单：固定 H 和 S，只调 L，就能生成一套协调的深浅色
不复杂但容易忽略：实际项目里，HEX 用于定稿色值，RGB/RGBA 用于需要透明或脚本控制的场景，HSL/HSLA 用于主题色管理与视觉微调。混着用才高效。
