配色方案的色彩理论：互补色、三角色、分裂互补、类似色

Q: 配色方案有几种？哪种最稳？

主流 5 种 + 单色。1. 单色（Monochromatic）——同一色相不同明度 / 饱和度（如蓝色 + 浅蓝 + 深蓝）。优点：极简、永远不会撞色；缺点：缺乏对比、视觉单调。2. 类似色（Analogous）——色相环相邻 30-60° 的颜色（蓝 + 蓝绿 + 绿）。优点：和谐自然；缺点：可能太"软"缺乏焦点。3. 互补色（Complementary）——色相环对面 180°（红 + 绿、蓝 + 橙）。优点：对比强、视觉冲击；缺点：用不好会"刺眼"。4. 分裂互补（Split-Complementary）——一个主色 + 互补色的两侧（蓝 + 黄橙 + 红橙）。优点：保留对比但更柔和；缺点：组合复杂。5. 三角色（Triadic）——色相环上等距 120°（红 + 黄 + 蓝）。优点：活泼、平衡；缺点：每个颜色都很强，需要主次。6. 矩形 / 四角色（Tetradic）——四个色相互成 90°。优点：丰富；缺点：很难协调。最稳的：(1) 单色 / 类似色 —— 永远不出错，但平淡；(2) 分裂互补 —— 比纯互补更柔和；(3) 三角色 —— 明确分工时效果好。实务：(1) 不确定 → 单色 / 类似色；(2) 需要冲击 → 互补色但 80% 主色 + 20% 互补；(3) 多样化 → 三角色但选一个为主。

Q: 互补色为什么"刺眼"？怎么避免？

互补色相互"抵消"，纯饱和度时视觉极度紧张。生理原因：(1) 视网膜的红绿、蓝黄两组对立细胞被同时强烈刺激；(2) 大脑感受到"颜色振动"——两色边界看起来在闪；(3) 长时间看会眼疲劳。典型刺眼组合：(1) 纯红 + 纯绿；(2) 纯蓝 + 纯橙；(3) 纯黄 + 纯紫。柔和的策略：(1) 降低饱和度 —— 红绿 → 砖红 + 橄榄绿；(2) 降低明度 —— 暗红 + 暗绿；(3) 调整比例 —— 80% 主 + 20% 互补，主色大面积、互补做点缀（按钮 / 强调）；(4) 加中性色缓冲 —— 红 + 灰 + 绿，灰色"隔开"两个色；(5) 选分裂互补 —— 不用纯互补，用互补两侧的色。典型应用：(1) 品牌强对比：互补色 + 高饱和 + 大胆设计（如 Coca-Cola 红白对比，但红是主色 70%）；(2) 温馨日常：互补色 + 低饱和（柔和橙 + 柔和蓝）；(3) 警示设计：红绿对比（交通灯）—— 故意刺眼以引起注意。

Q: 60-30-10 配色比例规则是什么？

经典室内 / 平面设计比例。规则：(1) 60% 主色（dominant） —— 占据大面积，营造氛围；(2) 30% 次色（secondary） —— 平衡画面，与主色互动；(3) 10% 强调色（accent） —— 小面积亮色，吸引焦点。为什么这个比例：(1) 60% 让眼睛找到"主基调"——画面有统一感；(2) 30% 提供视觉变化但不抢戏；(3) 10% 强调色作为画面焦点 —— 不会喧宾夺主。典型场景：网页设计：(1) 60% 背景 + 大块区域（白 / 浅灰）；(2) 30% 次要元素（卡片背景 / 边框）；(3) 10% 主按钮 / 链接 / CTA。室内：(1) 60% 墙面 + 地板大面积（米色 / 米白）；(2) 30% 家具（深木色 / 灰）；(3) 10% 抱枕 / 装饰画 / 花卉（亮色）。实务：(1) 60-30-10 不是绝对的——70-20-10 / 50-30-20 都行；(2) 关键是 明确主次、避免均分 —— 三种各 33% 看起来杂乱；(3) 颜色"重量"不只是面积，还看饱和度（小面积高饱和 = 视觉"重"）。

Q: 暖色 vs 冷色，应该怎么用？

