> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Color grade images and footage
> Correct exposure and color, shape a look, apply a LUT, and review the result in Studio.
Use Color Grading on a real image or video when the source needs correction or
a deliberate visual look. Text, captions, SVG, and normal HTML remain separate
layers.
## Work in this order
| Pass | Purpose |
| ------------ | -------------------------------------------------------- |
| Correct | Fix exposure, white balance, contrast, and saturation |
| Grade | Shape shadows, midtones, highlights, or a selected color |
| Apply a look | Start from a preset or a compatible `.cube` LUT |
| Finish | Add restrained grain or vignette |
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 make small corrections with the sliders.
4. Add a compatible `.cube` LUT only when you know what it is meant to do.
5. Hold the compare control to see the original.
6. Scrub several moments before judging moving footage.
The main controls answer different questions:
| Control | Use it for |
| --------------------------------------------------------------------- | ---------------------------------- |
| Preset and strength | Establish a starting look |
| Exposure, contrast, highlights, shadows, white point, and black point | Correct brightness and contrast |
| Warmth, tint, vibrance, and saturation | Correct or shape color |
| Grain and vignette | Finish the image after correction |
| Blur and pixelate | Soften or conceal detail |
| Custom LUT | Apply a known 3D `.cube` transform |
| Compare | Hold to see the untreated source |
Small changes are easier to review and reproduce than many unrelated
adjustments.
## Give the agent the visible problem
You do not need to prescribe shader values:
```text theme={null}
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 analyze a selected local image or video with
`hyperframes media-treatment --analyze`, then apply the same validated
treatment used by Studio. The treatment is stored on the real media element:
```html theme={null}
```
For an explicit CLI edit:
```bash theme={null}
npx hyperframes media-treatment \
--selector '#interview' \
--grading '{"preset":"skin-soft","intensity":0.7}' \
--apply
```
Add `--dry-run --json` to validate and inspect the change without writing it,
or use `--clear` to remove the treatment. Studio and the CLI both persist
`data-color-grading`; preview and render read that same project data.
## Reuse a grade carefully
In Studio, use **Copy grade to** for other media in the current file or project.
Apply it as a starting point, then inspect each source. Two cameras or captures
rarely need exactly the same correction.
Project-wide copy rejects project-relative LUT paths because the same path can
resolve differently from another composition. Use a project-root path, data
URL, or copy within the current file.
## Use LUTs with known intent
Import a project-local 3D `.cube` LUT 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. For LOG or HDR footage, know
the source transform before judging the result.
## Current limits
* Grading applies to individual `![]()
` and `