mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
ukimsanov
e60bef3f57
Rewrites the pages that survive the restructure so they lead with what a reader can accomplish, and points them at the sections added in the previous commit. Page set and navigation are unchanged here; only content moves. Keeps the skill count in README. CLAUDE.md's catalog-maintenance rule requires the count to live in README and CLAUDE.md, and both now agree with the 19 directories under skills/.
129 lines
4.8 KiB
Plaintext
129 lines
4.8 KiB
Plaintext
---
|
|
title: "Color grade images and footage"
|
|
sidebarTitle: "Color grading"
|
|
description: "Correct exposure and color, shape a look, apply a LUT, and review the result in Studio."
|
|
---
|
|
|
|
Use Color Grading when an image or video needs correction or a deliberate
|
|
visual look. It changes that media element only; text, captions, SVG, and normal
|
|
HTML remain separate layers.
|
|
|
|
<Frame caption="The same source before and after a restrained natural-portrait grade.">
|
|
<img
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/color-grading-before-after-v1.png"
|
|
alt="The same presenter frame before and after a restrained natural portrait grade"
|
|
/>
|
|
</Frame>
|
|
|
|
## Work in this order
|
|
|
|
| Pass | Purpose |
|
|
| --- | --- |
|
|
| Correct | Fix exposure, white balance, contrast, and saturation |
|
|
| Grade | Shape tonal ranges or a selected color |
|
|
| Apply a look | Start from a preset or a compatible `.cube` LUT |
|
|
| Finish | Add restrained detail or film effects |
|
|
|
|
Correct before stylizing. A strong preset cannot rescue clipped highlights,
|
|
unreadable shadows, or the wrong source.
|
|
|
|
## Grade in Studio
|
|
|
|
1. Select an image or video on the canvas, in Layers, or on the timeline.
|
|
2. Open **Color grading** in **Design**.
|
|
3. Start with a preset or small corrections.
|
|
4. Use the scopes and compare control to check the result.
|
|
5. Scrub several moments before judging moving footage.
|
|
|
|
The controls answer different questions:
|
|
|
|
| Control | Use it for |
|
|
| --- | --- |
|
|
| Preset and strength | Establish a starting look |
|
|
| Exposure, contrast, highlights, shadows, white point, black point | Correct brightness and contrast |
|
|
| Warmth, tint, vibrance, saturation | Correct or shape color |
|
|
| Color wheels | Shift shadows, midtones, or highlights |
|
|
| RGB curves | Remap luminance or individual channels |
|
|
| Hue curves | Move, saturate, or brighten a selected hue |
|
|
| HSL selections | Correct pixels inside a hue, saturation, and luma range |
|
|
| Grain, vignette, blur, and effects | Finish or deliberately degrade the image |
|
|
| Custom LUT | Apply a known 3D `.cube` transform |
|
|
|
|
HyperFrames supports up to four ordered HSL selections. They are static
|
|
pixel-value qualifiers, not object tracking, rotoscoping, or spatial masks.
|
|
|
|
Studio scopes are inspection tools:
|
|
|
|
| Scope | Shows |
|
|
| --- | --- |
|
|
| Histogram | Overall dark-to-bright distribution |
|
|
| Waveform | Brightness by horizontal image position |
|
|
| RGB Parade | Channel balance and clipping |
|
|
| Vectorscope | Hue direction and saturation |
|
|
|
|
## Give the agent the visible problem
|
|
|
|
You do not need to prescribe shader values:
|
|
|
|
```text
|
|
The interview looks too dark and slightly cold.
|
|
Keep skin natural, recover the background enough to read, and avoid a filtered look.
|
|
```
|
|
|
|
The agent can inspect the current capability contract and analyze a local
|
|
source before changing it:
|
|
|
|
```bash
|
|
npx hyperframes media-treatment --capabilities --json
|
|
npx hyperframes media-treatment --selector '#interview' --analyze --json
|
|
```
|
|
|
|
For source-sensitive prompts and worked A/B examples, continue to
|
|
[Color grading and film effects](/prompting/color-grading).
|
|
|
|
## Reuse a grade carefully
|
|
|
|
In Studio, use **Copy grade to** for other media in the current file or project.
|
|
Treat the copy as a starting point and inspect each source.
|
|
|
|
Project-wide copy rejects project-relative LUT paths because the same path can
|
|
resolve differently from another composition. Use a project-root path, a data
|
|
URL, or copy only within the current file.
|
|
|
|
## Use LUTs with known intent
|
|
|
|
Import a project-local 3D `.cube` LUT only when you know the look or conversion
|
|
it expects. HyperFrames does not identify camera profiles or apply an automatic
|
|
ACES/OCIO workflow.
|
|
|
|
A creative Rec.709 LUT is the safest normal path. LOG or HDR footage requires a
|
|
known source transform.
|
|
|
|
|
|
## Current limits
|
|
|
|
| Source or workflow | Status |
|
|
| --- | --- |
|
|
| SDR image or video | Supported |
|
|
| 4K SDR media | Supported with higher preview and render cost |
|
|
| iPhone HDR, HLG, or Dolby Vision-style media | Studio can show an SDR preview; native HDR delivery is a separate path |
|
|
| LOG footage | Requires a known matching transform or LUT |
|
|
| Full-scene grade including HTML text | Not supported; grading targets individual media elements |
|
|
| Face or region tracking | Not supported |
|
|
| Remote media | Requires compatible CORS headers |
|
|
| ACES/OCIO finishing | Outside the current browser shader pipeline |
|
|
|
|
Continue to [Media effects](/guides/media-effects) for blur, bloom, retro,
|
|
print, glitch, and art treatments. Use [HDR rendering](/guides/hdr) when the
|
|
final delivery must remain HDR.
|
|
|
|
<Card title="Implement a grade in HTML" icon="code" href="/reference/color-grading">
|
|
Persist a grade, animate supported properties, or isolate a graded region.
|
|
</Card>
|
|
|
|
## Related topics
|
|
|
|
- [Apply media effects](/guides/media-effects)
|
|
- [Use images and video](/guides/video-components)
|
|
- [Deliver an HDR render](/guides/hdr)
|