情绪与场景的对应。暖色（红、橙、黄）：(1) 视觉感受 —— 温暖、积极、热情、活力；(2) 心理效果 —— 引发食欲（餐饮品牌爱用红橙）、提高心率；(3) 视觉前进 —— 暖色看起来"靠近观众"；(4) 适合场景 —— 餐厅、儿童产品、运动品牌、节日。冷色（蓝、绿、紫）：(1) 视觉感受 —— 平静、专业、信任、清爽；(2) 心理效果 —— 降低紧张、营造科技感；(3) 视觉后退 —— 冷色看起来"远离观众"；(4) 适合场景 —— 银行、医疗、科技、企业、瑜伽 / 冥想。中性色（黑、白、灰、棕、米）：(1) 适合做主色或衬色；(2) 与任何冷暖搭都协调；(3) 现代极简风的核心。典型应用：(1) 可口可乐红 —— 引发食欲 + 激情；(2) Facebook 蓝 —— 冷色 + 信任 + 科技；(3) 星巴克绿 —— 平静 + 自然 + 优雅。陷阱：(1) 冷色调过深的医疗品牌 → 冰冷距离感；(2) 暖色调过亮的金融品牌 → 不严肃；(3) 全冷色 / 全暖色容易乏味 → 加少量对比（10%）。

Q: 色彩心理学真的有科学依据吗？文化差异大吗？

部分有生理基础，文化差异显著。有生理基础的：(1) 红色 —— 引起心率上升 / 食欲增加（多文化共通）；(2) 蓝色 —— 抑制食欲 / 降低心率（多文化共通）；(3) 绿色 —— 自然色，最不易疲劳的颜色（眼科共识）；(4) 婴儿对鲜艳颜色（红黄）注意力优先（先天）。文化差异大的：(1) 白色：西方 = 婚礼 / 纯洁；中国 = 葬礼 / 哀悼；(2) 黑色：多数文化 = 庄重 / 死亡；时尚 = 优雅；(3) 红色：中国 = 喜庆 / 财富；西方 = 危险 / 警告；(4) 黄色：中国古代 = 皇室 / 尊贵；现代某些场景 = 警告（黄色三角）；(5) 绿色：金融绿色 = 美股涨；中国股市 = 跌；(6) 紫色：欧洲 = 皇室 / 贵族；某些地区 = 葬礼。实务：(1) 国际化产品 → 避开极端文化色（如不要用纯红做西方医疗品牌）；(2) 本土化时调研当地文化；(3) 大多数职业场景中性色（蓝灰白）最安全。

Q: HSL 和 HSV 在配色时哪个更好用？

HSL 在网页 / 平面更直观，HSV 在数字绘画更直接。HSL（Hue Saturation Lightness）：(1) Hue：色相 0-360°（红 → 绿 → 蓝）；(2) Saturation：饱和度 0-100%；(3) Lightness：明度 0-100%（0 = 黑、50 = 纯色、100 = 白）。HSV（Hue Saturation Value）：(1) Hue：同 HSL；(2) Saturation：同；(3) Value：明度 0-100%（0 = 黑、100 = 纯色，没有变白）。关键差异：(1) HSL 的 Lightness 50% 是纯色 —— 调高变白、调低变黑；(2) HSV 的 Value 100% 是纯色 —— 调低变黑、不能再"调高变白"；(3) HSL 更符合"先有色，再加白 / 黑"的认知；(4) HSV 更符合"颜色亮度"的认知。配色实务：(1) 想做"同色系明暗" → HSL（Lightness 30/50/70）；(2) 想做"亮度变化" → HSV；(3) CSS 写颜色 → HSL（CSS 标准支持）；(4) 数字绘画 / Photoshop → HSV（拾色器默认）。OKLCH（现代）：感知均匀色彩空间，是 HSL 的升级版——避免 HSL 的"绿色看起来比蓝色亮"问题。

Q: 配色辅助工具推荐？

