auto_ai 知识库

Appearance

一句话总结：优质配色共性——性格先于色相（技术主色全挤 L 55-60「深雅」带、靠彩度分性格）、中性明度阶梯当骨架、彩色 ≤1-2 个、定制专属色才有记忆点、语义色角色分离。

🖱️ 交互版：配色案例交互色卡（浏览器打开，38 套点击色块即复制 hex）

案例库（OKLCH 实测坐标） ​

优质配色案例色卡-1.png

优质配色案例色卡-2.png

📌 总览图：wiki/attachments/优质配色案例色卡-1/-2.png（每张 6 套大字大色块版，由 scripts/make-color-cards.py 生成，色值可复核；Obsidian 阅读视图点击图片可放大）

配色主色L/C/H性格一句话手法
Linear#5e6ad256.7/15.9/275muted 克制四级表面阶梯 + 唯一彩色，每屏一个 CTA
Carbon#0f62fe55.7/24.3/262vivid 鲜明角色 token 抽象，不裸写 hex
Stripe#635bff57.8/23.5/278vivid渐变只做纹理层，低饱和邻近色
Spotify#1DB95468.9/18.7/149发光近黑底让 L69 绿发光
Airbnb#FF5A5F68.9/20.0/22暖亲和专属珊瑚「比消防红暖、比珊瑚饱和」
Slack#4A154B30.6/10.8/327deep 深底深紫底压四彩点缀
Memphis#F725A065.2/25.4/352挑衅全饱和撞色，颜色即内容
Bauhaus#D62B2B57.0/20.6/27理性三原色 + 黑线白底

审美向案例（好看系 10 套） ​

上表偏「设计系统/品牌」功能案例；这套补「好看」——莫兰迪高级灰、暖色治愈、2026 趋势、粉彩、多巴胺等情绪向选择。

好看配色案例色卡-1.png

好看配色案例色卡-2.png

📌 总览图：wiki/attachments/好看配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
莫兰迪·雾粉灰#D4B0B579.0/4.2/9Morandi 经典粉+鼠尾草绿+奶油，灰调统一耐看
莫兰迪·雾蓝#6E7F9C59.4/4.9/261Morandi 经典雾蓝+暖驼+炭灰，静物画沉静高级
拿铁咖啡#8D552450.4/9.8/59社区热门深咖到奶泡全暖同族，治愈
云上舞白·大气#F1EFE595.1/1.3/97Pantone 2026年度色+晴空蓝雾，空灵留白
变革蓝绿#1F5F6B45.1/6.6/212WGSN 2026Transformative Teal+金雀黄点睛
粉彩梦境#CDB4DB80.4/6.0/313Coolors 热门粉紫蓝粉彩五连，梦幻轻柔
糖果多巴胺#9B5DE561.1/20.0/302Coolors 热门高饱和五色撞，多巴胺快乐
黑金#FCA31178.6/16.7/70Coolors 热门藏蓝近黑+金点缀，奢华克制
海洋珍珠#006D7748.8/8.4/206Coolors 热门深青+奶油+暖珊瑚，清新治愈
秋日暖光#00304929.4/6.6/238Coolors 热门深蓝底+橙红金，温暖复古

「好看」从哪来（对规律 7 条的补充）：

  1. 灰调统一 = 高级感：莫兰迪把每种色都混入灰，色相冲突被抹平，C 4-6 区间最耐看
  2. 暖色治愈：拿铁咖啡/秋日暖光走 L 30-50 暖棕橙，情绪价值 > 功能表达
  3. 低饱和粉彩（C 4-8）给轻盈梦幻；高饱和撞色（C 16-20）给多巴胺——好看的两极
  4. 年度色是安全牌：Pantone/WGSN 官方搭配已含对比与和谐，直接抄作业
  5. 好看 ≠ 好读：粉彩/莫兰迪做正文对比度不足，只做氛围/卡片底，文字仍走中性色

流行趋势案例（2026 热点 10 套） ​

第三组：2025-2026 真实流行词——美拉德/安可拉红/国风撞色/静奢/新绿意/数字霓虹，色值来自流行色卡与趋势机构核验。

流行趋势配色案例色卡-1.png

流行趋势配色案例色卡-2.png

