HyperFrames Pastel / Soft 调色板实战指南为时尚、美妆与生活方式视频构建柔和色彩体系【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文聚焦 HyperFrames 创意技能库中的 pastel-soft.md 调色板文档系统拆解其在时尚Fashion、美妆Beauty、生活方式Lifestyle与健康Wellness类视频中的完整应用方法。读完本文你将掌握该调色板全部 8 组色值的结构规律、从调色板到design.md设计规范的落地流程以及通过 WCAG AA 对比度校验的实战技巧。一、Pastel / Soft 调色板是什么在 HyperFrames 创意技能hyperframes-creative中palettes/目录维护着一套开箱即用的视觉色板集合。每个色板文件都是一个独立的最小化设计资源一行用途说明加上一组可直接复制使用的十六进制色值。pastel-soft.md就是其中之一它面向的创作场景非常明确Fashion, beauty, lifestyle, wellness content.即时尚、美妆、生活方式、健康类内容。这类内容的共同特点是画面需要传递轻盈、柔和、亲近的视觉情绪避免高饱和、高对比的冲击感。Pastel / Soft 色板正是为此准备的快默认值。从 house-style.md 的调色板路由表可以看到该色板在整个技能体系中的定位类别适用场景对应色板文件Pastel / Soft时尚、美妆、生活方式、健康skills/hyperframes-creative/palettes/pastel-soft.md当项目没有提供frame.md/design.md设计规范时house-style 工作流的第一步就是选一个色板、声明背景色 / 前景色 / 强调色而 Pastel / Soft 正是这类内容的首选入口。二、完整色值清单原文全量继承pastel-soft.md共提供8 组五色搭配每组都以#十六进制格式书写可直接复制进任意 CSS 或设计令牌。以下为完整清单#CDB4DB #FFC8DD #FFAFCC #BDE0FE #A2D2FF #CCD5AE #E9EDC9 #FEFAE0 #FAEDCD #D4A373 #FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF #FFA69E #FAF3DD #B8F2E6 #AED9E0 #5E6472 #EDAFB8 #F7E1D7 #DEDBD2 #B0C4B1 #4A5759 #555B6E #89B0AE #BEE3DB #FAF9F9 #FFD6BA #006D77 #83C5BE #EDF6F9 #FFDDD2 #E29578 #0081A7 #00AFB9 #FDFCDC #FED9B7 #F07167在 HyperFrames 的创作工作流中建议为每一组色板显式声明三个角色背景色bg、前景色fg、强调色accent。以第一组为例#CDB4DB淡紫罗兰——可作柔和背景或强调#FFC8DD、#FFAFCC粉调——时尚/美妆内容的主色系#BDE0FE、#A2D2FF天蓝调——为画面提供冷色平衡三、逐组色板结构拆解8 组色板并非随机拼色每组内部都存在可复用的角色分工。按明度结构可以归纳为三类3.1 全亮色系低对比、装饰性强前三组第 1、2、3 行全部为高明度浅色组主色相特征#CDB4DB #FFC8DD #FFAFCC #BDE0FE #A2D2FF紫 粉 蓝经典糖果组合适合美妆教程、护肤产品展示#CCD5AE #E9EDC9 #FEFAE0 #FAEDCD #D4A373奶油绿 米白 暖棕低饱和大地感适合生活方式、居家内容#FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF紫粉渐变系色调高度统一适合浪漫、温柔主题这类色板的问题在于所有颜色明度相近文字对比度天然偏弱。如果直接使用浅色前景文字很容易触发 WCAG AA 校验失败详见第五节需要引入深色文字或深色强调块。3.2 亮色 深色锚点叙事完整中间两组引入了明显更深的第五色作为文字或强调锚点组亮色部分深色锚点#FFA69E #FAF3DD #B8F2E6 #AED9E0珊瑚粉、奶油、薄荷、雾蓝#5E6472灰蓝#EDAFB8 #F7E1D7 #DEDBD2 #B0C4B1玫瑰粉、米白、灰米、鼠尾草绿#4A5759深灰绿这两组是8 组中最适合直接上文字的组合亮色负责情绪氛围深色负责可读性符合 house-style 中一个背景、一个前景、一个强调色的最小结构要求。3.3 深色 亮色强调轻奢质感最后两组反其道而行以低明度色为基底组基底亮色强调#555B6E #89B0AE #BEE3DB #FAF9F9深蓝灰、青绿#FFD6BA蜜桃#006D77 #83C5BE #EDF6F9深青、水蓝、近白#FFDDD2浅桃、#E29578陶土#0081A7 #00AFB9 #FDFCDC深青蓝、青绿、米白#FED9B7杏色、#F07167珊瑚红这三组适合深色背景 柔和强调色的构图例如晚间护肤、高端生活方式品牌视频。注意#F07167、#E29578这类陶土/珊瑚色在深青底上对比度较好适合作为按钮、数据高亮等强调元素。四、在 HyperFrames 项目中落地使用4.1 从调色板到 design.md推荐路径hyperframes-creative的规范是 design-spec.md设计规范 YAML frontmatter规范性层 Markdown 正文语境层。调色板选好后将色值写入design.md的 frontmattername: Soft Glow Beauty colors: primary: #FEFAE0 # 背景取自第 2 组 on-primary: #4A5759 # 前景文字取自第 5 组深色锚点 accent: #FFAFCC # 强调色取自第 1 组粉色系 surface: #FAEDCD muted: #CCD5AE typography: headline: fontFamily: Playfair Display fontSize: 3rem fontWeight: 400 body: fontFamily: Inter fontSize: 1rem fontWeight: 300 rounded: sm: 8px md: 16px spacing: sm: 12px md: 24px lg: 48px motion: energy: calm规范解析遵循frame.md → design.md → DESIGN.md的优先级见 design-spec.mdfrontmatter 中的色值属于规范性内容必须逐字引用不得改写或取整。4.2 通过 Design Picker 交互选择如果你的创作流程走 design-picker.md 交互选择器生成调色板选项时需要满足每个选项5~6 个色板以品牌世界命名而非泛化情绪如Glow Balm而不是Soft必须混合深色、浅色与着色tinted背景——即使面对平静/健康类提示词也要混入深色选项每个色板在色样尺寸下必须视觉可区分——如果两个色板背景明度相同且强调色色相相近就要砍掉一个。结合本文色板一个合规的选项集可以是第 3 组紫粉系浅色、第 1 组糖果系浅色、第 6 组深蓝灰底深色、第 8 组深青底深色、第 5 组玫瑰灰绿系着色。4.3 与 Soft Signal 视觉风格的衔接visual-styles.md 中与 Pastel / Soft 情绪最接近的命名风格是Soft Signal暖色、亲密、健康与生活方式导向其 YAML 令牌块可直接作为设计起点name: Soft Signal colors: primary: #FFF8EC on-primary: #2a2a2a accent-amber: #F5A623 accent-rose: #C4A3A3 accent-sage: #8FAF8C使用方式是将风格 YAML 复制进项目design.mdfrontmatter再补充## Overview、## Colors、## Typography、## Elevation、## Components、## Dos and Donts正文段落。也可以在此基础上把强调色替换为 pastel-soft 中更贴合品牌的具体色值。4.4 字体搭配建议柔和色板 错误字体同样会破坏质感。typography.md 给出几条与 Pastel / Soft 直接相关的规则不要两个 sans-serif 配对要跨分类serif sans、sans mono每场景一个表现性字体另一个退后字重对比要极端视频场景建议 300 体文字配 900 体标题视频字号而非网页字号正文 ≥20px、标题 ≥60px信息流X / LinkedIn / Instagram观看场景正文 ≥32px、标题 ≥90px渲染器预打包了 18 个字体族如 Montserrat、Playfair Display、EB Garamond 等其中Montserrat、Oswald、League Gothic 等属于嵌入且未被禁用的安全个性选择而 Inter、Playfair Display、EB Garamond 等虽可渲染但被列入千篇一律禁用名单需谨慎使用。五、对比度校验浅色色板最容易踩的坑Pastel / Soft 色板整体明度高文字对比度是其最大软肋。house-style 明确要求对比度由hyperframes check强制校验WCAG AA并且去掉装饰元素后文字必须仍可读。如果希望进行更细粒度的逐帧审计hyperframes-creative提供了 contrast-report.mjs 脚本node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ --samples 10 --out .hyperframes/contrast --width 1920 --height 1080 --fps 30该脚本的工作原理与本文主题直接相关它在多个采样时间点把每个文字元素的color/fill临时置为透明截取隐藏文字后的真实合成背景再从元素自身 bbox 内采样中位数颜色按 WCAG 2.1 公式计算实际对比度。输出包括contrast-report.json—— 每个文字元素 × 每个采样点的机器可读报告contrast-overlay.png—— 叠加标注图品红 未达 AA黄色 仅达 AA绿色 达 AAA只要有任何文字元素未达 AA脚本即以退出码 1 结束。对照脚本中的判定逻辑contrast-report.mjsfontSize 24或fontSize 19且fontWeight 700视为大文字AA 阈值放宽为 3.0普通文字要求 4.5。这解释了为什么 Pastel / Soft 浅色底上必须搭配深色锚点色如#4A5759、#5E6472作前景或者把文字做大做粗。六、创作后自检清单design-adherence.md 要求构建完成后、预览前按规范逐项核对。针对 Pastel / Soft 场景重点关注颜色——HTML 中每个十六进制色值必须来自所选色板或 design.md 调色段不允许临场发明颜色排版——字体族与字重必须与规范一致不得悄悄替换圆角——border-radius 与声明的一致间距——padding/gap 落在声明的密度范围内深度——阴影用法与声明的深度级别一致flat 无阴影规避规则——规范中 Dos and Donts 列出的反模式一个都不能出现。如果走 house-style 无规范路径则重点验证所有场景使用相同的 bg/fg/accent无逐场景发明颜色并且对照 house-style.md 的Lazy Defaults to Question清单渐变文字、左缘强调条、青紫渐变、纯黑纯白、同尺寸卡片网格、全居中逐一确认每个模式都是为内容服务的有意选择而非 AI 默认值。七、小结Pastel / Soft 的正确打开方式复制色板从skills/hyperframes-creative/palettes/pastel-soft.md全量复制 8 组色值声明角色每组至少确定 bg / fg / accent 三个角色浅色底优先选同组深色锚点作前景写入规范将色值落入design.mdfrontmatter或用 design-picker.md 生成多方案让用户选择校验对比度用hyperframes check或 contrast-report.mjs 逐帧审计确保任何浅色底上的文字都满足 WCAG AA遵循自检按 design-adherence.md 的六项检查收尾避免颜色失序与惰性默认。让 Pastel / Soft 不再只是一列好看的粉色而成为时尚与生活方式视频中可复现、可校验、可传承的完整色彩体系。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考