几类工具速查。色相环 + 配色方案：(1) Adobe Color color.adobe.com —— 业界标准；(2) Coolors coolors.co —— 一键生成 5 色调色板；(3) Paletton paletton.com —— 互补 / 三角色 / 类似色一键生成；(4) Color Hunt colorhunt.co —— 收藏的好配色；(5) Khroma khroma.co —— AI 个性化推荐。截图取色：(1) Color Picker —— macOS 系统自带；(2) Sip —— Mac 取色 + 调色板管理；(3) ColorZilla —— 浏览器扩展；(4) Pixie —— Windows 取色。色彩可访问性：(1) WebAIM Contrast Checker —— 算 WCAG 对比度；(2) Stark（Figma / Sketch 插件）—— 设计中实时检查。色彩转换：(1) HSL ↔ RGB ↔ HEX —— 多数色环工具自带；(2) 命令行工具 chroma-js；(3) Figma / Sketch 内置。实务：(1) 设计开始前用 Adobe Color 选 5 色基调；(2) 取色时用 Color Picker 拾取屏幕色；(3) 提交前用 Contrast Checker 验对比度。

Q: 配色 + 暗色模式怎么处理？

不是简单"反转"——需要重新设计。直接反转的问题：(1) 纯白背景 → 纯黑 → 黑色边缘锐利刺眼；(2) 纯黑文字 → 纯白 → 在暗背景上太亮；(3) 品牌色在暗背景看起来过于鲜艳。正确暗色策略：(1) 背景不用纯黑 —— 用 #121212 - #1A1A1A（OLED 屏更省电用纯黑，但视觉用 dark gray）；(2) 文字不用纯白 —— 用 #E0E0E0 - #FFFFFF + 透明度（90% / 60% / 38%）；(3) 品牌色降饱和度 —— 暗背景上鲜艳色看起来过于刺激；(4) 海拔层级 —— 越靠近用户的层（卡片、模态框）越浅，营造空间感；(5) 强调色调亮 —— 暗背景上需要更亮的颜色才显眼。Material Design 3 暗色规范：(1) 表面色 #121212；(2) 海拔层级（24% / 12% / 8% 等）；(3) Primary 在暗模式下亮度 +20-30%。iOS 暗色规范：(1) 系统色（systemBackground / label）—— 自动适配；(2) 自定义色用 UIColor.dynamicProvider —— 暗 / 亮分别定义。实务：(1) 设计稿同时画亮 / 暗模式；(2) 用 CSS variables / Figma variables 切换；(3) 测试图标在暗背景下是否足够清晰。

2026-04-26 · 约 4 分钟 🎨 颜色工具

配色方案的”和谐”不是玄学——色相环上的几何关系决定了哪些颜色组合人眼看起来舒服。从 1666 年牛顿的色相环到现代 OKLCH 色彩空间，色彩理论一直在演进，但几个核心配色规则对设计师 200 年来一直有效。

色相环：所有配色的起点

            红 (0°)
        橙红     紫红
     橙              紫
   黄橙                蓝紫
   
   黄                  蓝
   
   黄绿                蓝绿
     绿              青
        嫩绿     蓝绿
            绿 (120°)

色相环上的关键角度：

0° / 360°：红
120°：绿
240°：蓝
60°：黄
180°：青（蓝绿）
300°：洋红

5 种主流配色方案

1. 单色（Monochromatic）

基色 → 不同明度 / 饱和度

例：蓝色系
  #001F3F (深海蓝)
  #003F7F (深蓝)
  #1E90FF (亮蓝)
  #87CEEB (浅蓝)
  #E0F0FF (淡蓝)

优点：极简、和谐、永不出错。

缺点：缺乏对比，可能单调。

适合：极简风格网站、品牌画册、专业服务（律所 / 银行）。

2. 类似色（Analogous）

色相环相邻 30-60° 的颜色

例：蓝绿系
  #00BFFF (天蓝)
  #00CED1 (深绿松石)
  #20B2AA (浅海绿)
  #3CB371 (中绿)

优点：自然和谐、像自然界的色彩过渡。

缺点：可能太”软”缺乏视觉焦点。

适合：自然 / 户外 / 健康主题、杂志排版、温馨场景。

3. 互补色（Complementary）

色相环对面 180°

经典互补：
  红（0°）+ 绿（120°）  ❌ 不是真互补，是 120°
  红（0°）+ 青（180°）  ✓ 真互补
  蓝（240°）+ 橙（60°）  ✓ 互补
  黄（60°）+ 紫（300°）  ✓ 互补

