HyperFrames 自然大地调色板（Nature / Earth）实战指南：为可持续、户外、有机与健康类视频构建色彩体系

本文围绕 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.md frontmatter 示例：

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：

1. 先声明再写代码：动手写 HTML 前，声明一个背景、一个前景、一个强调色。Palettes 章节明确规定"Declare one background, one foreground, one accent before writing HTML"。Nature / Earth 的 40 色只是候选池，落到每个场景只能三选一。
2. 单场景一个强调色：#BC6C25、#BC4749、#FE7F2D、#ECF39E 都是强色，不能在一帧里同时出现——那是典型的 AI 设计痕迹。
3. 中性色向强调色偏移：即使是大面积奶油/米色，也尽量带一点暖意（#FEFAE0、#F0EAD2 本身就含黄相），避免死灰。
4. 明暗匹配内容：house-style 建议"food、wellness、kids → 浅色；tech、cinema、finance → 深色"。因此有机食品、健康内容优先用第 1/5/7 行的浅色组合，而纪录片式的自然叙事可用第 6 行深林绿做暗场。
5. 背景层必须有景深：每场景需要 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.01em letter-spacing。

对比度校验：WCAG AA 是硬门槛

选色不是审美自由发挥——HyperFrames 用 WCAG AA 对比度强制约束文字可读性。house-style 明确："Contrast: enforced by hyperframes 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.md frontmatter）：

<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 实测收尾。这样产出的合成，既有大地系品牌的一致性，又经得起渲染与可读性校验。