Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. All processing happens entirely in your browser - your files never leave your device. No uploads, no accounts, complete privacy.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Image Processing
  3. Image Color Grader
Add to favorites

Image Color Grader

Professional color grading: adjust brightness, contrast, saturation, hue, shadows, highlights, and temperature. Create cinematic looks with color curves.

Color grading goes beyond a single one-click filter. This tool gives you separate sliders for brightness, contrast, saturation, hue shift, temperature (warm/cool), tint (green/magenta), vibrance, and shadow and highlight lifts, so you can dial in a specific mood or correct a color cast. Whether you are going for a cinematic look, a vintage film feel, or balanced natural color, you can start from one of 12 built-in presets and refine from there with a live before/after compare.

Edits stay in your browserMore image processingJump to full guide

Initializing in your browser…

You might also like

Image Color Palette Extractor

Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.

Image Batch Processor

Process multiple images at once with consistent settings. Apply resize, format conversion, compression, and filters to bulk images efficiently.

Image to Base64

Convert images to Base64 encoded strings for embedding in CSS, HTML, or JavaScript. Multiple output formats available.

Image Color Grader: a worked example

A video thumbnail needs a cool cinematic grade to match the channel style.

Input

frame.jpg · Cinematic preset, then temperature −10, shadows +10
Image Color Grader produces

Output

A colour-graded frame with cooled, lifted shadows and muted saturation

The Cinematic preset loads contrast, saturation, temperature and a shadow lift you then fine-tune by slider. The luminance-masked shadow and highlight controls shift each tonal range separately, which a single filter cannot.

What is Color Grading?

Color grading goes beyond a single one-click filter. This tool gives you separate sliders for brightness, contrast, saturation, hue shift, temperature (warm/cool), tint (green/magenta), vibrance, and shadow and highlight lifts, so you can dial in a specific mood or correct a color cast. Whether you are going for a cinematic look, a vintage film feel, or balanced natural color, you can start from one of 12 built-in presets and refine from there with a live before/after compare.

How to use

  1. 1Upload your image
  2. 2Start from a preset (Cinematic, Vintage, Warm, and others) or begin from Natural
  3. 3Adjust temperature, tint, saturation, and vibrance
  4. 4Lift or pull down shadows and highlights, and shift hue if needed
  5. 5Use Compare Mode to check before/after, then download

Where this helps

  • Cinematic look

    Apply the Cinematic or Dramatic preset to give photos and video stills a film-inspired mood, then fine-tune.

  • Correcting white balance

    Fix photos shot under the wrong lighting by adjusting the temperature and tint sliders.

  • Consistent visual branding

    Apply the same preset and slider settings across a set of images for a cohesive aesthetic.

  • Creative photography

    Experiment with hue shifts, vibrance, and the shadow/highlight lifts for stylized results.

Key features

  • Brightness, contrast, saturation, and hue-shift controls
  • Temperature (warm/cool) and tint (green/magenta) sliders
  • Vibrance adjustment plus separate shadow and highlight lifts
  • 12 built-in presets: Natural, Vibrant, Cinematic, Vintage, Warm, Cool, Dramatic, Moody, Faded, B&W, Golden Hour, Romantic
  • Live before/after compare mode
  • Exports as PNG

Tips & best practices

  • Shadows and Highlights are tonal-range targeted: because they are masked by (1-lum)^2 and lum^2, drag Shadows to recover dark areas without washing out highlights, and vice versa.
  • Prefer Vibrance over Saturation when colors are already partly saturated: its effect shrinks as saturation moves from neutral, so it lifts muted tones while protecting already-vivid ones.
  • Pick a preset (e.g. Cinematic or Golden Hour) as a starting point, then fine-tune the individual sliders the preset loaded rather than starting from scratch.
  • Use Compare mode's draggable wipe to check before/after, since the graded preview updates live on every slider move.

