Adjust image contrast

Increase or reduce image contrast around the browser filter midpoint.

freeworks offlinenothing uploaded
ToolContrast Adjuster
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The percentage becomes factor 1 + percentage ÷ 100 and Canvas applies that contrast filter while redrawing the source. Results can clip to the 8-bit channel range.

  • A neutral setting maps to factor 1.
  • The control changes display contrast, not exposure metadata.

Worked example

Raise contrast
Input
											Input: data:image/png;base64,iVBORw0KGgo=
Contrast: 30
Output
												PNG data URL rendered at 1.3× contrast

When to use this

Photo editors restore punch, UI previews test icon contrast, and graphics lessons compare contrast with brightness.

Edge cases

  • Large positive values clip shadows and highlights.
  • Negative contrast trends channels toward a common midpoint.
  • When Canvas is unavailable, this path leaves the source data URL untouched.

References