应先锚定 base-hue 再调控明度 / 饱和度，优先选蓝绿系如 hsl(200,60%,50%)；辅色仅调 lightness；css 变量按语义 + 层级命名；暗色模式必重定义 background、color、border-color；需用工具验证对比度与边缘场景。
怎么从零定出不翻车的主色和辅色
配色不是挑几个好看的颜色堆一起，而是先锚定一个 base-hue（基础色相），再用明度 / 饱和度做梯度控制。人眼对蓝绿系宽容度高，红黄系稍一过饱和就刺眼——所以hsl(200, 60%, 50%) 比hsl(30, 90%, 50%)更适合作为博客主色起点。
实操建议：
- 在浏览器开发者工具里打开「Styles」面板，直接改
background-color的hsl()值，实时拖动滑块观察变化 - 避免用
#ff6b6b这类十六进制硬编码色值，它无法体现色彩逻辑关系 - 主色选完后，辅色只调整
lightness：比如主色是hsl(210, 70%, 45%)，那么标题可用hsl(210, 70%, 25%)，正文文字用hsl(210, 15%, 35%)
CSS 自定义属性怎么组织才不乱
把颜色全塞进 :root 里看似省事，实际维护时根本分不清 --color-primary 到底对应哪个视觉层级。真正管用的是按语义 + 层级分组，比如 --text-heading、--bg-card、--border-input，而不是--color-blue-dark 这种描述性命名。
常见错误现象：
立即学习 “ 前端免费学习笔记（深入）”；
- 改一个
--primary，结果按钮、链接、分割线全变色，因为没做用途隔离 - 暗色模式切换时，只覆盖了
background却漏掉border-color，导致边框消失 - 用
var(--color-primary)给box-shadow赋值，但阴影需要透明度，硬套会出错
正确做法：每个颜色变量只服务于一个明确用途，哪怕多写几行也别复用。
暗色模式下哪些颜色必须重定义
不是所有颜色都需要重写，但三类必须动手：background、color（文字）、border-color。其他如box-shadow、accent-color（表单控件高亮）也常被忽略。
使用场景：
- 用
@media (prefers-color-scheme: dark)包裹重定义，别用 JS 监听matchMedia——CSS 原生支持更稳 -
background别直接设#000，用hsl(210, 10%, 8%)这类带灰度的深色，眼睛更舒服 - 文字色别用纯白
#fff，hsl(210, 5%, 95%)能降低对比度冲击 - 检查
svg图标是否用了fill: currentColor，否则暗色下可能看不见
怎么验证配色系统真能用
配色做完不等于结束，重点看三个地方：文字可读性、交互反馈是否清晰、边缘场景是否崩。WCAG AA 级要求文本与背景对比度≥4.5:1，但工具只报数字，不管实际体验。
实操建议：
- 用浏览器插件「Color Contrast Analyzer」扫一遍所有文字组合，特别注意
small字号和斜体字 - 把页面缩放到 80%，看浅灰文字是否糊成一片
- 在 Mac 上开「减少透明度」+「增加对比度」系统设置，看卡片阴影、分隔线是否还在
- 禁用图片后，仅靠颜色区分的 UI 元素（如状态标签）是否还能识别
最常被忽略的是：颜色变量一旦被用在 filter: brightness() 或mix-blend-mode里，数值关系就全变了，得单独测试。