优点：对比强烈、视觉冲击。

缺点：纯饱和度时刺眼。

适合：警示设计、品牌强烈对比（如可口可乐红白）、运动品牌。

柔和策略：

降低饱和度（暗红 + 暗绿）
调整比例（80% + 20%）
加中性色缓冲

4. 分裂互补（Split-Complementary）

主色 + 互补色两侧 30°

例：蓝（240°）+ 黄橙（30°）+ 红橙（90°）
   # 互补的两侧

优点：保留对比但更柔和、变化丰富。

缺点：协调难度比纯互补高。

适合：插画、海报、艺术作品。

5. 三角色（Triadic）

色相环等距 120°

例：红 + 绿 + 蓝（基础三原色）
   黄 + 青 + 洋红（基础三补色）

优点：活泼、平衡、童趣感。

缺点：每个颜色都很强，需要主次。

适合：儿童产品、节日设计、丰富多变的场景。

60-30-10 比例规则

60% 主色（dominant）
  ↓
营造整体氛围
  ↓
通常是中性色 / 主品牌色

30% 次色（secondary）
  ↓
平衡 + 互动
  ↓
与主色形成层次

10% 强调色（accent）
  ↓
小面积亮色
  ↓
按钮 / CTA / 焦点

典型应用：

网页：

60% 白 / 浅灰背景
30% 卡片 / 段落分隔灰
10% 蓝色按钮 / 红色错误

室内：

60% 米色墙 + 木地板
30% 灰色沙发
10% 黄色抱枕 + 橙色装饰

为什么”重量”不只是面积：

高饱和度的小面积 = 视觉”重”
同样面积下，红色比灰色重
调整时考虑感知重量

暖色 vs 冷色的心理学

暖色（红、橙、黄）
  ↓
温暖、积极、活力
  ↓
视觉前进感（看起来近）
  ↓
适合：餐饮、运动、节日、儿童

冷色（蓝、绿、紫）
  ↓
平静、专业、信任
  ↓
视觉后退感（看起来远）
  ↓
适合：医疗、金融、科技、企业

中性色（黑、白、灰、棕、米）
  ↓
百搭
  ↓
现代极简风的基础

典型品牌色与含义：

品牌	主色	含义
可口可乐	红	食欲 + 激情
Facebook	蓝	信任 + 科技
星巴克	绿	自然 + 优雅
McDonald’s	红 + 黄	食欲 + 活力
IBM	蓝	商务 + 可靠
Tiffany	罗宾蛋蓝	优雅 + 奢华

文化差异

颜色	中国	西方	中东	印度
红	喜庆 / 财富 / 婚礼	危险 / 警告 / 爱情	军事 / 危险	纯洁 / 婚礼（红纱丽）
白	葬礼 / 哀悼	婚礼 / 纯洁	哀悼	宁静
黑	严肃 / 死亡	优雅 / 死亡	神秘	邪恶
黄	皇家 / 尊贵	警告 / 怯懦	圣洁	商业
绿	春天 / 健康	自然 / 嫉妒	伊斯兰圣色	收获
紫	高贵	皇室 / 神秘	-	悲伤

实务：

国际化产品 → 避开极端文化色
本土化时调研当地文化
通用安全：蓝灰白中性色

HSL vs HSV vs OKLCH

HSL（CSS 标准）

hsl(蓝 220°, 饱和 80%, 亮度 50%)
       ↓
       Lightness 50% = 纯色
       Lightness 100% = 白
       Lightness 0% = 黑

HSV（数字绘画 / Photoshop 默认）

hsv(蓝 220°, 饱和 80%, 明度 100%)
        ↓
        Value 100% = 纯色
        Value 0% = 黑
        没有"调高变白"的轴

OKLCH（现代色彩空间）

oklch(亮度 0.6, 色度 0.2, 色相 240°)
         ↓
         感知均匀
         没有 HSL 的"绿色看起来比蓝色亮"问题

OKLCH 的优势：

同 Lightness 的不同色相，主观亮度一致
颜色插值（渐变）不会产生灰色断带
CSS Color Module Level 4 支持（2024+）

/* HSL 渐变可能出现"灰色断带" */
background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(120, 100%, 50%));

