应优先使用Computed面板采样渲染后颜色，而非Styles面板声明值，因后者无法反映继承、filter、透明度叠加及SVG内联色等真实效果；再按功能语义命名并以HSL格式定义:root变量，支持主题切换与动态维护。
直接用 Chrome DevTools 的取色器 + :root 变量整理，比手动抄颜色快 5 倍以上，且能保证后续可维护。
怎么从网页里批量抓出主色、辅色、中性色？
别靠肉眼扫样式表——多数颜色藏在继承链或计算结果里。正确路径是：
- 右键目标元素 →「检查」打开 DevTools，切到 Computed 面板
- 搜索
color或background-color，展开后点旁边小色块启动取色器 - 悬停页面不同区域（按钮、文字、边框、背景），记下高频出现的 3–5 个
#rrggbb值 - 特别注意：如果看到大量
rgb(240, 240, 240)类似值，大概率是同一中性色的不同透明度叠加结果，统一归为--color-gray-100
为什么不能直接复制 Styles 面板里的颜色？
Styles 面板只显示「声明值」，不是「生效值」。常见陷阱：
- 元素用
rgba(0, 0, 0, 0.1)叠在白色背景上 → 取色器读到的是#e6e6e6，但你抄rgba()会导致深色模式下变黑 - 有
filter: brightness(0.9)→ 实际像素变暗，但 Styles 里根本没写颜色 - SVG 内联
fill不出现在 Styles 面板，得去 Elements 面板直接看属性 - 渐变色、阴影色、
currentColor都无法被直接复制，必须用 Computed 面板采样渲染后结果
提取后怎么组织成可维护的 CSS 变量？
关键不是“存下来”，而是“能动态改”。按功能命名 + HSL 格式是唯一靠谱做法：
立即学习“前端免费学习笔记（深入）”；
- 在
:root里定义基础色，例如：--h-primary: 210; --s-primary: 100%; --l-primary: 50%; - 避免写死
#007bff，改用hsl(var(--h-primary), var(--s-primary), var(--l-primary)) - 派生色用 calc：比如浅色背景
hsl(var(--h-primary), var(--s-primary), calc(var(--l-primary) + 20%)) - 透明度单独抽变量：
--alpha-disabled: 0.38;，组合写成hsla(var(--h-primary), var(--s-primary), var(--l-primary), var(--alpha-disabled)) - Safari 15.4 以下不支持
hsl()里嵌calc()，得降级：先定义--l-primary-light: 70%;，再引用
真正容易被忽略的点是：配色方案不是静态快照，它得支撑主题切换和响应式适配。如果提取时没区分功能语义（比如把所有蓝色都叫 --blue-500），后期换设计系统时就得重做全部映射。直接从渲染像素出发，再反推语义，才是高效起点。