📌 总览图：wiki/attachments/流行趋势配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
美拉德·焦糖系#B0650057.9/13.3/62Maillard 顶流暖棕大地，焦糖是灵魂点缀
美拉德·深烘#3B2F2F31.8/1.8/18Maillard 深烘咖啡到巧克力，醇厚安全感
安可拉红·复古酒红#9C423249.6/12.4/322026 秋冬顶流棕调酒红，含蓄沉稳
国风·四时撞色#F3471864.3/21.5/35中国传统色榴花红/海青/紫云/鹦鹉绿互补撞
Quiet Luxury 静奢#C4A88274.7/6.1/752026 趋势香槟/暖石/陈年象牙，低调昂贵
New Botanicals 新绿意#8FAA8270.7/6.4/1362026 趋势鼠尾草/苔藓/干花瓣，植物治愈
Solar Warmth 阳光暖调#CC6B5063.4/13.0/362026 趋势陶土/金沙/杏橙，慷慨温暖
Digital Neon 数字霓虹#32BDFF75.6/14.7/2352026 趋势虚空黑底霓虹四色，屏幕发光
Future Dusk 暮光蓝紫#2B2A6E33.0/11.5/2792026 趋势靛蓝紫+月辉紫+铜点缀
Vintage Orchid 复古兰花#664C5244.6/3.6/3社区精选干花薰衣草+深梅紫+巧克力

流行词的底层规律：

  1. 2026 两极分化：要么更大胆（霓虹/撞色 C 15-21），要么更柔和（静奢/新绿意 C 1-6）——中间中庸色反而没人用
  2. 暖色光谱当道：安可拉红↔红木棕是同一暖轴上的一头一尾，美拉德是它的基底色
  3. 国风是增量池：中国传统色互补撞色（榴花红×海青）天然高饱和高对比，品牌记忆点强
  4. 趋势色怎么用：作 20-30% 点缀 + 永恒中性色打底，别整屏铺流行色
  5. 灰调回潮：静奢/新绿意证明"低彩度 + 材质层次"是 2026 高级感主线（呼应云上舞白年度色）

国风雅集案例（东方向 10 套） ​

第四组：日系和风（枯山水/茶之汤/浮世绘/冬之京都）、敦煌与故宫矿物色、宋瓷文人色、艺术大师名画取色——东方与经典的美学沉淀。

国风雅集配色案例色卡-1.png

国风雅集配色案例色卡-2.png

📌 总览图：wiki/attachments/国风雅集配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
枯山水#5B774453.4/8.2/132和风·禅砂纹/岩/苔，禅寺静寂极简
茶之汤#7B9B6F65.3/7.3/137和风·侘寂抹茶+小豆+金茶，茶道款待
浮世绘#165B8C45.5/10.3/245和风·江户蓝×朱×金，江户版画张力
冬之京都#9B1B3045.1/16.2/19和风·雪景雪景墨色+臙脂一点，静寂
敦煌·飞天之舞#E6510063.1/19.7/40敦煌壁画橙红飘带+石绿+鎏金，神性
敦煌·矿物青绿#0D47A142.2/15.7/260敦煌壁画蓝铜矿石青层次，清冷宁静
故宫·朱墙金瓦#B4282D50.6/17.6/25故宫宫廷朱红+明黄+琉璃宝蓝，皇家礼制
宋瓷·青绿雅韵#7BCFA679.0/10.2/162宋瓷文人月白/青白/石青，素雅温润
梵高·夜间咖啡馆#EAC65583.7/13.6/91艺术大师蓝黄 60/30/10 互补，1888
莫奈·睡莲#A8D5BA83.4/6.0/158艺术大师光色分割，水光治愈

东方与经典的启示：

  1. 低彩度是东方底牌：和风全组 C 7-16，植物染的"四十八茶百鼠"灰调即侘寂——高级感不靠饱和
  2. 矿物色有神性：敦煌石青/石绿/朱砂是青绿山水三原色，千年氧化后更沉稳；故宫朱红 C17.6 压过所有现代品牌红
  3. 名画是配色教科书：梵高咖啡馆直接演示 60/30/10（蓝 60/黄 30/中性 10）；莫奈睡莲 C 6-10 治愈系天花板
  4. 用法提示：东方低彩度适合文化/餐饮/护肤调性；矿物撞色适合国潮包装；名画色适合 hero 与情绪场景

复古港风案例（港片向 10 套） ​

王家卫电影色调 + 港片招牌年代：高光橙红与阴影青蓝的冷暖对抗，红黑蓝绿黄五色家族。

复古港风配色案例色卡-1.png

复古港风配色案例色卡-2.png

📌 总览图：wiki/attachments/复古港风配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，王家卫电影色调提取，色值可复核）