Examples

  • Black and white conversion

    Apply the B&W preset (saturation 0, contrast 1.2) to fully desaturate, or just drag the Saturation slider to 0% for a grayscale result while keeping control of contrast and highlights.

  • Warm cinematic look

    Use the Cinematic preset (contrast 1.2, saturation 0.85, temperature -10, lifted shadows) for a teal-leaning film grade, or the Golden Hour preset (temperature +35, hue +15, vibrance +25) for a warm sunset wash.

How it works

The Image Color Grader applies nine adjustments per pixel using a custom canvas loop (no external imaging library), and the order it runs them in determines the result: temperature first, then tint, then shadows and highlights, then brightness, then contrast, then saturation/vibrance, and finally a hue shift. Temperature pushes red up and blue down by the slider value times 0.8 (range -50 to +50, so warm adds amber, cool adds blue); tint moves green against red/blue (green - tint*0.5, red and blue + tint*0.3) to correct green/magenta casts. Shadows and highlights are luminance-masked rather than global: the tool computes Rec. 601 luminance (0.299R + 0.587G + 0.114B), then weights the shadow lift by (1 - lum)^2 and the highlight push by lum^2, so dragging Shadows only opens up the darks and Highlights only touches the brights instead of shifting the whole image.

Brightness and contrast use the standard formulas you would expect from a grader: brightness is a simple multiply (0.5 to 1.5, shown as -50% to +50%), and contrast uses the classic factor (259*(contrast*255+255)) / (255*(259-contrast*255)) pivoting around mid-gray 128. Saturation (0 to 2, i.e. 0% grayscale to 200% vivid) and Vibrance are combined into one mix factor, satMix = saturation + (vibrance/100)*(1 - |saturation - 1|), which is why Vibrance has a gentler, protective effect: its contribution shrinks as saturation moves away from neutral, so it lifts muted colors more than already-saturated ones. The Hue Shift slider (-180 to +180 degrees) does a real RGB-to-HSL conversion, rotates the hue by hue/360, and converts back, so it rotates colors around the wheel rather than just biasing channels. Output is always a PNG written with canvas.toBlob at quality 1.0 and saved as {originalname}-graded.png.

Twelve one-click presets cover common looks, each a fixed combination of all nine values: Natural (neutral), Vibrant (saturation 1.3, vibrance +30), Cinematic (contrast 1.2, saturation 0.85, cool -10 temperature, lifted shadows), Vintage (warm +15, hue +10, lower contrast), Warm, Cool, Dramatic (contrast 1.35, crushed shadows -15), Moody, Faded (raised shadows +25, low saturation 0.7), B&W (saturation 0), Golden Hour (temperature +35, hue +15), and Romantic. A preset just loads those slider values, so you can pick a starting point and then fine-tune any control. The interface re-renders a live graded preview on every slider change and offers a Compare mode with a draggable clip-path slider that wipes between the original and graded versions side by side. All decoding, the per-pixel math, and PNG encoding happen locally in the browser canvas; the image is never uploaded.

Frequently asked questions

What is the difference between color grading and filters?

A filter applies one fixed effect. Here you get individual sliders - temperature, tint, saturation, vibrance, hue, plus shadow and highlight lifts - so you can shape the look precisely rather than accept a single preset as-is.

Does it have tone curves?

No. Tonal control is via brightness, contrast, and dedicated shadow and highlight lift sliders rather than a draggable curve. For curve editing you would need a dedicated photo editor.

Are there presets I can start from?

Yes. There are 12 presets (Natural, Vibrant, Cinematic, Vintage, Warm, Cool, Dramatic, Moody, Faded, B&W, Golden Hour, Romantic) that load slider values you can then adjust.

Does this support RAW files?

The tool works with standard web image formats (JPG, PNG, WebP). For RAW processing, you would need dedicated software like Lightroom.

Related tools and how they differ

  • Image Filters: Stackable creative effects and kernel filters: grayscale, sepia, invert, blur, sharpen, vignette, glitch, plus Instagram-style preset chains. Use it for stylized looks, not precise color correction.

Private by design

Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.