HyperFrames Neon/Electric 霓虹电光配色方案全解析：从色板到视频实战
HyperFrames Neon/Electric 霓虹电光配色方案全解析从色板到视频实战【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes霓虹电光Neon / Electric是 HyperFrames 创意技能hyperframes-creative内置的九套默认色板之一面向游戏、科技、夜生活和 Gen Z 内容的高能量视觉场景。这篇指南将以 skills/hyperframes-creative/palettes/neon-electric.md 为骨架逐组拆解其色值构成与角色分工并结合hyperframes-creative的 house-style、design-spec、design-adherence 等配套规范以及仓库中真实使用同源色值的 registry 组件演示如何在 HyperFrames 的frame.md/design.md设计规范与 HTML 渲染管线中落地这套配色最终通过hyperframes check的 WCAG AA 对比度校验。Neon/Electric 色板的定位与适用场景Neon/Electric 是 HyperFrames 创意工作流中的高能色板其设计初衷在 skills/hyperframes-creative/palettes/neon-electric.md 的第一行就给出明确限定Gaming, tech, nightlife, Gen Z content.即游戏、科技、夜生活、Gen Z 内容四大场景。它与同目录下的其他八套色板bold-energetic.md、dark-premium.md、warm-editorial.md 等共同构成 house-style 的默认取色入口见 references/house-style.md 中的色板路由表分类适用场景对应文件Bold / Energetic产品发布、社交媒体、公告palettes/bold-energetic.mdNeon / Electric游戏、科技、夜生活palettes/neon-electric.mdDark / Premium科技、金融、奢华、电影感palettes/dark-premium.md何时选择它内容本身是深色基底夜间、赛博、电玩、俱乐部需要高饱和荧光强调色来制造通电感时。需要特别注意的是house-style 把cyan-on-dark / purple-to-blue gradients / neon accents列为Lazy Defaults to QuestionAI 设计的懒默认项——即 LLM 最容易随手就用、反而暴露AI 生成感的模式。因此使用这套色板必须是有意为之内容确实属于游戏/科技/夜生活语境而不是默认值。色值全量拆解八组颜色的角色分工原文档提供了 8 行共 40 个色值。为便于实战引用这里按视觉功能将其归为四个层级第一组主霓虹强调Magenta / Purple 系#F72585 #B5179E #7209B7 #560BAD #3A0CA3#F72585霓虹粉/品红——整组中最亮、饱和度最高的主强调色适合标题、CTA、关键数据#B5179E→#7209B7→#560BAD→#3A0CA3深紫递进——由亮到暗的紫色阶梯可作为渐变色带或次级强调。第二组流行色块多巴胺配色#70D6FF #FF70A6 #FF9770 #FFD670 #E9FF70青、粉、橙、黄、荧光黄绿五个高亮色是典型的 Gen Z 多巴胺配色。适合图标、标签、图表序列、装饰性色块等需要一组可区分的强调色的场景。第三组蓝紫过渡科技感#7400B8 #6930C3 #5E60CE #5390D9 #48BFE3从深紫到电蓝的平滑过渡带。#7400B8可承接第一组的深紫#48BFE3可作为青色系辅助。常用于渐变背景、科技 UI、数据可视化中的渐变映射。第四组深色基底 青色电光#0B132B #1C2541 #3A506B #5BC0BE #6FFFE9#0B132B/#1C2541/#3A506B——三个深蓝灰背景色是整套配色的画布供不同场景或层级选用#5BC0BE/#6FFFE9——青绿到电青是最重要的发光色适合深底上的描边、辉光glow、霓虹灯管文字。第五组派对荧光Nightlife#540D6E #EE4266 #FFD23F #3BCEAC #0EAD69暗紫底 荧光粉/黄/绿适合夜生活、派对、音乐内容。#540D6E可做深底其余四色做高亮。第六组电紫主旋律Electric Purple#2D00F7 #6A00F4 #8900F2 #A100F2 #F20089从电蓝紫到电粉的连续渐变是最通电的一组适合标题渐变动画、科技感主视觉。第七组橙色电压Warm Voltage#FF6D00 #FF7900 #FF8500 #FF9100 #240046橙色电压系强调 极深紫底#240046。适合需要暖色点缀、与冷色形成对比的场景。第八组青蓝核心Electric Cyan#BBFBFF #8DD8FF #4E71FF #5409DA亮青 → 蓝 → 电蓝紫的压缩渐变带与第四组的电青色呼应可作为标题渐变的快速实现方案。在 HyperFrames 设计规范中落地frame.md / design.md在 HyperFrames 创意工作流中色板不是孤立使用的。按 references/design-spec.md 的规定项目优先加载设计规范优先级frame.md→design.md→DESIGN.md规范由YAML frontmatter规范性层 Markdown 正文上下文层组成。frontmatter 中的colors令牌必须逐字引用真实色值# frame.md 或 design.md 的 frontmatter 示例 name: Neon Electric Showcase colors: background: #0B132B surface: #1C2541 primary: #F72585 accent: #6FFFE9 secondary: - #7209B7 - #48BFE3 - #FFD670 typography: headline: fontFamily: Montserrat fontSize: 5rem fontWeight: 900 body: fontFamily: Inter fontSize: 1.25rem fontWeight: 400也可以参考 references/visual-styles.md 的写法——该文档把每种风格表达为 DESIGN.md 兼容的 token 块把 YAML 复制进design.mdfrontmatter 后补充## Overview、## Colors、## Typography、## Elevation、## Components、## Dos and Donts等正文章节即完成一份规范。取色三原则来自 references/house-style.md写作 HTML 前先声明 bg / fg / accent不要在写元素时临时发明颜色同一套背景贯穿所有场景中性色向强调色色相倾斜微暖/微冷都好过死灰用 OKLCH 推导亦可定一个色相在不同明度下构建 bg / fg / accent。字体与排版配套建议霓虹电光配色通常搭配几何无衬线或等宽字体更出效果。参考 references/typography.md 的预打包字体表推荐优先使用内置且未被列入禁用名单的字体族Montserrat几何无衬线400/700/900、Oswald压缩无衬线400/700、Archivo Black重型展示体仅 400、Space Mono / JetBrains Mono等宽。注意 Inter、Poppins、Outfit 等在禁用单色文化名单上——能渲染但显得平庸。排版硬性护栏视频尺寸而非网页尺寸全屏观看正文 ≥ 20px标题 ≥ 60px数据标签 ≥ 16px信息流内观看X / LinkedIn / Instagram正文 ≥ 32px标题 ≥ 90px数据标签 ≥ 24px深色背景上文字会有视觉加粗效应正文用 350 而非 400line-height比浅色场景多 0.05–0.1展示级字号letter-spacing收紧到 -0.03em ~ -0.05em抵消视频编码对细节的压缩数据类数字开启font-variant-numeric: tabular-nums保证纵向对齐。实战落地仓库中同源色值的真实应用在 registry 组件中可以直接找到与 Neon/Electric 同源色值的实现证据。例如 registry/blocks/transitions-cover/transitions-cover.html 的 blinds 转场效果其横竖百叶条就循环使用#3A0CA3、#4361EE、#4CC9F0、#F72585四色见该文件 L243-L276// 横向百叶条8 条每条 1920x135px循环取色 var blindsHTML ; for (var i 0; i 8; i) { blindsHTML div idblind- i styleposition:absolute; left:0; width:1920px; height:135px; top: i * 135 px; background: [#3A0CA3, #4361EE, #4CC9F0, #F72585][i % 4] ; transform:translateX(-1920px);/div; }其中#F72585与#3A0CA3正是 Neon/Electric 第一组的首尾色#4361EE、#4CC9F0则与第三组蓝紫过渡带同属一个视觉家族。这证明该色板在真实 registry 组件中是可落地的且常见用法是深紫与品红交替构成高对比转场/动效色带。此外hyperframes-creative生态内还有大量与霓虹语义协同的素材动画技能 skills/hyperframes-animation/transitions/css-destruction.md 明确指出该转场适合 Dramatic reveals, edgy/destructive mood, gaming, neon-noir音乐转视频技能提供neon-flicker运动原语skills/music-to-video/references/motion-primitive-catalog.md以 0.5–2.5s 的霓虹灯管闪烁节奏呈现运动词汇表提供caption-neon-glow等预置字幕效果skills/motion-graphics/references/motion-vocabulary.md。对比度与色彩合规hyperframes check深色底 荧光强调色很容易踩中对比度不足的坑。HyperFrames 的规范是hyperframes check强制 WCAG AA 对比度见 references/house-style.md 的 Color 小节文字在移除装饰后仍必须可读。文字优先使用色板中明度较高的色如#6FFFE9、#BBFBFF、#E9FF70落在深底#0B132B、#240046上对比度天然充足若用#F72585这类中等明度色做正文建议只用于大号标题正文交给高亮色渲染后可用 scripts/contrast-report.mjs 检查成帧的对比度警告验证清单参考 references/design-adherence.md核对 HTML 中每个 hex 是否都出现在规范的 palette 段、字体族与字重是否匹配、圆角/间距/阴影是否符合声明层级并检查 Donts 避雷清单。场景化应用速查场景基底色主强调发光色搭配建议游戏/电竞#0B132B#F72585#6FFFE9Montserrat 900 标题 caption-neon-glow科技/产品发布#1C2541#7209B7#48BFE3蓝紫渐变 tabular-nums 数据夜生活/派对#540D6E#EE4266#3BCEAC荧光多色块 neon-flicker动效Gen Z / 社交媒体#3A0CA3#FF70A6#E9FF70多巴胺色块信息流大字号总结Neon/Electric 色板为 HyperFrames 视频创作提供了开箱即用的高能视觉基础40 个色值覆盖了主霓虹强调、蓝紫科技过渡、深色基底、电光点缀、派对荧光与暖色电压等多个功能层级。在 HyperFrames 的创意工作流中正确用法是先判断内容确实属于游戏/科技/夜生活语境而非 LLM 懒默认再将其写入frame.md/design.md的colors令牌搭配内置字体表与排版护栏最后用hyperframes check与 design-adherence.md 清单做收尾校验。从 transitions-cover 的真实实现看深紫 品红的交替色带是这套色板最稳妥的实战范式。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考