/* OKLCH 渐变更平滑 */
background: linear-gradient(in oklch, oklch(0.6 0.3 30), oklch(0.6 0.3 150));

配色工具速查

工具	用途
Adobe Color (color.adobe.com)	色相环 + 配色方案生成
Coolors (coolors.co)	一键生成 5 色调色板
Paletton (paletton.com)	互补 / 类似 / 三角生成
Color Hunt (colorhunt.co)	精选配色收藏
Khroma	AI 个性化推荐
WebAIM Contrast Checker	WCAG 对比度检查
Stark (Figma 插件)	实时对比度 + 色盲模拟
ColorZilla (浏览器扩展)	网页取色

暗色模式的特殊设计

错误的"反转"暗色：
  #FFFFFF → #000000  ← 太刺眼
  #333333 → #CCCCCC  ← 失去层次

正确的暗色：
  背景：#121212 ~ #1A1A1A
  卡片：#1E1E1E（更浅，做海拔层）
  文字主：#FFFFFF + 87% 透明
  文字次：#FFFFFF + 60%
  文字三：#FFFFFF + 38%
  品牌色：饱和度降 10-20%

Material Design 3 海拔层：

层级	颜色	用途
Surface	#121212	主背景
Surface +1	#1E1E1E	卡片
Surface +2	#232323	Dialog
Surface +3	#252525	浮层

iOS 暗色：

systemBackground（自动适配）
自定义色用 dynamicProvider

实战清单

✅ 必做：

选定基础配色方案（单色 / 互补 / 三角等）
用 60-30-10 比例（主 / 次 / 强调）
检查 WCAG 对比度（≥ 4.5:1）
国际化考虑文化色彩差异
暗色模式重新设计而非反转

❌ 避免：

三色等比例（视觉混乱）
纯互补色无缓冲（刺眼）
暗色模式纯黑 + 纯白
全冷色 / 全暖色无对比
忽略可访问性（色盲 / 对比度）

配色理论是几何 + 心理学——理解色相环关系、掌握 60-30-10 比例、考虑文化和可访问性，能让设计稿从”凭感觉”升级到”有依据”。

❓ 常见问题

配色方案有几种？哪种最稳？

主流 5 种 + 单色。1. 单色（Monochromatic）——同一色相不同明度 / 饱和度（如蓝色 + 浅蓝 + 深蓝）。优点：极简、永远不会撞色；缺点：缺乏对比、视觉单调。2. 类似色（Analogous）——色相环相邻 30-60° 的颜色（蓝 + 蓝绿 + 绿）。优点：和谐自然；缺点：可能太"软"缺乏焦点。3. 互补色（Complementary）——色相环对面 180°（红 + 绿、蓝 + 橙）。优点：对比强、视觉冲击；缺点：用不好会"刺眼"。4. 分裂互补（Split-Complementary）——一个主色 + 互补色的两侧（蓝 + 黄橙 + 红橙）。优点：保留对比但更柔和；缺点：组合复杂。5. 三角色（Triadic）——色相环上等距 120°（红 + 黄 + 蓝）。优点：活泼、平衡；缺点：每个颜色都很强，需要主次。6. 矩形 / 四角色（Tetradic）——四个色相互成 90°。优点：丰富；缺点：很难协调。最稳的：(1) 单色 / 类似色 —— 永远不出错，但平淡；(2) 分裂互补 —— 比纯互补更柔和；(3) 三角色 —— 明确分工时效果好。实务：(1) 不确定 → 单色 / 类似色；(2) 需要冲击 → 互补色但 80% 主色 + 20% 互补；(3) 多样化 → 三角色但选一个为主。

互补色为什么"刺眼"？怎么避免？