配色主色L/C/H来源手法
旺角卡门·霓虹红黑#B3001B48.3/19.6/25王家卫 1988黑红蓝对比强烈，暴力戒心
阿飞正传·怀旧绿#4A5D4E45.8/3.4/151王家卫 1990低饱和绿+奶黄，漂泊怀旧
东邪西毒·沙漠黄#C8963C70.4/12.1/79王家卫 1994沙漠黄随光流转，苍凉
花样年华·旗袍红#8C1C2842.1/14.6/21王家卫 2000暗红×墨绿×金，含蓄张力
重庆森林·雨夜霓虹#E6394661.2/20.8/22王家卫 1994蓝雨夜+红黄灯牌，孤独繁华
港风高光橙影#E07A3F68.3/14.6/48港风调色高光橙红+阴影青蓝，冷暖对抗
港式广告牌·复古拼色#1D4E8942.3/11.1/255港片招牌宝蓝朱红明黄桃红，招牌年代
港风胶片·桃红棕调#B5657660.2/10.4/7港风胶片桃红+暖棕+雾紫，胶片颗粒
粤剧戏服·金银红#D4AF3776.7/13.9/91港式戏曲金线×朱红×黑，大戏华彩
老香港霓虹街#FF4D6D67.9/21.3/15港片夜景粉红+电蓝+明黄，夜街招牌

港片的色彩语言：

  1. 冷暖对抗是港风底色：高光偏橙红、阴影偏青蓝，同框对抗产生胶片情绪
  2. 低饱和=怀旧：阿飞正传全片低饱和绿（C3.4），漂泊迷茫；对比度弱反而叙事强
  3. 红黑蓝是暴力三原：旺角卡门用血红+黑+宝蓝制造戒心与张力
  4. 用法提示：港风适合复古海报/音乐节/情绪人像；广告牌拼色适合国货品牌与小吃包装

赛博朋克案例（未来向 10 套） ​

霓虹粉青紫 + 虚空黑：全组高彩度霓虹（C 14.8-29.3），黑底发光是唯一法则。

赛博朋克配色案例色卡-1.png

赛博朋克配色案例色卡-2.png

📌 总览图：wiki/attachments/赛博朋克配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
Neon Alley 雨夜霓虹#FF007F64.5/26.0/3Cyberpunk 经典品红+电青+柠檬，雨夜霓虹街
Slate Circuit 电路板#00F0FF87.0/14.8/203UI 系统霓虹青主+品红毒绿点缀
经典粉青黑#FF006E64.1/25.7/8Cyberpunk 三原粉青双霓虹+虚空黑，赛博三原
Electric Indigo 电靛#6F00FF51.3/29.3/288Neon 电光电靛+霓虹紫青，迷幻
黑客终端 Matrix#00FF4186.9/27.8/144Hacker 美学终端绿+纯黑，黑客美学
Synthwave 落日#FF007F64.5/26.0/380s 合成波品红紫青三霓虹，合成波
东京霓虹#FF2D9B66.7/25.1/355涩谷夜品红电青紫金，涩谷夜
赛博橙电#FF4D0066.8/22.4/37警示张力热橙+品红+柠檬黄，警示
电光紫蓝#8338EC54.6/24.8/296Neon 紫蓝紫蓝+品红+霓虹绿
Vivid Sky 电光青#00CCFF78.6/14.8/224全霓虹天蓝+霓虹粉黄绿，全霓虹

霓虹的规则：

  1. 黑底是前提：霓虹色 L 60-87 必须压虚空黑（L1-7）才发光；白底上霓虹直接失效
  2. 三原色板：品红+青+紫是赛博朋克主干（H3/H203/H288 相距 60-85°），加柠檬黄/毒绿点缀
  3. C 值全组 14.8-29.3：赛博朋克是案例库中彩度最高的家族，越饱和越"赛博"
  4. 用法提示：适合游戏 UI/电竞/夜店/科技发布；点缀使用（20%）避免刺眼

极简黑白案例（无彩向 10 套） ​

黑白灰阶：C≈0 无彩组，靠明度差与材质层次表达，是唯一不靠色相的家族。

极简黑白配色案例色卡-1.png

极简黑白配色案例色卡-2.png

📌 总览图：wiki/attachments/极简黑白配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成；C0.0 时色相无意义，标注 H 仅数学余值）

