配色理论与生成算法

06/2392 浏览开发日记
从 2870 色专业色库中逆向分析出的配色规律。
可用此算法计算生成同风格的新颜色。
horizontal linehorizontal line
一、核心发现:三层叠加配色法这套色板不是单一色彩理论,而是三层规则同时生效:┌─────────────────────────────────────────┐
│  第3层:高调明度分布(日系清新感)       │
│  ┌─────────────────────────────────┐    │
│  │  第2层:全局低饱和化(粉雾感)   │    │
│  │  ┌─────────────────────────┐    │    │
│  │  │  第1层:分裂互补色相骨架 │    │    │
│  │  └─────────────────────────┘    │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘
三层缺一不可——只用色相关系会太鲜艳,只用低饱和会太灰,只用高明度会太白。
二、第1层:色相骨架 — 分裂互补 + 四角色环结构图            0° (红)
             |
    340°(D)  ●       ● 25°(A)
      品红   |     /     橙
             |   /
    270° ----+--------  90°
             |   \
             |     \
    245°(C)  ●
      靛蓝   |
    210°(B)  ●   天蓝
             |
           180°
四个色相锚点锚点色相角色对应内容A25°暖色主力肤色、橙暖建筑、沙地B210°冷色主力天空、水面、蓝调阴影C245°冷色辅助靛蓝暗部、夜空、深蓝D340°暖色辅助品红/玫红、花、角色重点色锚点间关系组合角度理论名称效果A↔B185°互补冷暖对比主轴,最大张力A↔C140°近互补补充深度,不重复BB↔D130°分裂互补蓝与品红形成活力感C↔D95°正方形四角稳定,全色环覆盖使用规则
  • 每个画面至少2个锚点推荐3个
  • A+B 是最安全的组合(互补)
  • 加入C或D增加丰富度
  • 4个全用时注意面积分配(见第3层)
三、第2层:饱和度控制 — 粉雾化核心参数指标数值含义饱和度均值32.6%整体偏灰饱和度中位数28%大部分色 < 30%最大饱和度≤55%极少超过此值纯色(S>75%)仅占 2.2%只用于极小面积点缀饱和度公式给定目标明度 V,推荐饱和度范围:S_max = 0.12 + (1.0 - V) × 0.55
示例:
  V = 0.95 (极亮) → S_max = 0.15  (几乎是白色带一点点颜色)
  V = 0.85 (亮)   → S_max = 0.20  (粉色/淡色)
  V = 0.70 (中亮) → S_max = 0.29  (中等饱和,主力色)
  V = 0.50 (中)   → S_max = 0.40  (较饱和的暗色)
  V = 0.30 (暗)   → S_max = 0.51  (饱和暗色,用于线条/暗部)
关键原则:明度越低,允许的饱和度越高。明度高的颜色必须保持低饱和。
四、第3层:明度分布 — High-Key(高调)核心参数指标数值含义明度中位数72.2%大部分颜色偏亮明度均值68.3%整体高明度偏度-0.54左偏=亮色多暗色少面积分配法则极亮 V≥85%  →  30% 面积(背景/白底/高光)
亮   V70-85% →  25% 面积(主体填色)
中   V50-70% →  20% 面积(中间调/过渡)
暗   V30-50% →  15% 面积(阴影/边缘)
极暗 V<30%   →  10% 面积(线条/最深暗部)
色温偏向区域比例说明暖色47.4%红橙黄+品红冷色40.9%青蓝靛紫过渡色11.7%绿~青绿冷暖比1:1.16近似平衡,微偏暖
五、生成算法(可直接计算新颜色)Python 实现python
复制import colorsys
# 四个色相锚点
ANCHORS = {
    'A_warm':   25,   # 橙暖
    'B_cool':  210,   # 天蓝
    'C_deep':  245,   # 靛蓝
    'D_accent': 340,  # 品红
}
# 允许在锚点周围 ±15° 浮动
HUE_FLOAT = 15
def generate_harmony_color(anchor_key, brightness_level='mid', variation=0):
    """
    生成一个和谐色。
    Args:
        anchor_key: 'A_warm' / 'B_cool' / 'C_deep' / 'D_accent'
        brightness_level: 'highlight' / 'light' / 'mid' / 'shadow' / 'dark'
        variation: -15 ~ +15 的色相偏移(在锚点基础上微调)
    Returns:
        (R, G, B) tuple, 0-255
    """
    # 色相
    base_hue = ANCHORS[anchor_key]
    hue = (base_hue + variation) % 360
    # 明度预设
    v_map = {
        'highlight': 0.95,
        'light':     0.85,
        'mid':       0.72,
        'shadow':    0.55,
        'dark':      0.35,
    }
    v = v_map[brightness_level]
    # 饱和度 = f(明度),明度越低饱和度越高
    s = 0.12 + (1.0 - v) * 0.55
    # 转换
    r, g, b = colorsys.hsv_to_rgb(hue / 360, s, v)
    return (int(r * 255), int(g * 255), int(b * 255))
