⌘ K
image · rgb · histogram · local

Visualise the RGB distribution of any image

Upload a photo and see the per-channel RGB histogram overlaid on a single chart. Spot colour casts, blown highlights and crushed shadows. All on-device.

Image Color Histogram
R avg
—
0–255
G avg
—
0–255
B avg
—
0–255
Pixels
—
no image
input · color
Image file
output · preview
Histogram (R / G / B)
Upload an image to render its histogram.
Quick Start

How to read an RGB histogram

The X axis spans 0 (dark) to 255 (bright). Tall regions mean lots of pixels at that brightness. Compare channels to spot casts.

  1. 01

    Upload an image

    JPEG, PNG, WebP, AVIF — anything the browser can decode.

    Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.

    uploadOKLCHCSS Color 4perceptuallive
    input · colorimage · sRGB
    photo.jpg
    loaded · normalisedOKLCH · ready
  2. 02

    Read shadows / highlights

    Left = dark pixels, right = bright pixels. Spikes at the edges mean clipping.

    Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.

    toneshex · rgb · hslP3gamut-mappedlive
    range · options0–255 · live
    0 …………… 255
    options applied · livelive
  3. 03

    Spot color casts

    If one channel sits notably higher, the image leans that color overall.

    Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.

    castWCAG 2.2APCAAA · AAAcontrast
    cast · convertedblue? · ready
    R=110 G=120 B=145
    converted · liveWCAG-aware
  4. 04

    Tune your edit

    Use the averages to inform white-balance, exposure and curves.

    Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.

    editclipboardCSS varspalette JSONblob
    ok · copiedready · done
    balanced
    shipped · ready to shipsuccess
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsDominant ColorPalette From ImageColor ReplacerPixel PickerColor InfoContrast Checker
Use Cases

When to inspect a histogram

Photography, design QA, content review.

Exposure checks

Confirm shadows and highlights aren't crushed or blown. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Color casts

Spot a blue or magenta tint at a glance. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Editorial QA

Ensure web hero images keep a balanced channel mix. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Image processing

Sanity-check the output of a filter. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick triage

Faster than opening a heavy editor. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Brand consistency

Compare brand photos for tone uniformity. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token
FAQ

Frequently asked questions

Yes — R, G and B are drawn as overlaid curves so you can compare them at a glance.
Not shown here. Use Color Info for perceptual luma of a single color.
0 to 255 — the 8-bit value of that channel.
Spikes at 0 or 255 mean clipping — shadows lost to black or highlights blown to white.
No — sampling and drawing happen entirely in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!