How Four Color Wheels Work in Video Editing—and How I Built Them in the Browser

I built this in an open-source browser video editor

I recently added a complete desktop color-wheels workflow to Timeline Studio, an open-source, local-first video editor that runs in the browser.

• GitHub: https://github.com/MartinDelophy/ai-video-editor
• Live editor: https://video-editor.ai-creator.top

The implementation includes:

• separate wheels for shadows, midtones, highlights, and global offset;
• temperature, tint, and global saturation controls;
• hue, saturation, and luminance controls for every wheel;
• independent keyframes for all 15 grading properties;
• shortest-path hue interpolation;
• the same animated grade in preview, transitions, and final export;
• a desktop-focused interface, while the mobile web editor keeps its simpler speed workflow.

If you have ever opened a professional video editor and wondered why it displays four colorful circles, this article explains what they do. The second half looks at the engineering problems behind implementing them in a browser.

What is a color wheel?

A color wheel is a two-dimensional controller for expressing both a color direction and an adjustment strength.

• Moving the control point toward red adds a red bias.
• Moving it toward blue adds a blue bias.
• Moving farther from the center increases the strength.
• Leaving it in the center adds no directional color bias.

This is often more intuitive than controlling red, green, and blue with three unrelated sliders. If an image feels too cold, you can move toward orange. If it feels too warm, you can move toward blue.

In a useful grading tool, however, the wheel does not simply add the same color to every pixel. A frame contains dark, medium, and bright regions, and they usually need different treatment. That is why professional editors provide multiple wheels.

Why are there four wheels?

One frame may contain almost-black hair, naturally exposed skin, a white shirt, and a bright window at the same time.

With only one global color control, making the dark areas cooler would also make the skin and window cooler. Color-grading tools therefore divide their influence primarily by luminance range.

Wheel	Main area of influence
Shadows	Dark clothing, hair, night backgrounds, and unlit areas
Midtones	Skin, products, walls, and most normally exposed subjects
Highlights	Windows, sky, lamps, reflections, and bright surfaces
Offset	The overall color balance of the frame

Shadows

Moving the shadows slightly toward blue or cyan can make a shot feel colder and deeper. This is one ingredient commonly associated with a cinematic look.

It is also easy to overdo. Excessive adjustment can turn black areas visibly blue, damage natural hair color, and make low-light regions look dirty or posterized. Subtle adjustments tend to work better than large, obvious movements.

Midtones

Midtones often contain the most important part of the image: a person's skin or the main product.

If a face looks pale, moving the midtones slightly toward a warm color may help. Pushing too far can make skin yellow or red and contaminate neutral clothing and backgrounds.

A safer order of operations is:

1. Correct exposure.
2. Correct white balance.
3. Check whether skin and neutral objects look natural.
4. Use the midtone wheel for a small creative adjustment.

A color wheel is excellent for refinement, but it should not hide a fundamentally incorrect exposure or white balance.

Highlights

Highlights affect bright areas such as sky, windows, lamps, reflections, white clothing, and the lit side of a face.

Moving highlights toward yellow or orange can strengthen the feeling of sunlight or sunset. Moving them toward blue can create a colder night or technology-oriented look.

A frequent creative choice is to keep shadows slightly cool and highlights slightly warm. This creates color separation and additional depth. It does not mean that every video should use an aggressive teal-and-orange preset. Interviews, food, products, and natural scenes all have different requirements for color accuracy.

Offset

Offset affects the whole frame rather than a single luminance range.

It is useful when:

• the entire clip has a green cast;
• a shot is globally too cold or too warm;
• several cameras need a common starting balance;
• you want to establish a gentle global direction before regional adjustments.

If only the shadows are green while the highlights are correct, a global offset is the wrong tool. The important question is not only which color should change? but also which luminance range should change?

What is the curved control beside the wheel?

Many color-wheel interfaces place a curved control next to the circle. It usually controls luminance for that range.

A complete wheel therefore represents three important values:

• Hue: which color direction to use;
• Saturation: how strong that color direction should be;
• Luminance: whether the affected range should become brighter or darker.

The disc handles hue and saturation, while the curved control changes luminance. Together they provide much more useful control than a decorative color picker.

Color wheels are not the same as filters

A filter is usually a predefined group of adjustments. It is excellent for reaching a recognizable style quickly.

A color wheel is a manual correction and grading tool.

Filter	Color wheel
Produces a quick result	Provides detailed control
Hides many values in a preset	Exposes luminance-specific decisions
Can impose the same style on every source	Can preserve the character of each source
Works well for rapid exploration	Works well for correction and refinement

They can also work together. A user can apply a filter as a starting point and then repair skin, shadows, or highlights with the wheels.

Video color needs keyframes

A still image can use one set of parameters. Video changes over time.

A subject may walk from indoors to sunlight. Stage lighting may change from blue to red. A memory sequence may gradually lose saturation. A sunset shot may become warmer as it progresses.

Keyframes allow a clip to store different grading states at different times:

• 0s: neutral color;
• 2s: midtones begin moving warmer;
• 4s: highlights gain a small yellow bias;
• 6s: global saturation decreases.

