Soorkie's ColorGrader

Overview

ColorGrader edits images non-destructively. You stack layers — each one either an Adjustments layer, a LUT layer, or a Blur layer — and every layer can be masked, given an opacity, toggled on/off, and reordered. Nothing is baked into the image until you Export.

All processing happens locally in your browser. Your images are never uploaded anywhere.

Quick start

1. Load an image. Click Load image in the toolbar, or drag & drop a file onto the canvas.
2. Add a layer. In the left Layers panel click Add and pick Adjustments, LUT, or Blur.
3. Edit it. Select the layer; its controls appear in the right Properties panel. Adjustments update the image live.
4. Refine with a mask (optional). Use the mask tools to limit the layer to part of the image.
5. Stack more layers to build the look, then Export to save a PNG.

Interface tour

Layers

Every edit lives on a layer so you can tweak or remove it at any time.

Layer types

• Adjustments — tone & color: brightness, contrast, saturation, Color Mixer (HSL), Levels, Curves, and Color Balance.
• LUT — apply a .cube look-up table from the built-in library or your own file.
• Blur — gaussian, box, or bokeh blur, maskable for selective focus effects.

Working with layers

• Select a layer to edit it in the Properties panel.
• Enable/disable with the layer's checkbox to compare with and without.
• Opacity — every layer has an opacity slider to blend its effect.
• Delete — select a layer and press Delete or Backspace (when no input is focused).

Masking

A mask restricts a layer to part of the image. White = full effect, black = no effect, grays = partial. Pick a Mask Tool in the Properties panel:

• Feather softens the mask edge for smooth transitions.
• Brush Size and Hardness appear when the brush or eraser is active.
• Mask Actions — Fill, Clear, and Invert the whole mask.
• Show Mask Overlay visualizes the current mask over the image.

Auto (AI) masks

Use Auto FG / Auto BG to isolate the foreground subject or background automatically. Choose a segmentation model under Auto Mask Model (faster selfie models or more accurate BodyPix models, which download separately) and tune the Auto Mask Threshold for a tighter or looser selection.

Basic tone & color

On an Adjustments layer, the top sliders cover the essentials:

• Brightness — overall lightness (−100…100).
• Contrast — spread between shadows and highlights (−100…100).
• Saturation — global color intensity (−100…100).

Color Mixer (HSL)

Hue-selective color control across eight bands — Red, Orange, Yellow, Green, Aqua, Blue, Purple, Magenta. Unlike a global saturation slider, these only affect pixels that already belong to a color band, so pushing “Green Saturation” makes the greens more vivid without disturbing skin tones or skies.

The panel is split into three stacked sections, each with one vertical slider per band:

• Saturation — make a color range more/less vivid.
• Hue — shift a color range toward its neighbors (e.g. push aqua toward blue).
• Lightness — brighten or darken a color range.

Levels

Levels remap the tonal range per channel. Use the channel tabs (RGB / R / G / B) to target the composite or a single channel.

• In — a dual-knob slider. The left knob is the input black point, the right knob is the input white point. Pulling them inward increases contrast by clipping the darkest/brightest input values.
• Gamma — midtone brightness (values below 1 darken, above 1 brighten) without moving black or white.
• Out Blk / Out Wht — the output black and white points. Raising Out Blk or lowering Out Wht reduces contrast (a faded / matte look).

Curves

The Curves editor gives you a smooth tone transfer function per channel. The horizontal axis is input; the vertical axis is output. The diagonal line is “no change”.

Using the editor

• Add a point — click anywhere on the curve area.
• Move a point — drag it. The curve interpolates smoothly (monotone cubic) so it never overshoots between points.
• Remove a point — drag an interior point far off the top or bottom of the graph. The two endpoints can't be removed (they only move vertically).
• Channels — the RGB tab affects overall brightness/ contrast; the R/G/B tabs tint specific tonal ranges.
• Reset Curve returns the current channel to a straight line.

Color Balance

Three-way color balance splits the image into Shadows, Midtones, and Highlights, each with Cyan–Red, Magenta–Green, and Yellow–Blue sliders. This is ideal for cinematic grading — e.g. teal shadows with warm highlights (the “teal & orange” look).

These sections are collapsed by default; expand the range you want to push.

LUTs

A LUT (look-up table) applies a pre-made color transform. On a LUT layer:

• Pick a look from the built-in library thumbnails.
• Click + File to import your own .cube LUT.
• Blend the strength with the layer Opacity slider, and confine it with a mask if needed.

Blur

A Blur layer softens the image and is fully maskable for selective focus, background separation, or dreamy glows.

• Gaussian — smooth, natural softening.
• Box — faster, flatter blur.
• Bokeh — highlight-blooming blur that mimics lens defocus. Tune Highlight Threshold (which pixels bloom) and Highlight Boost (how strongly).

The blur radius scales with the mask and opacity, so a soft-edged mask gives a natural falloff between sharp and blurred areas.

Scopes

Two live scopes float at the top-right of the canvas and update as you grade.

Histogram

Shows the distribution of tones. Modes: RGB (per-channel), Luma (brightness), and All. Watch the edges to avoid clipping shadows (left) or highlights (right).

Waveform

Plots pixel values by horizontal position. Modes:

• Parade — Red, Green, and Blue side by side; the go-to view for balancing color and neutralizing casts.
• RGB — channels overlaid.
• Luma — brightness only.

Each scope has a × to hide it; a small button reappears to bring it back.

Zoom, pan & shortcuts

• Zoom — scroll wheel over the canvas, or the Out/In buttons. Click the percentage or Fit to reset.
• Pan — hold Space and drag.

Exporting

Click Export in the toolbar to render the full-resolution result and save it as a PNG. A progress bar shows during export for large images. All layers, masks, and adjustments are applied in order.

Example workflows

Cinematic teal & orange

1. Add an Adjustments layer.
2. In Color Balance → Shadows, push toward Cyan/Blue.
3. In Highlights, push toward Red/Yellow.
4. Add a gentle S-curve on the Curves RGB channel for contrast.

Punchy landscape

1. Use Levels to set clean black/white points.
2. In Color Mixer, raise Green and Blue saturation, and drop Blue lightness for deeper skies.
3. Add a masked Linear gradient to darken the sky only.

Portrait with soft background

1. Add a Blur layer (bokeh).
2. Click Auto BG to mask the background.
3. Lower opacity to taste so the separation looks natural.

FAQ & troubleshooting

Is my image uploaded anywhere?

No. All rendering happens locally in your browser.

GPU vs. CPU rendering

ColorGrader uses WebGPU when available for fast, live grading, and automatically falls back to a CPU worker otherwise. The result is identical; only speed differs.

A dual-knob “In” slider knob won't move

The two knobs can't cross — the black point always stays below the white point. If a knob seems stuck, move the other one to give it room.

My adjustment isn't visible

Check that the layer is enabled, its opacity is up, and its mask isn't hiding the effect. Toggle Show Mask Overlay to verify.

Auto mask does nothing

BodyPix models download on first use and are person-focused. Try a selfie model for speed, or adjust the threshold.