当前位置：首页 > news >正文

AI 配色工具实战：把色彩心理学变成代码

news 2026/6/14 21:55:26

AI 配色工具实战：把色彩心理学变成代码

配色难在哪？

做产品设计时，配色是最容易扯皮的地方。"这个蓝色不够高级"、"绿色太刺眼"——这类反馈没法量化，最后往往变成设计总监的个人喜好决定。

其实配色不只是审美问题，它直接关系到品牌给人的感觉。科技产品多用冷色调显得专业，食品行业偏爱暖色刺激食欲，环保品牌离不开绿色。AI 配色工具能帮上忙，主要做两件事：一是根据色彩心理学，把颜色和情感对应起来；二是确保生成的配色符合品牌定位。

不过有个坑要注意：颜色在不同文化里意思不一样。产品化时如果不考虑目标市场的文化背景，很容易翻车。

系统怎么搭？

flowchart TB subgraph 输入层 KEYWORDS[品牌关键词] --> PARSE[语义解析] INDUSTRY[行业类型] --> PARSE CULTURE[目标文化] --> PARSE REF[参考品牌] --> FEAT[特征提取] end subgraph 色彩心理学层 PARSE --> EMOTION[情感映射引擎] EMOTION --> EMAP{情感-色彩映射表} EMAP --> |信任/专业| BLUE[蓝色系: #2563EB] EMAP --> |活力/热情| RED[红色系: #DC2626] EMAP --> |自然/健康| GREEN[绿色系: #16A34A] EMAP --> |创新/未来| PURPLE[紫色系: #7C3AED] end subgraph 方案生成层 BLUE --> GEN[配色方案生成器] RED --> GEN GREEN --> GEN PURPLE --> GEN FEAT --> GEN GEN --> SCHEME1[方案A: 主色+辅色+强调色] GEN --> SCHEME2[方案B: 主色+辅色+强调色] GEN --> SCHEME3[方案C: 主色+辅色+强调色] end subgraph 评估层 SCHEME1 --> CONTRAST[对比度检测: WCAG 2.1] SCHEME2 --> CONTRAST SCHEME3 --> CONTRAST CONTRAST --> HARMONY[色彩和谐度评分] HARMONY --> RANK[方案排序与推荐] end style EMAP fill:#e3f2fd style GEN fill:#fff3e0 style CONTRAST fill:#e8f5e9

核心是情感映射引擎。把"专业、可靠、创新"这类关键词映射到色彩心理学的情感维度，再从情感维度转到具体的色相范围。每个关键词通常对应 2-3 个候选色相，系统从中选出对比度和和谐度最好的组合。

代码实现

# color_scheme_engine.py — AI 配色方案引擎 import colorsys import json from dataclasses import dataclass, field from typing import Optional import numpy as np @dataclass class Color: """颜色模型：支持 HEX、HSL、RGB 互转""" hex_value: str name: str = "" role: str = "" # primary / secondary / accent / background @property def rgb(self) -> tuple[int, int, int]: h = self.hex_value.lstrip('#') return tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) @property def hsl(self) -> tuple[float, float, float]: r, g, b = [x / 255 for x in self.rgb] h, l, s = colorsys.rgb_to_hls(r, g, b) return (h * 360, s * 100, l * 100) @property def luminance(self) -> float: """相对亮度（WCAG 标准）""" r, g, b = [x / 255 for x in self.rgb] r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4 g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4 b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4 return 0.2126 * r + 0.7152 * g + 0.0722 * b @dataclass class ColorScheme: """配色方案""" primary: Color secondary: Color accent: Color background: Color text: Color name: str = "" description: str = "" harmony_score: float = 0.0 contrast_ratios: dict = field(default_factory=dict) # 情感-色彩映射表（基于色彩心理学研究） EMOTION_COLOR_MAP = { "信任": {"hue_range": (200, 230), "saturation": (60, 80), "lightness": (40, 55), "examples": ["#2563EB", "#1D4ED8"]}, "专业": {"hue_range": (210, 240), "saturation": (50, 70), "lightness": (30, 50), "examples": ["#1E3A5F", "#1E40AF"]}, "创新": {"hue_range": (260, 290), "saturation": (60, 80), "lightness": (45, 60), "examples": ["#7C3AED", "#6D28D9"]}, "活力": {"hue_range": (0, 20), "saturation": (70, 90), "lightness": (50, 60), "examples": ["#DC2626", "#EA580C"]}, "温暖": {"hue_range": (20, 45), "saturation": (70, 85), "lightness": (55, 65), "examples": ["#F59E0B", "#D97706"]}, "自然": {"hue_range": (100, 150), "saturation": (40, 70), "lightness": (35, 55), "examples": ["#16A34A", "#059669"]}, "优雅": {"hue_range": (320, 350), "saturation": (40, 60), "lightness": (40, 55), "examples": ["#9D174D", "#BE185D"]}, "平静": {"hue_range": (180, 210), "saturation": (30, 50), "lightness": (60, 75), "examples": ["#06B6D4", "#0891B2"]}, "奢华": {"hue_range": (40, 55), "saturation": (70, 90), "lightness": (45, 55), "examples": ["#B8860B", "#DAA520"]}, "安全": {"hue_range": (100, 140), "saturation": (50, 70), "lightness": (40, 55), "examples": ["#15803D", "#166534"]}, } # 关键词到情感的映射 KEYWORD_EMOTION_MAP = { # 科技 "科技": ["信任", "创新"], "SaaS": ["信任", "专业"], "AI": ["创新", "专业"], "云计算": ["信任", "平静"], # 金融 "金融": ["信任", "专业"], "银行": ["信任", "安全"], "投资": ["专业", "奢华"], # 消费 "电商": ["活力", "温暖"], "食品": ["温暖", "活力"], "美妆": ["优雅", "奢华"], # 健康 "医疗": ["信任", "平静"], "健康": ["自然", "平静"], "环保": ["自然", "安全"], } class EmotionColorMapper: """情感-色彩映射引擎""" def map_keywords(self, keywords: list[str], culture: str = "cn") -> list[dict]: """将品牌关键词映射到候选色相""" emotions = set() for kw in keywords: if kw in KEYWORD_EMOTION_MAP: emotions.update(KEYWORD_EMOTION_MAP[kw]) if not emotions: emotions = {"信任", "专业"} # 默认 candidates = [] for emotion in emotions: if emotion in EMOTION_COLOR_MAP: mapping = EMOTION_COLOR_MAP[emotion] candidates.append({ "emotion": emotion, "hue_range": mapping["hue_range"], "saturation_range": mapping["saturation"], "lightness_range": mapping["lightness"], "examples": mapping["examples"], }) return candidates class SchemeGenerator: """配色方案生成器""" def generate(self, candidates: list[dict], num_schemes: int = 3) -> list[ColorScheme]: """基于情感候选生成多个配色方案""" schemes = [] for i in range(num_schemes): # 选择主色：从第一个情感候选中采样 primary = self._sample_color( candidates[0] if candidates else {"hue_range": (200, 230), "saturation_range": (60, 80), "lightness_range": (40, 55)}, seed=i * 42 ) # 选择辅色：从第二个情感候选或互补色中采样 if len(candidates) > 1: secondary = self._sample_color(candidates[1], seed=i*42+7) else: secondary = self._complementary_color(primary) # 强调色：对比色或三等分色 accent = self._triadic_color(primary, offset=2) # 背景色：低饱和度、高亮度 background = self._neutral_color(lightness=97) # 文字色：低亮度 text = self._neutral_color(lightness=15) scheme = ColorScheme( primary=primary, secondary=secondary, accent=accent, background=background, text=text, name=f"方案 {chr(65+i)}", ) # 评估方案 scheme.contrast_ratios = self._check_contrast(scheme) scheme.harmony_score = self._score_harmony(scheme) schemes.append(scheme) # 按和谐度排序 schemes.sort(key=lambda s: s.harmony_score, reverse=True) return schemes def _sample_color(self, candidate: dict, seed: int = 0) -> Color: """从候选范围中采样一个颜色""" rng = np.random.RandomState(seed) hue_range = candidate.get("hue_range", (0, 360)) sat_range = candidate.get("saturation_range", (50, 80)) light_range = candidate.get("lightness_range", (40, 60)) h = rng.uniform(hue_range[0], hue_range[1]) s = rng.uniform(sat_range[0], sat_range[1]) l = rng.uniform(light_range[0], light_range[1]) # HSL → RGB → HEX r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100) hex_val = "#{:02x}{:02x}{:02x}".format( int(r * 255), int(g * 255), int(b * 255) ) return Color(hex_value=hex_val, name=candidate.get("emotion", "")) def _complementary_color(self, color: Color) -> Color: """生成互补色""" h, s, l = color.hsl comp_h = (h + 180) % 360 comp_s = max(30, s - 15) comp_l = max(30, min(70, l + 10)) r, g, b = colorsys.hls_to_rgb( comp_h / 360, comp_l / 100, comp_s / 100 ) hex_val = "#{:02x}{:02x}{:02x}".format( int(r * 255), int(g * 255), int(b * 255) ) return Color(hex_value=hex_val, role="secondary") def _triadic_color(self, color: Color, offset: int = 1) -> Color: """生成三等分色""" h, s, l = color.hsl tri_h = (h + offset * 120) % 360 tri_s = max(40, s - 10) tri_l = max(35, min(65, l + 5)) r, g, b = colorsys.hls_to_rgb( tri_h / 360, tri_l / 100, tri_s / 100 ) hex_val = "#{:02x}{:02x}{:02x}".format( int(r * 255), int(g * 255), int(b * 255) ) return Color(hex_value=hex_val, role="accent") def _neutral_color(self, lightness: float) -> Color: """生成中性色""" r, g, b = colorsys.hls_to_rgb(0, lightness / 100, 0) hex_val = "#{:02x}{:02x}{:02x}".format( int(r * 255), int(g * 255), int(b * 255) ) return Color(hex_value=hex_val) def _check_contrast(self, scheme: ColorScheme) -> dict: """检查 WCAG 对比度""" def contrast_ratio(c1: Color, c2: Color) -> float: l1, l2 = c1.luminance, c2.luminance lighter = max(l1, l2) darker = min(l1, l2) return (lighter + 0.05) / (darker + 0.05) return { "primary_on_bg": round(contrast_ratio( scheme.primary, scheme.background), 2), "text_on_bg": round(contrast_ratio( scheme.text, scheme.background), 2), "accent_on_bg": round(contrast_ratio( scheme.accent, scheme.background), 2), } def _score_harmony(self, scheme: ColorScheme) -> float: """评估色彩和谐度（0-100）""" score = 100.0 # 对比度检查：文字与背景至少 4.5:1（WCAG AA） text_contrast = scheme.contrast_ratios.get("text_on_bg", 0) if text_contrast < 4.5: score -= 30 elif text_contrast < 7: score -= 10 # 主色与辅色的色相差异 h1, _, _ = scheme.primary.hsl h2, _, _ = scheme.secondary.hsl hue_diff = min(abs(h1 - h2), 360 - abs(h1 - h2)) # 互补色（180°）或三等分色（120°）和谐度较高 if 100 <= hue_diff <= 140 or 160 <= hue_diff <= 200: score -= 0 # 和谐 elif hue_diff < 30: score -= 20 # 过于接近 elif 60 <= hue_diff <= 90: score -= 10 # 类似色，略单调 return max(0, score)