互补色相互"抵消"，纯饱和度时视觉极度紧张。生理原因：(1) 视网膜的红绿、蓝黄两组对立细胞被同时强烈刺激；(2) 大脑感受到"颜色振动"——两色边界看起来在闪；(3) 长时间看会眼疲劳。典型刺眼组合：(1) 纯红 + 纯绿；(2) 纯蓝 + 纯橙；(3) 纯黄 + 纯紫。柔和的策略：(1) 降低饱和度 —— 红绿 → 砖红 + 橄榄绿；(2) 降低明度 —— 暗红 + 暗绿；(3) 调整比例 —— 80% 主 + 20% 互补，主色大面积、互补做点缀（按钮 / 强调）；(4) 加中性色缓冲 —— 红 + 灰 + 绿，灰色"隔开"两个色；(5) 选分裂互补 —— 不用纯互补，用互补两侧的色。典型应用：(1) 品牌强对比：互补色 + 高饱和 + 大胆设计（如 Coca-Cola 红白对比，但红是主色 70%）；(2) 温馨日常：互补色 + 低饱和（柔和橙 + 柔和蓝）；(3) 警示设计：红绿对比（交通灯）—— 故意刺眼以引起注意。

60-30-10 配色比例规则是什么？

经典室内 / 平面设计比例。规则：(1) 60% 主色（dominant） —— 占据大面积，营造氛围；(2) 30% 次色（secondary） —— 平衡画面，与主色互动；(3) 10% 强调色（accent） —— 小面积亮色，吸引焦点。为什么这个比例：(1) 60% 让眼睛找到"主基调"——画面有统一感；(2) 30% 提供视觉变化但不抢戏；(3) 10% 强调色作为画面焦点 —— 不会喧宾夺主。典型场景：网页设计：(1) 60% 背景 + 大块区域（白 / 浅灰）；(2) 30% 次要元素（卡片背景 / 边框）；(3) 10% 主按钮 / 链接 / CTA。室内：(1) 60% 墙面 + 地板大面积（米色 / 米白）；(2) 30% 家具（深木色 / 灰）；(3) 10% 抱枕 / 装饰画 / 花卉（亮色）。实务：(1) 60-30-10 不是绝对的——70-20-10 / 50-30-20 都行；(2) 关键是 明确主次、避免均分 —— 三种各 33% 看起来杂乱；(3) 颜色"重量"不只是面积，还看饱和度（小面积高饱和 = 视觉"重"）。

暖色 vs 冷色，应该怎么用？

情绪与场景的对应。暖色（红、橙、黄）：(1) 视觉感受 —— 温暖、积极、热情、活力；(2) 心理效果 —— 引发食欲（餐饮品牌爱用红橙）、提高心率；(3) 视觉前进 —— 暖色看起来"靠近观众"；(4) 适合场景 —— 餐厅、儿童产品、运动品牌、节日。冷色（蓝、绿、紫）：(1) 视觉感受 —— 平静、专业、信任、清爽；(2) 心理效果 —— 降低紧张、营造科技感；(3) 视觉后退 —— 冷色看起来"远离观众"；(4) 适合场景 —— 银行、医疗、科技、企业、瑜伽 / 冥想。中性色（黑、白、灰、棕、米）：(1) 适合做主色或衬色；(2) 与任何冷暖搭都协调；(3) 现代极简风的核心。典型应用：(1) 可口可乐红 —— 引发食欲 + 激情；(2) Facebook 蓝 —— 冷色 + 信任 + 科技；(3) 星巴克绿 —— 平静 + 自然 + 优雅。陷阱：(1) 冷色调过深的医疗品牌 → 冰冷距离感；(2) 暖色调过亮的金融品牌 → 不严肃；(3) 全冷色 / 全暖色容易乏味 → 加少量对比（10%）。

色彩心理学真的有科学依据吗？文化差异大吗？

部分有生理基础，文化差异显著。有生理基础的：(1) 红色 —— 引起心率上升 / 食欲增加（多文化共通）；(2) 蓝色 —— 抑制食欲 / 降低心率（多文化共通）；(3) 绿色 —— 自然色，最不易疲劳的颜色（眼科共识）；(4) 婴儿对鲜艳颜色（红黄）注意力优先（先天）。文化差异大的：(1) 白色：西方 = 婚礼 / 纯洁；中国 = 葬礼 / 哀悼；(2) 黑色：多数文化 = 庄重 / 死亡；时尚 = 优雅；(3) 红色：中国 = 喜庆 / 财富；西方 = 危险 / 警告；(4) 黄色：中国古代 = 皇室 / 尊贵；现代某些场景 = 警告（黄色三角）；(5) 绿色：金融绿色 = 美股涨；中国股市 = 跌；(6) 紫色：欧洲 = 皇室 / 贵族；某些地区 = 葬礼。实务：(1) 国际化产品 → 避开极端文化色（如不要用纯红做西方医疗品牌）；(2) 本土化时调研当地文化；(3) 大多数职业场景中性色（蓝灰白）最安全。