配色主色L/C/H来源手法
Studio Flat 影棚极简#1A1A1A21.8/0.0极简通用纯白到纯黑五阶，冷静专业
Carbon Ink 炭墨#1C1C1C22.6/0.0现代极简近白到炭黑，干净利落
Deep Black 深黑#12121218.2/0.0日本极简深黑三层+中性灰阶
White Elegance 白雅#DADDD889.4/0.7/132Coolors 热门石墨+尘灰+羊皮纸，素雅
十阶灰阶#80808060.0/0.0通用灰阶黑白等距五阶，万能
Parchment 羊皮纸#8A857861.7/2.0/89暖调单色暖米白+羊皮灰，温度
MUJI 无印风#6E6A6152.5/1.5/87性冷淡日本灰阶+微暖，克制
光与影高对比#0000000.0/0.0黑白对撞纯黑纯白对撞，戏剧
石墨灰阶#4A4A4A40.9/0.0工业感冷石墨五阶，理性
银灰冷调#47556944.6/3.7/257科技极简冷蓝灰阶，科技感

无彩的深度：

  1. 灰阶=明度阶梯：黑白五阶 L 0-100 等距分布，对比靠明度差而非色相
  2. 微彩是温度：羊皮纸 C2.0、银灰 C3.7——C 值 0-4 的"暖调单色"比纯灰更耐看
  3. 三层深黑是 UI 标准：#121212/#1E1E1E/#757575 的深色模式分层，减少纯黑刺眼
  4. 用法提示：适合高端品牌/摄影/极简产品；配一个高彩点缀色（如霓虹橙）即成为"黑白+一色"经典组合

侘寂案例（自然向 10 套） ​

Wabi-sabi 大地色：全组 C 1.7-11.0 低彩度，骨白/黏土/苔绿/灰烬灰，残缺与时间之美。

侘寂配色案例色卡-1.png

侘寂配色案例色卡-2.png

📌 总览图：wiki/attachments/侘寂配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
雾与黏土#C8A28573.9/6.0/59Wabi-sabi 经典骨白+暖黏土+灰烬灰，黎明静默
土陶赤陶#A85C3A55.7/11.0/44Wabi-sabi 家居暖沙+壤灰+鼠尾草，陶器温润
和纸茶室#606C5F51.7/2.5/143日本极简和纸白+苔绿，残缺之美
霉苔与岩#A99E9370.6/2.0/67天然材料蘑菇灰+风化沙+暖石，全天然
茶渍陶#8A998566.5/3.4/138Silphium 方案灰烬+烟黑+黏土，茶渍留痕
石板与亚麻#6B7A5E55.9/4.6/131自然材质石板蓝灰+亚麻+苔，克制
风吹木#8C7B6D59.5/3.0/62老木料浅木+老木+墨，时间痕迹
雨打石#5C4D3E43.1/3.1/67风化石石灰+湿石+青苔，雨痕
青瓷窑变#B8C4BC80.9/1.7/157窑变釉青瓷灰+开片白+铁锈，窑变
荒砂#C9B49A78.1/4.3/73荒漠土沙白+风沙+干草，荒寂

侘寂的语言：

  1. C 值全线 1.7-11：侘寂是案例库最低彩度家族，比莫兰迪（C 6-9）更低更土——"不完美即美"
  2. 暖灰做基底：骨白/沙白（L 73-78）铺底，赤陶/苔绿（C 3-11）作 20% 点缀
  3. 避免纯白与纯黑：烟黑 #2C2B2A 而非 #000000——低饱和炭色更"自然"
  4. 用法提示：适合家居/茶饮/护肤/文创品牌；与粗糙纹理（陶器、亚麻）搭配才完整

蒸汽波案例（怀旧未来向 10 套） ​

Vaporwave 粉青紫：全组 C 10.0-27.4，粉/青/紫三主 + 薄荷米黄，梦核与 CRT 怀旧。

蒸汽波配色案例色卡-1.png

蒸汽波配色案例色卡-2.png

📌 总览图：wiki/attachments/蒸汽波配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
经典日落粉青紫#FF71CE74.7/20.0/343Vaporwave 五色粉青紫三主+薄荷米黄，梦核
CRT 深空#2D1B5A28.6/10.7/291像素场景近黑藏蓝到紫罗兰，CRT 屏幕
网络花园#B967FF67.4/22.1/306Lavender Haze薰衣草+薄荷+水青，甜梦
90s 电视#E5008660.1/24.6/356Hot Pink热粉+电青+淡黄，VHS 时代
商场梦 Mallsoft#FF6B9D72.3/18.5/2Mallsoft淡粉+奶油+柔蓝，死商场
霓虹葡萄#8A00E651.8/27.4/302Neon Grape青绿+葡萄紫+玫瑰粉，渐变
复古未来电光#FFA86A80.5/12.9/55Sunset 橙日落橙+粉+青，霓虹黄昏
像素春梦#05FFA188.1/20.6/158Mint Dream薄荷+粉+薰衣草，游戏机
晚霞紫#8B5CC857.5/16.4/302CRT 紫罗兰深紫+紫罗兰+玫瑰，暮色
VHS 雪花#FFB3D984.9/10.0/348Soft Rose柔玫瑰+粉+青，雪花噪点