def generate_full_palette():
    """生成完整调色板示例"""
    palette = {}
    for anchor in ANCHORS:
        palette[anchor] = {}
        for level in ['highlight', 'light', 'mid', 'shadow', 'dark']:
            r, g, b = generate_harmony_color(anchor, level)
            palette[anchor][level] = f'#{r:02X}{g:02X}{b:02X}'
    return palette
# === 使用示例 ===
if __name__ == '__main__':
    palette = generate_full_palette()
    for anchor, colors in palette.items():
        print(f'{anchor}:')
        for level, hex_color in colors.items():
            print(f'  {level:10s} → {hex_color}')
生成示例锚点highlightlightmidshadowdarkA_橙#F2DDCF#D8C0AE#BFA390#A58974#594231B_蓝#CFE0F2#AEC3D8#90A7BF#748DA5#314559C_靛#D2CFF2#B2AED8#9490BF#7874A5#343159D_品红#F2CFDA#D8AEBC#BF90A0#A57485#59313E这些颜色与原色板完全和谐,因为它们遵循相同的三层规则。
六、扩展用法6.1 生成中间色相(锚点之间)在两个锚点之间插值,可以得到过渡色:python
复制def interpolate_hue(anchor1, anchor2, t=0.5):
    """在两个锚点间插值色相"""
    h1, h2 = ANCHORS[anchor1], ANCHORS[anchor2]
    # 处理色环跨越
    if abs(h2 - h1) > 180:
        if h2 > h1: h1 += 360
        else: h2 += 360
    hue = (h1 + (h2 - h1) * t) % 360
    return hue
# A→B 中间 = 约 117° (黄绿~绿) — 这就是为什么色板中绿色少且偏灰
# B→C 中间 = 约 227° (蓝) — 已经被B和C覆盖
# D→A 中间 = 约 3° (红) — 解释了红色存在
6.2 特效色生成(突破规则的受控方式)当需要魔法/特效/UI高亮时,仅提高饱和度,保持色相在锚点上:python
复制def generate_effect_color(anchor_key, intensity=0.7):
    """生成特效色:高饱和但限制在锚点色相"""
    hue = ANCHORS[anchor_key]
    s = 0.5 + intensity * 0.4   # 0.5 ~ 0.9
    v = 0.6 + intensity * 0.3   # 0.6 ~ 0.9
    r, g, b = colorsys.hsv_to_rgb(hue / 360, s, v)
    return f'#{int(r*255):02X}{int(g*255):02X}{int(b*255):02X}'
# 特效色示例:
# generate_effect_color('C_deep', 0.8) → 高饱和靛蓝(魔法光)
# generate_effect_color('D_accent', 0.9) → 高饱和品红(暴击特效)
6.3 判断一个颜色是否"属于这套风格"python
复制def is_harmonious(hex_color):
    """判断一个颜色是否符合本套配色规则"""
    r = int(hex_color[1:3], 16) / 255
    g = int(hex_color[3:5], 16) / 255
    b = int(hex_color[5:7], 16) / 255
    h, s, v = colorsys.rgb_to_hsv(r, g, b)
    hue = h * 360
    # 规则1: 饱和度不超过明度允许的最大值 (±10%容差)
    s_max = 0.12 + (1.0 - v) * 0.55 + 0.10
    if s > s_max:
        return False, f'饱和度过高: {s:.2f} > 允许的 {s_max:.2f}'
    # 规则2: 色相应接近某个锚点 (±30° 容差)
    if s >= 0.08:  # 有彩色才检查色相
        min_dist = min(
            min(abs(hue - a), 360 - abs(hue - a))
            for a in ANCHORS.values()
        )
        if min_dist > 30:
            return False, f'色相 {hue:.0f}° 远离所有锚点 (最近距离 {min_dist:.0f}°)'
    return True, '符合风格'
七、回答核心问题这套理论能不能计算出同样好看的颜色?能。 只要遵循三层规则:
  1. 色相 → 选择4个锚点之一(或其±15°范围内)
  2. 饱和度 → 用公式 S = 0.12 + (1-V) × 0.55 限制上限
  3. 明度 → 按需选择5档之一
创建日期: 2026-06-23
基于: 10c-专业色库-2870色 的逆向分析[表情_捂脸哭][表情_捂脸哭][表情_捂脸哭]
9
2
3