HyperFrames 自然大地调色板（Nature / Earth）实战指南：为可持续、户外、有机与健康类视频构建色彩体系
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
本文围绕 HyperFrames 创意技能包（hyperframes-creative）内置的 Nature / Earth 调色板展开，讲解如何为可持续、户外、有机、健康类视频内容选定与落地一套大地系配色：从 40 个色值的语义分组，到design.md/frame.md规范中的 YAML 色彩令牌，再到 WCAG AA 对比度校验与 HTML 实践。读完你可以直接把这套色板用于 HyperFrames 项目的frame.md设计规范，写出有品牌感、可渲染、可过检的大地系视频合成。
Nature / Earth 调色板定位：它解决什么问题
在 palettes/nature-earth.md 中，这组色板的用途被一句话点明：
Sustainability, outdoor, organic, wellness content.
即**可持续（Sustainability）、户外（Outdoor）、有机（Organic）、健康养生（Wellness）**类内容。它是 house-style.md 的 Palettes 章节（表格入口）所列的九个默认调色板之一，与 Bold/Energetic、Warm/Editorial、Dark/Premium、Clean/Corporate、Neon/Electric、Pastel/Soft、Jewel/Rich、Monochrome 并列。凡涉及环保品牌、露营与户外装备、有机食品、自然纪录片、疗愈健康产品的 HyperFrames 视频，都可以从这里起步。
在 HyperFrames 的创意工作流中，调色板不是孤立的"好看的颜色清单"，而是设计规范（design spec）的一个输入。按 SKILL.md 的定义，hyperframes-creative负责非动画的视觉方向——设计规范处理、调色板、排版、旁白、节拍规划等；动手写 HTML 之前，应当先完成"声明 bg（背景）、fg（前景）、accent（强调色）"这一步，这正是 Nature / Earth 色板发挥作用的环节。
完整色板：8 组 × 5 色，共 40 个色值
原文档完整给出 8 行色板，每行 5 个十六进制色值。为避免任何信息丢失，这里逐行完整呈现（保持原文档顺序），随后进行语义拆解。
#606C38 #283618 #FEFAE0 #DDA15E #BC6C25 #DAD7CD #A3B18A #588157 #3A5A40 #344E41 #386641 #6A994E #A7C957 #F2E8CF #BC4749 #CAD2C5 #84A98C #52796F #354F52 #2F3E46 #F0EAD2 #DDE5B6 #ADC178 #A98467 #6C584C #132A13 #31572C #4F772D #90A955 #ECF39E #6B9080 #A4C3B2 #CCE3DE #EAF4F4 #F6FFF8 #233D4D #FE7F2D #FCCA46 #A1C181 #619B8A逐组语义拆解
| 行 | 主色相 | 说明 | 典型角色 |
|---|---|---|---|
| 1 | 橄榄绿 + 奶油 + 焦橙棕 | 经典"土壤—叶绿—沙土"组合，#FEFAE0是暖奶油底 | 深绿标题 + 奶油背景 + 焦橙强调 |
| 2 | 鼠尾草灰绿 | 低饱和、克制的自然灰绿（#DAD7CD/#A3B18A）与深森林绿（#588157→#344E41）渐变 | 中灰绿背景 + 深绿前景 |
| 3 | 亮绿 + 浆果红 | #386641→#A7C957的绿色跨度最大，#BC4749是整张表中唯一的暖红 | 有机食品、活力农业，红作强调 |
| 4 | 雾蓝灰绿 | #CAD2C5→#2F3E46，带冷调、接近石板灰 | 户外装备、中性冷静风 |
| 5 | 麦秆米 + 驼色 | #F0EAD2/#DDE5B6/#ADC178是暖黄绿，#A98467/#6C584C是泥土棕 | 谷物、木料、手作感 |
| 6 | 深林绿 + 荧光黄绿 | #132A13接近墨绿黑，#ECF39E是高亮黄绿 | 深底 + 高亮强调，强对比 |
| 7 | 薄荷雾绿 | 最"清新疗愈"的一行，#F6FFF8→#6B9080从白到雾绿 | 健康养生、疗愈、SPA 场景 |
| 8 | 深海蓝 + 活力橙黄 | #233D4D深蓝绿、#FE7F2D/#FCCA46橙黄 | 户外运动（登山、骑行）活力组合 |
整体来看，这 40 个色值呈现几个显著特征：绿色系占绝对主体（从墨绿#132A13到荧光黄绿#ECF39E覆盖了完整的明度跨度）；暖中性色丰富（奶油#FEFAE0、米色#F0EAD2、驼棕#A98467）；冷调补充（雾蓝灰绿第 4 行、薄荷第 7 行、深蓝第 8 行）；以及零星的高饱和强调色（焦橙#BC6C25、浆果红#BC4749、活力橙#FE7F2D）。这与 house-style.md 的"每场景一个强调色（One accent hue）"原则天然契合——绿色与奶油承担大面积的 bg/fg，强调色只需取一行中的第三个或第五个角色。
在 HyperFrames 设计规范中落地：YAML 色彩令牌
HyperFrames 的设计规范文件是frame.md/design.md（frame.md为视频优先，design.md面向网页/静态页；两者格式相同）。按 design-spec.md 的解析约定：frontmatter 是规范性层（机器可读的真实值，必须逐字引用十六进制），prose 是语境层（意图与约束）。调色板被引入项目的方式，就是把选定的色值写进 frontmatter 的colors令牌。
以第 1 行（橄榄绿 × 奶油 × 焦橙棕）为基底，一份可持续/有机内容项目的frame.mdfrontmatter 示例：
name: Nature Earth — Organic Harvest colors: primary: "#283618" # 深橄榄绿，标题与主前景 on-primary: "#FEFAE0" # 暖奶油，深绿之上的正文 surface: "#FEFAE0" # 场景背景，暖奶油 on-surface: "#283618" # 背景之上的主文字 accent: "#BC6C25" # 焦橙棕，唯一强调色（CTA、数据高亮） muted: "#606C38" # 次级橄榄绿，标签/次级文本 hairline: "#DDA15E" # 沙金色，细线分隔 typography: headline: fontFamily: EB Garamond # 或从 bundled 字体中另选 fontSize: 4rem fontWeight: 700 body: fontFamily: Montserrat fontSize: 1.5rem fontWeight: 400 rounded: sm: 8px md: 16px spacing: sm: 8px md: 16px lg: 32px也可以参考 visual-styles.md 中完整风格（如面向健康养生的 "Soft Signal"）的 YAML 组织方式：colors（2–5 个令牌）+typography（2–3 个字号层级）+rounded+spacing，然后补上## Overview、## Colors、## Typography、## Components、## Do's and Don'ts等 prose 小节，即可得到一份完整的design.md。
如果不想手写，也可以走交互式路线：按 design-picker.md 生成可视化选择器，用户选定后把design.md粘贴回对话并保存到项目根目录。
色彩使用规则：先声明、单一强调、中性向强调色偏移
Nature / Earth 色板只有配合 house-style 的色彩纪律才能避免"五颜六色的网页风"。以下规则直接来自 house-style.md：
- 先声明再写代码：动手写 HTML 前，声明一个背景、一个前景、一个强调色。Palettes 章节明确规定"Declare one background, one foreground, one accent before writing HTML"。Nature / Earth 的 40 色只是候选池，落到每个场景只能三选一。
- 单场景一个强调色：
#BC6C25、#BC4749、#FE7F2D、#ECF39E都是强色，不能在一帧里同时出现——那是典型的 AI 设计痕迹。 - 中性色向强调色偏移：即使是大面积奶油/米色，也尽量带一点暖意（
#FEFAE0、#F0EAD2本身就含黄相），避免死灰。 - 明暗匹配内容：house-style 建议"food、wellness、kids → 浅色；tech、cinema、finance → 深色"。因此有机食品、健康内容优先用第 1/5/7 行的浅色组合，而纪录片式的自然叙事可用第 6 行深林绿做暗场。
- 背景层必须有景深：每场景需要 2–5 个常驻装饰元素（强调色径向光晕、3–8% 透明度的幽灵文字、发丝线分隔线、颗粒/噪点覆盖层等），并配以缓慢的呼吸/漂移动画——这能避免入场动画交错期画面空荡。
排版配合：大地系色板 × HyperFrames 字体规则
色彩与字体共同构成品牌。按 typography.md 的规则：
- 不要用两个无衬线体配对；跨越字体类别：serif + sans，或 sans + mono。Nature / Earth 的"天然"气质适合衬线展示字 + 现代无衬线正文（如 EB Garamond + Montserrat），或衬线 + 等宽（数据标签用 JetBrains Mono / Space Mono）。
- 优先使用预打包的 18 个字体族，离线确定渲染、无 lint 警告、云端渲染不失败。其中既在预打包中又未被禁用的安全选择是：Montserrat、Oswald、League Gothic、Archivo Black、Space Mono、IBM Plex Mono、JetBrains Mono、Source Code Pro、Noto Sans JP。Inter、EB Garamond、Playfair Display 等虽能渲染但已被列入"千篇一律"禁用清单。
- 字号按视频而非网页：正文 ≥ 20px（信息流内嵌观看 ≥ 32px），标题 ≥ 60px（信息流 ≥ 90px），数据标签 ≥ 16px；字重对比要极端（300 vs 900）。
- 深色场景（如第 6 行深林绿底）：浅字在深底上视觉更重、字距更紧，正文用 350 而非 400，
line-height增加 0.05–0.1，display 字号加 0.01emletter-spacing。
对比度校验：WCAG AA 是硬门槛
选色不是审美自由发挥——HyperFrames 用 WCAG AA 对比度强制约束文字可读性。house-style 明确："Contrast:enforced byhyperframes check(WCAG AA). Text must be readable with decoratives removed."
仓库为此提供了一等公民工具 contrast-report.mjs：它读取合成目录，在 N 个采样时刻遍历 DOM 中的文本元素，测量每个元素声明的前景色与它背后真实合成像素之间的 WCAG 2.1 对比度，输出：
contrast-report.json（机器可读，每个文本元素 × 采样点一条记录）contrast-overlay.png（精灵网格：品红 = AA 不通过，黄色 = 仅 AA 通过，绿色 = AAA）
用法：
node skills/hyperframes-creative/scripts/contrast-report.mjs <composition-dir> \ [--samples N] [--out <dir>] [--width W] [--height H] [--fps N]其实现细节值得注意：为了测出"文字背后真实像素"，脚本会把每个候选元素的文本绘制（color/fill/-webkit-text-stroke-color→transparent，且强制transition: none防止截图中途过渡）隐藏后截屏，再在元素自身 bbox 内以有界网格采样中位数——这比在 bbox 外侧采样 4px 环的方法对玻璃拟态、半透明装饰等场景更稳健。任一文本元素未达 AA（大字 ≥ 3:1，普通文本 ≥ 4.5:1）即退出码 1。
以 Nature / Earth 色板自检：
- 第 1 行：
#283618（前景）在#FEFAE0（背景）上对比度极高，适合正文；#BC6C25焦橙作强调文字时要留意（与奶油的对比度约 3:1 上下，做大字/加粗可过 AA，做小字需实测）。 - 第 7 行薄荷雾绿：
#6B9080与#EAF4F4对比温和，适合大面积装饰与大标题，但不适合小字号正文——这正是contrast-report.mjs这类工具存在的意义：不要凭感觉，跑一次测量。
写作规范阶段的对应检查在 design-adherence.md 中定义：无设计规范时验证"所有场景使用同一组 bg/fg/accent、无逐场景发明颜色"，并对照 house-style 的 "Lazy Defaults to Question" 清单（渐变文字、左侧强调条、纯黑/纯白、相同卡片网格等）逐项核查。
实战示例：一帧"有机农产品"场景的骨架
把上述规则落成一帧的 HTML 骨架（假设已把第 1 行色板声明进frame.mdfrontmatter）：
<body style="background:#FEFAE0;color:#283618;font-family:'Montserrat',sans-serif;"> <!-- 背景层：常驻装饰，缓慢呼吸 --> <div style="position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(221,161,94,0.18),transparent 70%);width:60vw;height:60vw;left:-20vw;top:-20vw;"></div> <div style="position:absolute;font-family:'EB Garamond',serif;font-size:18vw;color:rgba(40,54,24,0.05);right:0;bottom:0;">field</div> <!-- 前景层 --> <h1 style="font-family:'EB Garamond',serif;font-weight:700;font-size:5rem;color:#283618;">Harvest, not hurry</h1> <p style="font-size:1.4rem;line-height:1.7;max-width:40ch;">Small farms, slow soil, honest produce — grown within a day's drive.</p> <div style="background:#606C38;color:#FEFAE0;border-radius:999px;padding:12px 28px;display:inline-block;">Shop the season</div> <!-- 数据：大数字 + 等宽字体 + tabular-nums --> <div style="font-family:'Space Mono',monospace;font-variant-numeric:tabular-nums;font-size:3rem;color:#BC6C25;">2,400+</div> </body>要点：背景色/前景色/强调色三色一致；深绿#283618作标题与主文本，焦橙#BC6C25只用于数据高亮这一个强调点；奶油底上的衬线标题 + 无衬线正文 + 等宽数据符合跨类别配对；数据用tabular-nums保证纵向数字对齐。写完后跑hyperframes check与contrast-report.mjs验证对比度，再按 design-adherence.md 的清单检查是否引入了清单外的发明颜色。
与其他色板及资源的边界
Nature / Earth 与相邻色板的分工在 house-style.md 的 Palettes 表中写明：健康养生内容若更偏"精致柔美"，可参考 pastel-soft.md（时尚、美妆、生活方式）；若更偏"温暖叙事"，可参考 warm-editorial.md；科技/高端感则不属于本板，应转向 dark-premium.md。Nature / Earth 的独特点在于它的绿色跨度——从墨绿到荧光黄绿、从冷雾绿到暖橄榄绿，几乎覆盖了自然类品牌的全部明度需求，这也是它在可持续与户外内容中被优先选择的原因。
小结
Nature / Earth 调色板是 HyperFrames 创意技能包为可持续、户外、有机与健康内容准备的大地系配色基座：40 个色值覆盖了从暖奶油、麦秆米到深林绿、雾蓝灰绿的完整明度与色温跨度。正确的用法不是"每帧换色"，而是——从这 40 色中先声明 bg/fg/accent 三个角色，写入frame.md/design.md的 frontmatter 色彩令牌，配合 house-style 的单一强调色与背景层规则、typography 的字体配对纪律，最后用hyperframes check与 contrast-report.mjs 的 WCAG AA 实测收尾。这样产出的合成，既有大地系品牌的一致性，又经得起渲染与可读性校验。
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
