HyperFrames 色彩分级实战LUT 应用与前后对比的完整工作流【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFramesGitHub 推荐项目 hy/hyperframes是一个写 HTML、渲视频、为 AI Agent 而造的开源视频工具它的色彩分级Color Grading能力可以修正画面曝光与白平衡、用曲线和色轮塑形并一键加载.cube格式LUT查找表还能把多个候选 LUT 渲染到同一张对比图上前后对照。本文带你从零走通 HyperFrames LUT 分级的完整工作流选素材 → 先校正再塑形 → 应用 LUT → 前后对比 → 复用分级。一、认识 HyperFrames 的色彩分级只动像素不动布局HyperFrames 的分级作用在单个媒体元素img或video上它改变画面看起来怎样——更亮、更暖、更有情绪或更饱和但磁盘上的源文件不会被修改文本、字幕、SVG 和普通 HTML 图层完全不受影响。核心入口有两条路径官方文档都有详细说明日常操作指南docs/guides/color-grading.mdx实现参考写进 HTML、自动化、动画docs/reference/color-grading.mdx提示词写法与常见翻车案例docs/prompting/color-grading.mdx分级最终会以data-color-grading属性的形式存进你的 HTML形如video src./interview.mp4 />二、正确顺序先校正再塑形最后才是 LUT官方推荐的分级顺序是一条固定流水线各分段按此顺序生效adjust → wheels → curves → hueCurves → secondaries → lut → details → effects用大白话说就是先把曝光、白平衡、对比度、饱和度调得可信再处理色调范围和单色然后才轮到预设或LUT最后叠加颗粒、暗角和胶片感。任何预设都救不了过曝的高光或彻底死掉的暗部——源素材必须先有东西可救。用 Studio 图形界面起步在 Studio 中选中画布、图层面板或时间轴上的图片/视频在 Inspector 打开Grade面板从 13 个预设开始——从 Neutral、Clean Studio 到 Night Lift。Studio 会用你自己的画面帧而不是别人的样图为每个预设生成缩略图一目了然。用Strength强度在无效果和全效果之间调节。按住面板头部的compare对比按钮可以随时闪回原图对动态素材先多拖几个时间点再定夺—— flattering 某一帧的分级可能毁掉下一帧。用 CLI 让 Agent 帮你分析不需要记住控件名也可以直接描述问题npx hyperframes media-treatment --capabilities --json npx hyperframes media-treatment --selector #interview --analyze --json--analyze会报告源素材的颜色元数据、亮度分布、哪里在溢出并给出一个有界度的初始校正建议。分析完再应用npx hyperframes media-treatment --selector #interview \ --grading {preset:skin-soft,intensity:0.7} --apply加--dry-run --json可以只预览不写入。三、LUT 应用.cube 文件是怎么生效的LUTLook-Up Table查找表本质是一张输入颜色 → 输出颜色的映射表。HyperFrames 对 LUT 的支持规则如下来自 docs/guides/color-grading.mdx格式3D.cube文件每边最多 64 个采样点1D LUT 目前不支持。强度可调按你设置的 intensity 把 LUT 与原始画面混合而非一刀切替换。没有自动色彩管理HyperFrames 不做相机识别也不跑 ACES/OCIO 管线。因此安全场景是面向 Rec.709 的创意类 LUT——这也是这些控件唯一工作的色彩空间。LOG 素材要当心刻意拍得平灰的 LOG 片源需要先做它对应的变换否则出来的不是风格化而是错的。LUT 在data-color-grading中的写法payload 结构见 packages/core/src/colorLuts.tsvideo src./scene.mp4 />四、前后对比工作流三种方式眼见为实这是全文最值得记住的部分——HyperFrames 提供了三个层级的前后对比工具1. 面板内 Compare 闪回快速检查Studio 的 Grade 面板头部有 compare 按钮长按即在原片 ↔ 分级后之间闪烁切换适合逐帧快检。2. grade-compare 对比图选型决策在纠结用哪个 LUT时把所有候选渲染到同一张图上npx hyperframes grade-compare --for frame.png --grades grades.json # 或直接用 LUT 文件对比 npx hyperframes grade-compare --for frame.png --luts looks/a.cube,looks/b.cube--grades接收{ label, grading }数组--for接收一张图或取视频首帧。未处理的原始帧会作为标注为original的首格可用--no-baseline去掉。最多 16 格每行 4 格输出到grade-compare.png或--out指定的位置。一张图看清所有候选比在播放器里来回翻快得多。3. grade-split-reveal 组件视频化对比如果要给客户或团队看分级前 vs 分级后的动态演示官方组件 grade-split-reveal 正是为此而生同一画面叠两层底层是未分级灰片质感上层是完成后的暖调电影感一条硬边横扫过去、在中部停住供比较然后收进整帧。两种 look 都是真实 HyperFrames 着色器分级而非 CSS 滤镜所以预览和最终渲染完全一致。npx hyperframes add grade-split-reveal安装后把compositions/components/grade-split-reveal.html的内容贴进你自己的合成即可通过lookwarm-cinematic / cool-teal / bleach-bypass、split停顿位置等变量控制效果。五、复用与进阶把分级变成资产复制分级Studio 的Copy grade to可把当前分级应用到同一文件内或整个项目的其他媒体。注意跨项目复制会拒绝相对 LUT 路径相对路径在别的合成目录里含义不同跨项目请用 URL 或 data URL 可达的 LUT。动画化分级9 个属性暴露了 CSS 自定义属性可被时间轴直接补间其中就包括--hf-color-grading-lut-intensity——让 LUT 强度随时间渐变如 4 秒内从 0 淡入到 0.85。完整列表见 docs/reference/color-grading.mdx#L36-L71。只调画面的一部分分级按数值选像素、不按位置没有遮罩。想只调背景不动人脸就把背景单独拆成一个媒体图层分别分级模式示例见 docs/reference/color-grading.mdx#L73-L113。六、避坑清单LUT 分级最常见的翻车点LOG 素材直接套创意 LUT→ 偏色怪异。先做相机对应的变换或改用 Rec.709 片源。LUT 强度直接拉满→ 过饱和失真。先用 0.4–0.7 的强度试强度本身就是混合比例。只在一个帧上检查→ 动态素材要多拖几个时间点再确认。用缩略图判断 Bloom 类效果→ 光晕在缩略图上永远看起来还行务必 1:1 检查。期望 LUT 修复曝光→ 任何 LUT 都救不了死黑和死白先校正再上 LUT。总结一条可复用的 HyperFrames 调色流水线步骤操作工具/位置1先校正曝光与白平衡Studio Grade 面板 /media-treatment --analyze2预设塑形 强度微调13 个预设 Strength3加载.cubeLUTlut: { src, intensity }4前后对比选型grade-compare对比图 / grade-split-reveal5复用与动画Copy grade to /--hf-color-grading-lut-intensity从写 HTML 到渲染成片HyperFrames 让 LUT 分级不再依赖重型后期软件一条命令出对比图一个属性存下整个 look一次渲染所见即所得。完整契约与边界条件建议再通读一遍 docs/guides/color-grading.mdx配合 docs/prompting/color-grading.mdx 里的真实翻车案例就能把前后对比变成你工作流里的标准动作。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/15 18:33:54 · 阅读 1.2k HyperFrames 色彩分级实战：LUT 应用与前后对比的完整工作流
HyperFrames 色彩分级实战LUT 应用与前后对比的完整工作流【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFramesGitHub 推荐项目 hy/hyperframes是一个写 HTML、渲视频、为 AI Agent 而造的开源视频工具它的色彩分级Color Grading能力可以修正画面曝光与白平衡、用曲线和色轮塑形并一键加载.cube格式LUT查找表还能把多个候选 LUT 渲染到同一张对比图上前后对照。本文带你从零走通 HyperFrames LUT 分级的完整工作流选素材 → 先校正再塑形 → 应用 LUT → 前后对比 → 复用分级。一、认识 HyperFrames 的色彩分级只动像素不动布局HyperFrames 的分级作用在单个媒体元素img或video上它改变画面看起来怎样——更亮、更暖、更有情绪或更饱和但磁盘上的源文件不会被修改文本、字幕、SVG 和普通 HTML 图层完全不受影响。核心入口有两条路径官方文档都有详细说明日常操作指南docs/guides/color-grading.mdx实现参考写进 HTML、自动化、动画docs/reference/color-grading.mdx提示词写法与常见翻车案例docs/prompting/color-grading.mdx分级最终会以data-color-grading属性的形式存进你的 HTML形如video src./interview.mp4 />二、正确顺序先校正再塑形最后才是 LUT官方推荐的分级顺序是一条固定流水线各分段按此顺序生效adjust → wheels → curves → hueCurves → secondaries → lut → details → effects用大白话说就是先把曝光、白平衡、对比度、饱和度调得可信再处理色调范围和单色然后才轮到预设或LUT最后叠加颗粒、暗角和胶片感。任何预设都救不了过曝的高光或彻底死掉的暗部——源素材必须先有东西可救。用 Studio 图形界面起步在 Studio 中选中画布、图层面板或时间轴上的图片/视频在 Inspector 打开Grade面板从 13 个预设开始——从 Neutral、Clean Studio 到 Night Lift。Studio 会用你自己的画面帧而不是别人的样图为每个预设生成缩略图一目了然。用Strength强度在无效果和全效果之间调节。按住面板头部的compare对比按钮可以随时闪回原图对动态素材先多拖几个时间点再定夺—— flattering 某一帧的分级可能毁掉下一帧。用 CLI 让 Agent 帮你分析不需要记住控件名也可以直接描述问题npx hyperframes media-treatment --capabilities --json npx hyperframes media-treatment --selector #interview --analyze --json--analyze会报告源素材的颜色元数据、亮度分布、哪里在溢出并给出一个有界度的初始校正建议。分析完再应用npx hyperframes media-treatment --selector #interview \ --grading {preset:skin-soft,intensity:0.7} --apply加--dry-run --json可以只预览不写入。三、LUT 应用.cube 文件是怎么生效的LUTLook-Up Table查找表本质是一张输入颜色 → 输出颜色的映射表。HyperFrames 对 LUT 的支持规则如下来自 docs/guides/color-grading.mdx格式3D.cube文件每边最多 64 个采样点1D LUT 目前不支持。强度可调按你设置的 intensity 把 LUT 与原始画面混合而非一刀切替换。没有自动色彩管理HyperFrames 不做相机识别也不跑 ACES/OCIO 管线。因此安全场景是面向 Rec.709 的创意类 LUT——这也是这些控件唯一工作的色彩空间。LOG 素材要当心刻意拍得平灰的 LOG 片源需要先做它对应的变换否则出来的不是风格化而是错的。LUT 在data-color-grading中的写法payload 结构见 packages/core/src/colorLuts.tsvideo src./scene.mp4 />四、前后对比工作流三种方式眼见为实这是全文最值得记住的部分——HyperFrames 提供了三个层级的前后对比工具1. 面板内 Compare 闪回快速检查Studio 的 Grade 面板头部有 compare 按钮长按即在原片 ↔ 分级后之间闪烁切换适合逐帧快检。2. grade-compare 对比图选型决策在纠结用哪个 LUT时把所有候选渲染到同一张图上npx hyperframes grade-compare --for frame.png --grades grades.json # 或直接用 LUT 文件对比 npx hyperframes grade-compare --for frame.png --luts looks/a.cube,looks/b.cube--grades接收{ label, grading }数组--for接收一张图或取视频首帧。未处理的原始帧会作为标注为original的首格可用--no-baseline去掉。最多 16 格每行 4 格输出到grade-compare.png或--out指定的位置。一张图看清所有候选比在播放器里来回翻快得多。3. grade-split-reveal 组件视频化对比如果要给客户或团队看分级前 vs 分级后的动态演示官方组件 grade-split-reveal 正是为此而生同一画面叠两层底层是未分级灰片质感上层是完成后的暖调电影感一条硬边横扫过去、在中部停住供比较然后收进整帧。两种 look 都是真实 HyperFrames 着色器分级而非 CSS 滤镜所以预览和最终渲染完全一致。npx hyperframes add grade-split-reveal安装后把compositions/components/grade-split-reveal.html的内容贴进你自己的合成即可通过lookwarm-cinematic / cool-teal / bleach-bypass、split停顿位置等变量控制效果。五、复用与进阶把分级变成资产复制分级Studio 的Copy grade to可把当前分级应用到同一文件内或整个项目的其他媒体。注意跨项目复制会拒绝相对 LUT 路径相对路径在别的合成目录里含义不同跨项目请用 URL 或 data URL 可达的 LUT。动画化分级9 个属性暴露了 CSS 自定义属性可被时间轴直接补间其中就包括--hf-color-grading-lut-intensity——让 LUT 强度随时间渐变如 4 秒内从 0 淡入到 0.85。完整列表见 docs/reference/color-grading.mdx#L36-L71。只调画面的一部分分级按数值选像素、不按位置没有遮罩。想只调背景不动人脸就把背景单独拆成一个媒体图层分别分级模式示例见 docs/reference/color-grading.mdx#L73-L113。六、避坑清单LUT 分级最常见的翻车点LOG 素材直接套创意 LUT→ 偏色怪异。先做相机对应的变换或改用 Rec.709 片源。LUT 强度直接拉满→ 过饱和失真。先用 0.4–0.7 的强度试强度本身就是混合比例。只在一个帧上检查→ 动态素材要多拖几个时间点再确认。用缩略图判断 Bloom 类效果→ 光晕在缩略图上永远看起来还行务必 1:1 检查。期望 LUT 修复曝光→ 任何 LUT 都救不了死黑和死白先校正再上 LUT。总结一条可复用的 HyperFrames 调色流水线步骤操作工具/位置1先校正曝光与白平衡Studio Grade 面板 /media-treatment --analyze2预设塑形 强度微调13 个预设 Strength3加载.cubeLUTlut: { src, intensity }4前后对比选型grade-compare对比图 / grade-split-reveal5复用与动画Copy grade to /--hf-color-grading-lut-intensity从写 HTML 到渲染成片HyperFrames 让 LUT 分级不再依赖重型后期软件一条命令出对比图一个属性存下整个 look一次渲染所见即所得。完整契约与边界条件建议再通读一遍 docs/guides/color-grading.mdx配合 docs/prompting/color-grading.mdx 里的真实翻车案例就能把前后对比变成你工作流里的标准动作。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考