ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

HyperFrames 高级珠宝配色指南:Jewel / Rich 调色板全解析与实战落地

2026/9/10 21:03:18 拓冰建站 浏览量
HyperFrames 高级珠宝配色指南:Jewel / Rich 调色板全解析与实战落地 HyperFrames 高级珠宝配色指南Jewel / Rich 调色板全解析与实战落地【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesJewel / Rich 是 HyperFrames 创意技能体系hyperframes-creative内置的 9 套调色板之一专为奢侈、宴会活动、高端精致内容提供 8 组宝石质感配色酒红、紫晶、琥珀金、深青绿等。本文以 jewel-rich.md 为骨架完整收录全部 8 组色值并结合技能内的设计规范house-style、design-spec、design-adherence讲解如何把色组拆解为可落地的bg / fg / accent三层 token、写入frame.md/design.md以及如何通过对比度与一致性校验产出合规的高端视频画面。Jewel / Rich 在 creative 技能中的定位在 SKILL.md 的路由表中palettes/*.md被定义为Palette-specific color tokens配色专属 token 来源与house-style.md、visual-styles.md、design-picker.md等参考资料并列。当项目没有设计规范frame.md/design.md时技能推荐从 house-style.md 的调色板路由表直接选一套类别适用场景文件Bold / Energetic产品发布、社交媒体、公告palettes/bold-energetic.mdWarm / Editorial叙事、纪录片、案例研究palettes/warm-editorial.mdDark / Premium科技、金融、奢侈、电影感palettes/dark-premium.mdClean / Corporate解释视频、教程、演示palettes/clean-corporate.mdNature / Earth可持续、户外、有机palettes/nature-earth.mdNeon / Electric游戏、科技、夜生活palettes/neon-electric.mdPastel / Soft时尚、美妆、生活方式、健康palettes/pastel-soft.mdJewel / Rich奢侈、宴会活动、精致高端palettes/jewel-rich.mdMonochrome戏剧性、强调排印palettes/monochrome.mdJewel / Rich 与 Dark / Premium 同属高级感阵营但气质不同Dark / Premium 偏科技感与电影感深黑蓝 电光色而 Jewel / Rich 偏实体宝石与庆典质感——酒红、猩红、紫晶、琥珀金、奶油色与深海蓝的组合天然适合晚宴邀请、颁奖典礼、高定品牌、珠宝/香氛发布、红毯造型、VIP 活动等高净值场景。技能原文对它的定位只有一句Luxury, events, sophisticated, high-end content.本文的 8 组色值正是围绕这一气质展开。八大宝石色组完整色值清单jewel-rich.md提供 8 行 × 5 色的色组每一行都是一个可以独立成景的组合。以下逐组解读其色彩构成与建议应用方向色值原样继承未做任何改动。色组一梅红 × 酒红 × 琥珀 × 深青绿#5F0F40 #9A031E #FB8B24 #E36414 #0F4C5C#5F0F40深梅紫背景级深色、#9A031E酒红、#FB8B24琥珀橙、#E36414火焰橙、#0F4C5C深青绿。这组是典型的暖色主导 冷色收边结构红橙系负责奢华与温度深青绿提供互补色张力适合需要昂贵感的晚宴主视觉、红毯背景板、高端活动开场帧。色组二深血红 × 猩红 × 奶油 × 深海蓝#780000 #C1121F #FDF0D5 #003049 #669BBC#780000深血红、#C1121F猩红、#FDF0D5奶油白、#003049深海蓝、#669BBC灰蓝。经典的红金奶油皇家配色猩红 奶油白 海军蓝是三色旗式的稳重组合。其中#C1121F与 visual-styles.md 中 Shadow Cut 风格的 accent 一致说明这是技能体系内公认的高戏剧性红色适合颁奖典礼、皇室风、庆典揭幕。色组三单一紫色系的五级明度渐变#10002B #240046 #3C096C #5A189A #7B2CBF#10002B墨紫黑、#240046深紫、#3C096C紫罗兰、#5A189A皇家紫、#7B2CBF亮紫。这是 8 组中唯一单一色相纵向渐变的色组从近黑的墨紫一路亮到紫水晶。用它做背景可以天然获得同色系深度层次前景亮紫、背景深紫、文字近黑非常适合珠宝品牌片、夜场活动、以及需要神秘 华贵双气质的开场。色组四蓝灰 × 藕紫 × 玫瑰 × 暖沙#355070 #6D597A #B56576 #E56B6F #EAAC8B#355070蓝灰、#6D597A藕紫灰、#B56576玫瑰紫、#E56B6F珊瑚玫瑰、#EAAC8B暖沙。8 组中最柔和的一组饱和度整体偏低像磨砂质感的宝石。适合高端生活方式、沙龙/香槟调性、轻奢品牌故事片比纯高饱和的酒红金更内敛。色组五深可可 × 古铜金 × 焦糖 × 浅金奶#6F1D1B #BB9457 #432818 #99582A #FFE6A7#6F1D1B深可可、#BB9457古铜金、#432818深褐、#99582A焦糖、#FFE6A7浅金奶。巧克力 金箔质感是 8 组中最老钱old money的一组。适合威士忌、皮具、腕表、私人会所、VIP 邀请函等强调手工感与年代感的场景#FFE6A7这类浅金奶色也非常适合做衬线体标题字色。色组六茄紫黑 × 薰衣草 × 藕粉紫#231942 #5E548E #9F86C0 #BE95C4 #E0B1CB#231942茄紫黑、#5E548E灰紫、#9F86C0薰衣草、#BE95C4淡紫、#E0B1CB藕粉紫。淡雅系薰衣草是 8 组中最仙的一组。适合婚礼、高端香水、优雅晚装、名媛活动#231942做背景、#E0B1CB做文字、#9F86C0做强调是这条色组最稳的拆法。色组七暗酒红 × 莓红 × 蜜桃粉#461220 #8C2F39 #B23A48 #FCB9B2 #FED0BB#461220暗酒红、#8C2F39石榴红、#B23A48莓红、#FCB9B2蜜桃粉、#FED0BB肤粉。从深莓果到蜜桃粉的完整过渡自带红唇到肤色的彩妆逻辑。适合口红/彩妆发布、高定秀场、美容沙龙#FCB9B2与#FED0BB也适合做皮肤/产品特写帧的衬底色。色组八暗红 × 亮金 × 琥珀 × 正红#780116 #F7B538 #DB7C26 #D8572A #C32F27#780116暗红、#F7B538亮金、#DB7C26琥珀、#D8572A橘红、#C32F27正红。红金橙三连的火彩组合8 组中庆典感最强。适合年终盛典、奖杯揭幕、金缮/烧制工艺、农历新年等节庆场景#F7B538亮金作为 accent 在深色背景上非常出挑。从色组推导 bg / fg / accent 三层结构jewel-rich.md本身只给色值不指定角色分配——如何用由 house-style.md 的规则决定。其核心纪律是写 HTML 之前先声明一个背景bg、一个前景fg、一个强调accent全片统一不得按元素临时发明颜色单一 accent 色相每场戏用同一个强调色所有场景共享同一背景中性色向 accent 偏移哪怕是细微的暖/冷倾向也好过死灰明暗匹配内容美食、健康、亲子 → 亮色科技、电影、金融 → 深色。奢华内容天然属于深色阵营。据此宝石色组的通用拆法可以概括为取色组中最深的 1–2 个色做背景层bg / surface取奶油、浅金、浅粉等高明度色做文字层fg取琥珀、亮金、猩红等高饱和暖色做强调层accent。例如色组一可拆为bg#5F0F40梅紫、fg#FDF0D5方向借用色组二的奶油白、accent#FB8B24琥珀色组三可拆为bg#10002B墨紫黑、fg#E0B1CB方向借用色组六的藕粉紫、accent#7B2CBF亮紫色组八可拆为bg#780116暗红、fg#FFE6A7方向借用色组五的浅金奶、accent#F7B538亮金。这种跨色组借用高明度浅色做前景的做法与 house-style 中declare bg, fg, accent before writing code的流程一致——色组给出的是色相与明度素材角色分配是你的设计决策。落地为 frame.md / design.md 规范当项目需要把 Jewel / Rich 固化为一套可复用的设计规范时按照 design-spec.md 的约定写入frame.md视频项目首选或design.mdWeb/静态页面YAML frontmatter 是规范层colors、typography、spacing、components中的值必须逐字引用精确 hex、字体族、字重不得发明或四舍五入正文 prose 是上下文## Overview、## Colors、## Typography等小节承载意图与约束供判断而非取值读取优先级frame.md → design.md → DESIGN.md只读第一个存在的文件其余忽略。基于色组一一份最小可用的frame.mdfrontmatter 示例name: Jewel / Rich colors: bg: #5F0F40 surface: #9A031E fg: #FDF0D5 accent: #FB8B24 muted: #E36414 teal: #0F4C5C typography: headline: fontFamily: serif display # 按 typography.md 的衬线 无衬线搭配原则替换为具体字体 fontSize: 4rem fontWeight: 700 body: fontFamily: sans body fontSize: 1rem fontWeight: 400 spacing: sm: 12px md: 24px lg: 48px关于字体搭配typography.md 的快速规则是衬线 无衬线不能两个无衬线、标题 700–900 / 正文 300–400、标题 60px / 正文 20px。奢侈感排版尤其适合大衬线标题 细无衬线正文 大字号字距letter-spacing的组合——这与 visual-styles.md 中 Velvet Standard高级、永恒适合奢侈品牌、企业、主题演讲的 token 气质一致细字重、全大写、宽字距、长停留、慢进入缓出sine.inOut奢华需要时间。若项目需要交互式选色可参考 design-picker.md它为每次生成 5–6 套调色板要求明暗混合、在色卡尺寸下肉眼可区分并强调调色板命名应来自品牌世界而非通用情绪词——Jewel / Rich 这类宝石命名法正是其推荐方向。对比度校验与设计一致性验证奢华配色往往是深底浅字但好看不等于合规。creative 技能对颜色有硬性门槛WCAG AA 对比度house-style 明确写明对比度由hyperframes check强制校验WCAG AA去掉装饰后文字必须仍可读。宝石色组中的深背景如#10002B、#780000搭配奶油/浅金文字#FDF0D5、#FFE6A7通常方向正确但具体每对组合都应交给校验工具确认而不是凭直觉设计一致性检查design-adherence.md 要求成片后在预览前逐项核对颜色HTML 中每个 hex 必须出现在规范的调色板段落中出现任何自创颜色都要标记、字体族与字重不得替换、圆角、间距、阴影层级以及Dos / Donts 避讳清单渲染后对比度复核技能目录下的 scripts/contrast-report.mjs 可以从渲染帧中检查对比度告警作为hyperframes check之外的第二道防线。从源码结构看该脚本与 house-style.md 的对比度强制校验承诺形成闭环先在设计阶段声明色组再在构建后核查每个实际出现的色值是否仍在色组内——这正是调色板不是参考图而是契约的体现。使用边界与注意事项最后SKILL.md 为 creative 技能含调色板使用划定了边界同样适用于 Jewel / Rich不覆盖hyperframes-core的技术规则配色属于创意层不能越权修改底层技术契约不要求最小技术型构图必须有设计系统简单任务直接选一套色组即可不必铺开整套 design spec不擅自加戏除非需求明确或先提出扩充建议否则不要额外添加场景、旁白、音乐、字幕或转场按需引用简单编辑不必读完全部 reference 文档——选定 Jewel / Rich 色组后通常只需配合 house-style 的 bg/fg/accent 声明与 design-adherence 的颜色检查即可开写 HTML。一句话总结这套方法论Jewel / Rich 提供的是 8 组经过筛选的宝石级色值素材house-style 告诉你如何把它拆成 bg / fg / accent 三层契约design-spec 负责把契约固化成 frame.md / design.mddesign-adherence 与对比度校验则保证成片没有背叛这套契约。按此流程任何奢侈、宴会、高端主题的 HyperFrames 视频都能在几分钟内获得一套既华丽又合规的视觉基调。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考