梦核的配方：

  1. 三主一辅：粉（H343）+ 青（H203）+ 紫（H302）+ 薄荷（H158）——色相距 60-100° 的"软撞色"
  2. 粉青紫 vs 赛博朋克：赛博用高饱和品红青（C 25+、L 60 上下），蒸汽波用粉彩（L 67-88、C 10-27）——怀旧不刺眼
  3. CRT 深空是底：近黑藏蓝 #0A0A1E/#2D1B5A 压场，粉青才"发光"
  4. 用法提示：适合音乐/时尚/数字艺术/直播视觉；渐变使用最正宗（粉→紫→藏蓝）

孟菲斯复古案例（80s 复古向 10 套） ​

Memphis 撞色：全组 C 13.0-26.1 高饱和碰撞，金丝雀黄/消防红/电蓝三原 + 黑白底。

孟菲斯复古配色案例色卡-1.png

孟菲斯复古配色案例色卡-2.png

📌 总览图：wiki/attachments/孟菲斯复古配色案例色卡-1/-2.png（由 scripts/make-color-cards.py 生成，色值可复核）

配色主色L/C/H来源手法
原版爆发#FFD70088.7/18.2/95Memphis 1981金丝雀黄+消防红+电蓝，挑衅
后现代拼贴#FF5B9C70.5/20.6/359Digital Heroes热粉+电蓝+亮绿，折线拼贴
糖果电流#FF149365.5/26.1/357DESIGN.md热粉+电蓝+薄荷，糖果撞击
黑与彩#FF333364.9/23.7/27原版三原黑白底+红蓝黄，图形碰撞
波普三角#1ABC9C71.2/13.1/174几何图案青绿+紫+黄，三角圆形
80s 糖果#FF008064.5/26.0/2复古内饰热洋红+电青+尘玫瑰，糖果
复古马赛克#FF7F5073.5/16.8/40珊瑚撞色珊瑚+薄荷+电蓝，马赛克
米兰时尚#C2410C55.3/17.4/38当代孟菲斯赤陶+奶油+青绿，现代克制
拼贴狂想#9B59B657.7/15.2/315紫撞色紫+黄+红，狂想拼贴
极简孟菲斯#6EE7B784.5/13.0/165白底减负白底+薄荷珊瑚，当代轻量

后现代撞色法则：

  1. 三原撞色是骨架：金丝雀黄（H95）+ 消防红（H27）+ 电蓝（H262）——原版 Memphis 就是这三色
  2. 黑白底收束：撞色越乱越需要 #0F0F0F 粗描边/黑白条纹压住，否则视觉溃散
  3. 当代化减负：米兰时尚/极简孟菲斯证明——赤陶+奶油或白底只留 2-3 个撞色，即可"轻量 Memphis"
  4. 用法提示：适合年轻品牌/包装/活动视觉/UI 强调；撞色只铺 30%，其余黑白灰

规律 7 条（为什么好） ​

  1. 性格先于色相：技术/品牌主色聚集 L 55-60「深雅」带，靠彩度分性格——C<18 muted（Linear）、C>22 vivid（Carbon）
  2. 中性体系是骨架：表面明度阶梯（Linear 4 级 / Carbon layer token）承担全部层级，彩色只做点缀
  3. 彩色越少越好：1 主色 + 0-2 辅助是常态；Slack 四彩必须靠深底压
  4. 定制专属色 > 现成色：Airbnb Rausch、Linear 低饱和薰衣草蓝都是品牌资产
  5. 暗色模式 = 表面阶梯 + 单强调，不是简单反色
  6. 对比度是硬约束：OKLCH 的 L 差给对比度直觉，最终仍须实测
  7. 语义角色分离：成功/错误/警告独立于品牌色

决策清单（怎么用） ​

  1. 先定性格档（deep/muted/vivid/pale），再选色相——不先想"用什么颜色"
  2. 中性分层 ≥3 档（背景/卡片/浮层）+ 边框档，层级全交给明度差
  3. 主色 L 55-60 正文可读；品牌 C<20 显高级；行动点用 C 高色
  4. 强调色只占 10%，与主色拉开色相（蓝主 + 琥珀强调）
  5. 换肤用角色 token 而非裸 hex
  6. 收尾必过 WCAG AA（正文 4.5:1），OKLCH L 差 ≥40 基本稳过

相关概念 ​