The editor interpolates between these states. Color grading stops being a fixed filter and becomes an animation that follows the content.

In Timeline Studio, the keyframeable properties are:

• temperature, tint, and global saturation;
• hue, saturation, and luminance for shadows;
• hue, saturation, and luminance for midtones;
• hue, saturation, and luminance for highlights;
• hue, saturation, and luminance for offset.

That produces 15 independently keyframeable properties.

Ordinary interpolation breaks hue

Hue is circular, not linear.

For example, 350° and 10° are only 20 degrees apart on a color wheel. Ordinary numeric interpolation may travel from 350° through 180° to 10°, passing through many unrelated colors.

The desired transition crosses zero:

350° -> 0° -> 10°

A shortest-path interpolation can be implemented like this:

function interpolateHue(currentHue, nextHue, progress) {
  const delta = ((nextHue - currentHue + 540) % 360) - 180;
  return (currentHue + delta * progress + 360) % 360;
}

progress ranges from 0 to 1. The normalized delta stays between -180 and 180, so the transition follows the shorter direction around the wheel.

This is a small mathematical detail with a very visible result. Without it, animated color may unexpectedly cycle through green, cyan, or purple between two nearby red hues.

A practical data model

A simplified base grade can be represented as follows:

const colorGrade = {
  temperature: 0,
  tint: 0,
  saturation: 0,
  shadows:    { hue: 0, saturation: 0, luminance: 0 },
  midtones:   { hue: 0, saturation: 0, luminance: 0 },
  highlights: { hue: 0, saturation: 0, luminance: 0 },
  offset:     { hue: 0, saturation: 0, luminance: 0 },
};

Each animated property can use a path such as:

colorGrade.temperature
colorGrade.shadows.hue
colorGrade.highlights.luminance

At render time, the resolver needs to:

1. Find an exact keyframe at the current time if one exists.
2. Otherwise find the nearest previous and next values for the property.
3. Interpolate ordinary numeric properties linearly.
4. Interpolate hue using the shortest circular path.
5. Use the base grade before the first keyframe or when a property has no keyframes.
6. Normalize and clamp the resolved values.

Property-level keyframes are important. A user may want to animate highlight luminance without freezing every other color property into the same keyframe object.

Preview and export must use the same resolver

Drawing attractive wheels is only the UI portion of the feature. A video editor is not correct unless the final export matches the editor preview.

If preview and export use separate color logic, users may encounter:

• different colors after export;
• color jumps during transitions;
• keyframes that work in the editor but disappear from the final video;
• different results for images and video clips.

Timeline Studio resolves the grade from the clip's keyframes and local time, then sends that result through the preview, transition, and offline export paths.

The next clip in a transition must resolve its own local grading state as well. Otherwise the outgoing clip may be correct while the incoming clip temporarily displays a static or incorrect grade.

This shared resolver was one of the most important parts of the implementation. The wheels are not decorative UI; they are editable parameters that reach the final rendered artifact.

Filter thumbnails should use the user's source

Another small but important detail is filter preview imagery.

A filter grid should not replace the user's image with an unrelated stock thumbnail. For an image clip, every filter card can reuse the selected image. For a video clip, the editor can reuse an extracted frame from the selected clip.

Only the preview filter should change. The source image must remain the same across cards, so users can compare color treatments rather than compare different subjects.

Why the full UI is desktop-only

Four wheels, basic controls, value readouts, reset actions, and 15 keyframe buttons form a dense interface.

Desktop users have enough space and a precise pointer. Copying the same layout directly to mobile web would create tiny wheels, accidental touches, an extremely long inspector, and competition with the timeline for screen space.

For this release, Timeline Studio exposes the complete color-wheels workflow on desktop. Mobile web does not show the wheels and keeps the more focused video-speed workflow.

Feature consistency does not always require identical UI on every device. The interface should reflect the precision and space available on each platform.

A simple grading order for beginners

If you are new to color wheels, this order is a useful starting point:

1. Disable creative filters and inspect the original source.
2. Correct temperature and tint.
3. Check exposure and preserve useful shadow and highlight detail.
4. Inspect midtones, especially skin or the main product.
5. Add subtle separation to shadows and highlights.
6. Use offset only when the whole frame needs a global correction.
7. Toggle the grade on and off frequently because human vision adapts quickly.
8. Add keyframes when lighting changes over time instead of forcing one static grade onto the whole clip.

Closing thoughts

The four wheels can be remembered simply:

• Shadows: dark regions;
• Midtones: subjects and skin;
• Highlights: bright regions and the character of light;
• Offset: the entire frame.

Good grading is rarely about pushing every control to a dramatic value. It usually comes from several small, intentional adjustments that preserve the identity of the footage while supporting its mood.

The complete implementation is open source. You can inspect the UI, property keyframes, shortest-path hue interpolation, preview composition, transition handling, and export integration in the repository:

• GitHub: https://github.com/MartinDelophy/ai-video-editor
• Live editor: https://video-editor.ai-creator.top

If browser-based video editing, React, WebCodecs, local AI, or deterministic media export interests you, issues and pull requests are welcome. If the project is useful, a GitHub star also helps more developers discover it.