Skip to content
Utilora

Image Histogram & Levels

Image Tools

Drop an image or click to browse

JPG, PNG, WebP - runs locally, nothing uploads

What is Image Histogram & Levels?

WebGPU Image Histogram & Levels gives researchers and photographers a fast, browser-native way to inspect tonal distribution and adjust black point, white point, and gamma. The histogram is computed with a WebGPU compute shader using atomic counters - fast even on full-resolution images. The levels controls re-apply with each slider drag, so you can see exactly how a tonal stretch affects the distribution before exporting.

How it works

A WebGPU compute shader runs one workgroup per 8×8 tile of the input texture, sampling each pixel and atomically incrementing four 256-bin counters: R, G, B, and luminance. The result buffer is mapped back to JavaScript, rendered into an SVG-style filled curve on a 2D canvas. The levels fragment shader applies (v − black) / (white − black), gamma-corrects with pow(·, 1/gamma), and clamps; a channel selector decides whether the curve runs on all three channels or just one.

Features & Benefits

  • Per-channel histogram computed on the GPU using atomic counters in a compute shader
  • Levels adjustment (black point, white point, gamma) in a single fragment pass
  • Choose to apply the levels curve to RGB jointly or to a single channel
  • Visual sanity-check for scientific images, micrographs, or scans before downstream processing

Frequently Asked Questions

Why a compute shader instead of CPU code?

A 12-megapixel image is 12M pixels. Counting bins on the CPU takes hundreds of milliseconds; the compute shader does it in a frame.

Is luminance Rec. 709?

Yes. The luminance histogram uses the standard Rec. 709 weights (0.2126, 0.7152, 0.0722).

Can I undo the levels adjustment?

Reset returns the sliders to defaults (0, 1, 1). The original image is kept in memory so re-rendering is instant.

Is the image uploaded?

No. All GPU work happens on your device; nothing is sent off-device.

Related Tools

Photo Filter Studio - Real-Time, GPU-Accelerated

Real-time exposure, contrast, saturation, warmth, blur, sharpen, vignette, and grain. GPU-accelerated via WebGPU; nothing uploads.

Edge Detect - Sobel, Real-Time

Sobel edge detection in your browser, GPU-accelerated via WebGPU. Real-time preview, threshold and thickness controls, PNG export.

Image Color Transform

Invert, shift hue, adjust warmth, brightness, contrast, and saturation. Full-fidelity Canvas API processing - your images never leave your browser.

Popular Utilities

JSON Formatter & Validator

Format, validate, and minify JSON instantly in your browser. Your data never leaves your device.

JWT Decoder

Decode JWT tokens and inspect header and payload instantly in your browser. Your tokens never leave your device.

Word Counter

Count words, characters, sentences, and estimate reading time instantly in your browser. No sign-up required.

Learn More & Guides

Sobel Edge Detection on the GPU: A WebGPU Worked Example

Edge detection is a textbook image-processing problem with a textbook solution. Implementing it on the GPU in WebGPU is also textbook - but the texts haven't been written yet. Here's the worked example.

9 min read

Image Histograms and Levels: What Photoshop Has Been Doing Since 1990

The histogram is the single most useful diagnostic in image processing. The levels adjustment is the matching tool that lets you do something about what the histogram tells you. Both finally run in real time in the browser.

10 min read

Real-Time Photo Finishing in a Browser Tab: A Multi-Pass WebGPU Pipeline

A photo finisher needs nine sliders to do real work: exposure, contrast, saturation, warmth, gamma, blur, sharpen, vignette, grain. Doing all nine in real time used to require a desktop app. Here's how to do it in a tab.

10 min read

Pixel Sort: How Glitch Art Became an Algorithm

Pixel sort is one of the few generative-art techniques with a clean algorithmic statement: sort runs of pixels by some key. The visual signature - smeared streaks broken by sharp untouched regions - comes from one tiny detail: the threshold.

9 min read