Image Histogram & Levels
Per-channel RGB and luminance histograms computed on the GPU. Adjust black point, white point, and gamma with live preview.
runs locally — nothing leaves your browser
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.
When to use this
- →Inspecting whether a scientific image, micrograph, or scan uses the full dynamic range
- →Spotting clipping in highlights or shadows after a transform
- →Stretching a low-contrast capture into a publishable image with explicit black/white points
- →Sanity-checking a per-channel cast before feeding an image into downstream analysis
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.
Example use cases
Scientific images
Inspect dynamic range and clipping in a micrograph or telescope capture before publishing.
Photo grading
Stretch a flat capture into a usable image with explicit, repeatable black/white points.
Channel casts
Spot a red or blue cast in a single channel by inspecting its histogram independently.
Image Histogram & Levels
Interactive ToolHow to use
- 1
Pick an image
Drop a JPG, PNG, WebP, or scientific image dump.
- 2
Read the histogram
R, G, B, and luminance distributions render under the preview.
- 3
Adjust black/white/gamma
Apply levels to all channels or just one, and download the result.
Why use this tool?
- 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
Real-time exposure, contrast, saturation, warmth, blur, sharpen, vignette, and grain. GPU-accelerated via WebGPU; nothing uploads.
Sobel edge detection in your browser, GPU-accelerated via WebGPU. Real-time preview, threshold and thickness controls, PNG export.
Invert, shift hue, adjust warmth, brightness, contrast, and saturation. Full-fidelity Canvas API processing — your images never leave your browser.
Popular right now
Format, validate, and minify JSON instantly in your browser. Your data never leaves your device.
Decode JWT tokens and inspect header and payload instantly in your browser. Your tokens never leave your device.
Count words, characters, sentences, and estimate reading time instantly in your browser. No sign-up required.