HyperFrames Monochrome 调色板实战：用单色色阶构建戏剧化、排版驱动的视频画面
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
导读：本文围绕 HyperFrames 创意技能（hyperframes-creative）内置的 Monochrome 调色板展开，讲解这组"戏剧化、排版聚焦、严肃内容"专用色阶的完整构成、在 house-style 无设计规格创作流程中的选色步骤，以及如何用仓库自带的对比度审计脚本验证 WCAG 可读性。读完你将掌握：如何从 8 组色阶中声明 bg/fg/accent 三元组、如何把单色阶与排版和画面分层结合，以及如何用可复现的命令完成设计一致性自检。
Monochrome 调色板的定位：为戏剧化与排版而生
Monochrome 是 HyperFrames 创意方向体系中 9 个默认调色板之一，全部位于 skills/hyperframes-creative/palettes/ 目录。它在 house-style.md 的路由表中被明确标注为：
Monochrome— Use forDramatic, typography-focused（戏剧化、排版聚焦类内容）
原文档对它的定位只有一句话："Dramatic, typography-focused, serious content."（戏剧化、排版聚焦、严肃内容）。这意味着它面向的典型场景是：纪录片式的开场、严肃的声明与公告、社论式标题卡、数据叙事、产品发布中需要"安静而有力"的段落——画面让位于文字本身，色彩退居为明度与层次的工具。
在使用流程上，它属于"没有设计规格（无frame.md/design.md）时的快默认值"路线。根据 SKILL.md 的工作流，当项目没有设计规格、且用户需要视觉方向时，可以选择命名风格、快默认值或交互式选择器，而调色板正是这一流程中"先选色、后写 HTML"的输入物——house-style.md 明确要求：写 HTML 之前先声明一个背景色、一个前景色、一个强调色。
完整调色板：8 组色阶原样继承
以下是 monochrome.md 中提供的全部色值，共 8 行、60 个十六进制色，写作任何画面时都应原样引用（精确 hex，不得自行四舍五入或改写）：
#F8F9FA #E9ECEF #DEE2E6 #CED4DA #ADB5BD #6C757D #495057 #343A40 #212529 #0466C8 #0353A4 #023E7D #002855 #001233 #012A4A #013A63 #01497C #2A6F97 #468FAF #89C2D9 #582F0E #7F4F24 #936639 #A68A64 #C2C5AA #463F3A #8A817C #BCB8B1 #F4F3EE #E0AFA0 #03071E #370617 #6A040F #9D0208 #DC2F02 #F48C06 #FFBA08 #590D22 #800F2F #A4133C #FF4D6D #FF8FA3 #FFCCD5 #220901 #621708 #941B0C #BC3908 #F6AA1C色阶结构解读：每一行都是"单色相的明度渐变"
需要澄清一个常见误解：名为 Monochrome，这个调色板并非只有黑白灰。从色值可以直接观察，它的 8 行实际上是 8 条"单色相色阶"（monochromatic ramp）——每一行内部保持同一色相，只以明度（亮度）驱动变化，这正是"Monochrome"在此处的准确含义：在一个画面中，色彩纪律高于色彩数量，任何一条色阶被选中后，其余色阶不应混入。
逐行分析如下：
| 行 | 色值范围 | 色相特征 | 典型用途推断 |
|---|---|---|---|
| 第 1 行 | #F8F9FA→#212529（9 级） | 真正的中性灰度，从近白到近黑 | 整组调色板的"主干灰阶"，用于背景、正文、层级分隔 |
| 第 2 行 | #0466C8→#001233（5 级） | 深海军蓝，越深越暗沉 | 冷静、权威的深色强调与深底 |
| 第 3 行 | #012A4A→#89C2D9（6 级） | 青蓝色阶，浅端偏空气感 | 深色背景上的蓝调层次、数据可视化 |
| 第 4 行 | #582F0E→#C2C5AA（5 级） | 暖棕褐，浅端带灰绿 | 有温度的暖中性，适合"人文纪录片"式基调 |
| 第 5 行 | #463F3A→#E0AFA0（5 级） | 冷灰褐，含浅玫瑰#E0AFA0 | 中性偏暖的"画布 + 肤色系"组合 |
| 第 6 行 | #03071E→#FFBA08（7 级） | 深红 → 橙 → 琥珀金 | 唯一含"热色"的色阶，用于信号级强调 |
| 第 7 行 | #590D22→#FFCCD5（6 级） | 玫红 / 品红系 | 戏剧化的血色调，用于警示、情感峰值 |
| 第 8 行 | #220901→#F6AA1C（5 级） | 棕红 → 琥珀 | 复古、印刷感的热色强调 |
这种"每条色阶自明度驱动"的设计与仓库其他规范高度一致：component-quality-bar.md 与 placeholder-material.md 均要求占位素材使用"无彩度（monochrome）的灰阶渐变"，禁止紫蓝对角线渐变——单色阶正是这套质量纪律的色板化表达。
在创意工作流中的位置：从"选色"到"落笔"
根据 SKILL.md 的路由表，"Palette-specific color tokens（调色板专属颜色令牌）→palettes/*.md"，Monochrome 是创作流程第 2 步的输入材料。完整流程是：
- 若项目存在设计规格（
frame.md→design.md→DESIGN.md优先级，见 design-spec.md），以规格中的品牌令牌为准，调色板只补缺； - 若无设计规格，且需求符合"戏剧化 / 排版聚焦 / 严肃"气质，则选用 Monochrome；
- 写 HTML之前，按 house-style.md 的三步完成：解读提示词生成真实内容 → 选调色板并声明 bg/fg/accent → 选字体（可运行 typography.md 中的字体发现脚本）。
推荐 bg / fg / accent 三元组
从色阶结构出发，以下组合符合"单色阶纪律"且可直接套用（组合本身是色阶明度的合理选取，落地后仍需用下文对比度工具验证）：
| 画面基调 | bg（背景） | fg（前景文字） | accent（强调色） |
|---|---|---|---|
| 深底严肃（金融/科技/电影感） | #212529或#001233 | #F8F9FA | #0466C8或#FFBA08 |
| 浅底社论（杂志/纪录） | #F8F9FA或#F4F3EE | #212529或#463F3A | #9D0208（第 6 行深红） |
| 暖褐人文 | #C2C5AA或#BCB8B1 | #582F0E | #E0AFA0 |
| 冷青电影感 | #012A4A | #89C2D9 | #468FAF |
同时遵守 house-style.md 的色彩规则：
- 一个强调色：accent 只能取一个色阶中的某个值，跨行混用会破坏"单色"纪律；
- 全场景同背景：同一背景色贯穿所有场景，禁止逐场景发明新色；
- 中性色向强调色靠拢：即使用灰阶，也尽量选择带冷暖倾向的一端（如偏蓝的
#343A40或偏暖的#BCB8B1），避免死灰； - 避免懒默认：纯
#000/#fff、渐变文字、青色霓虹等属于 house-style.md 明令"下笔前质疑"的 AI 设计套路——单色阶方案天然规避了其中大部分。
排版驱动：单色阶与字体规则的配合
Monochrome 的定位是"typography-focused"，因此字体选择是画面的另一半。按 house-style.md 的排印快规则：标题 700–900 字重、正文 300–400 字重，优先"衬线 + 无衬线"搭配（而非两种无衬线），标题 60px+、正文 20px+。在 typography.md 中可查看完整的字体选择与渲染约束（含禁用字体清单）。
单色阶画面的排版策略可以概括为：文字承担对比度职责。当 bg 与 fg 明度差成为唯一层次来源时，标题的加粗、字重跳跃、行高与字号级差就取代了"彩色卡片"成为视觉骨架。这与仓库中titlecard-reveal蓝图（titlecard-reveal.md）描述的"monochrome end-card chain（单色尾卡链）"一致：声明式语句 → CTA 行 → 品牌字标，用硬切拼接，文字本身即画面。
画面层次：背景层与前景的"单色"处理
单色阶不意味着画面空洞。根据 house-style.md 的背景层规则，每个场景应有 2–5 个持久装饰元素，且都应使用本调色板内的色值：
- 径向光晕（强调色低透明度、呼吸缩放）；
- 幽灵文字（主题词 3–8% 不透明度、超大字号、缓慢漂移）；
- 发丝线（hairline 规则线、轻微脉冲）；
- 噪点/几何图形/网格纹理；
- 主题性装饰（数据画面用网格线、严肃题材用细线框）。
背景装饰要有缓慢的环境动画（呼吸、漂移、脉冲），静态装饰会显得死板。而前景的文字、标题卡、数据则保持高对比、高清晰度，形成"装饰低对比 + 内容高对比"的单色分层。更完整的"品牌即规范、布局自由"的消费契约见 video-composition.md。
对比度验证：用 contrast-report.mjs 守住 WCAG AA
house-style.md 明确：对比度由hyperframes check（WCAG AA）强制，移除装饰后文字必须可读。针对单色阶这种"低彩度画面"，对比度风险恰恰最容易出现在"自以为够深/够浅"的中间灰上（如#6C757D放在#F8F9FA上或反之）。
仓库提供了专门的像素级审计脚本 contrast-report.mjs，它不是"按声明颜色算公式"，而是真实渲染后采样文字背后的合成像素。用法：
node skills/hyperframes-creative/scripts/contrast-report.mjs <composition-dir> \ [--samples N] [--out <dir>] [--width W] [--height H] [--fps N]<composition-dir>必须包含index.html，原始作者 HTML 即可（文件服务器在服务时会自动注入运行时）；- 默认参数：
--samples 10、输出目录.hyperframes/contrast、1920×1080、30fps； - 输出
contrast-report.json（每个文本元素 × 每个采样时刻的对比度数据）与contrast-overlay.png（精灵图：洋红 = 未过 AA，黄色 = 仅过 AA，绿色 = 过 AAA）； - 退出码：任一文本元素未过 WCAG AA 则退出 1，可用在 CI 门禁中。
脚本内部的判定标准（见 contrast-report.mjs）：大文本（≥24px，或 ≥19px 且 ≥700 字重）要求 AA ≥ 3:1、AAA ≥ 4.5:1；常规文本要求 AA ≥ 4.5:1、AAA ≥ 7:1。它还会把元素自身的文字绘制（color/ SVGfill/-webkit-text-stroke）临时置为透明后截图，直接采样文字包围盒内的真实像素中位数作为背景——因此能正确处理玻璃拟态（backdrop-filter）、半透明装饰、紧贴文字边缘的面板等"外环采样"会失真的情况。运行环境要求：若在 CLI/技能安装之外独立运行，可通过HYPERFRAMES_SKILL_PKG_VERSION=<version>显式固定引导用的@hyperframes/producer版本（见 SKILL.md）。
设计一致性自检：交付前的 6 项清单
画面搭建完成后、提供预览之前，按 design-adherence.md 做逐项核查（无设计规格、仅 house-style 路线时重点核查前两项）：
- 颜色合规：HTML 中出现的每个 hex 必须能在本调色板的 palette 区块中找到，任何自创颜色都要标记并修复；
- 排版一致：字体族与字重与选定字体匹配，无替换；
- 圆角：与声明的圆角风格一致（若声明）；
- 间距：padding/gap 落在声明的密度范围内（若声明）；
- 深度：阴影使用与声明层级一致（flat = 无阴影、subtle = 轻、layered = 光晕）；
- 规避规则：若规格含 "What NOT to Do" 等禁用项，确认全部未出现。
对单色阶方案，第 1 项是最容易失守的：编辑器取色器随手吸出的"更顺眼"的颜色往往不在色阶内——违反"所有颜色来自色阶"这一单色纪律。
与其他调色板的选择边界
Monochrome 是 9 个默认调色板之一，选择边界依据 house-style.md 的路由表：
| 调色板 | 适用内容 |
|---|---|
| bold-energetic.md | 产品发布、社交媒体、公告等高频内容 |
| warm-editorial.md | 叙事、纪录片、案例研究 |
| dark-premium.md | 科技、金融、奢侈品、电影感 |
| clean-corporate.md | 讲解、教程、演示 |
| nature-earth.md | 可持续、户外、有机 |
| neon-electric.md | 游戏、科技、夜生活 |
| pastel-soft.md | 时尚、美妆、生活方式、健康 |
| jewel-rich.md | 奢华、活动、精致 |
| Monochrome | 戏剧化、排版聚焦、严肃内容 |
若项目存在设计规格（如来自 frame-presets 的模板或 design-picker 生成的规格），则品牌令牌优先，Monochrome 只作为补充；无规格时，它就是这套严肃戏剧化路线的默认答案。另外也可不依赖预设调色板，从 OKLCH 推导——选定一个色相，在不同明度下构建 bg/fg/accent，并把所有中性色向该色相靠拢，这与 Monochrome"单色相驱动"的底层逻辑完全一致。
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