HSL 和 HSV 在配色时哪个更好用？

HSL 在网页 / 平面更直观，HSV 在数字绘画更直接。HSL（Hue Saturation Lightness）：(1) Hue：色相 0-360°（红 → 绿 → 蓝）；(2) Saturation：饱和度 0-100%；(3) Lightness：明度 0-100%（0 = 黑、50 = 纯色、100 = 白）。HSV（Hue Saturation Value）：(1) Hue：同 HSL；(2) Saturation：同；(3) Value：明度 0-100%（0 = 黑、100 = 纯色，没有变白）。关键差异：(1) HSL 的 Lightness 50% 是纯色 —— 调高变白、调低变黑；(2) HSV 的 Value 100% 是纯色 —— 调低变黑、不能再"调高变白"；(3) HSL 更符合"先有色，再加白 / 黑"的认知；(4) HSV 更符合"颜色亮度"的认知。配色实务：(1) 想做"同色系明暗" → HSL（Lightness 30/50/70）；(2) 想做"亮度变化" → HSV；(3) CSS 写颜色 → HSL（CSS 标准支持）；(4) 数字绘画 / Photoshop → HSV（拾色器默认）。OKLCH（现代）：感知均匀色彩空间，是 HSL 的升级版——避免 HSL 的"绿色看起来比蓝色亮"问题。

配色辅助工具推荐？

几类工具速查。色相环 + 配色方案：(1) Adobe Color color.adobe.com —— 业界标准；(2) Coolors coolors.co —— 一键生成 5 色调色板；(3) Paletton paletton.com —— 互补 / 三角色 / 类似色一键生成；(4) Color Hunt colorhunt.co —— 收藏的好配色；(5) Khroma khroma.co —— AI 个性化推荐。截图取色：(1) Color Picker —— macOS 系统自带；(2) Sip —— Mac 取色 + 调色板管理；(3) ColorZilla —— 浏览器扩展；(4) Pixie —— Windows 取色。色彩可访问性：(1) WebAIM Contrast Checker —— 算 WCAG 对比度；(2) Stark（Figma / Sketch 插件）—— 设计中实时检查。色彩转换：(1) HSL ↔ RGB ↔ HEX —— 多数色环工具自带；(2) 命令行工具 chroma-js；(3) Figma / Sketch 内置。实务：(1) 设计开始前用 Adobe Color 选 5 色基调；(2) 取色时用 Color Picker 拾取屏幕色；(3) 提交前用 Contrast Checker 验对比度。

配色 + 暗色模式怎么处理？

不是简单"反转"——需要重新设计。直接反转的问题：(1) 纯白背景 → 纯黑 → 黑色边缘锐利刺眼；(2) 纯黑文字 → 纯白 → 在暗背景上太亮；(3) 品牌色在暗背景看起来过于鲜艳。正确暗色策略：(1) 背景不用纯黑 —— 用 #121212 - #1A1A1A（OLED 屏更省电用纯黑，但视觉用 dark gray）；(2) 文字不用纯白 —— 用 #E0E0E0 - #FFFFFF + 透明度（90% / 60% / 38%）；(3) 品牌色降饱和度 —— 暗背景上鲜艳色看起来过于刺激；(4) 海拔层级 —— 越靠近用户的层（卡片、模态框）越浅，营造空间感；(5) 强调色调亮 —— 暗背景上需要更亮的颜色才显眼。Material Design 3 暗色规范：(1) 表面色 #121212；(2) 海拔层级（24% / 12% / 8% 等）；(3) Primary 在暗模式下亮度 +20-30%。iOS 暗色规范：(1) 系统色（systemBackground / label）—— 自动适配；(2) 自定义色用 UIColor.dynamicProvider —— 暗 / 亮分别定义。实务：(1) 设计稿同时画亮 / 暗模式；(2) 用 CSS variables / Figma variables 切换；(3) 测试图标在暗背景下是否足够清晰。