Skip to content

Application

Color Clipper

When hue need the exact colour.

Drop an image here or click to select

Supports JPG, PNG, GIF, WebP

HEX: #000000
RGB: rgb(0, 0, 0)
RGBA: rgba(0, 0, 0, 1)
HSL: hsl(0, 0%, 0%)
HSV: hsv(0, 0%, 0%)

Click on any color format to copy it

Drag, hover, click a pixel.
Color's copied to your clipboard!

Drop an image, hover any pixel, click once to copy its HEX. Four more formats (RGB, RGBA, HSL, HSV) are ready if you need them.


What is this?

A self‑contained, browser‑side colour inspector that:

  • Accepts JPG, PNG, GIF, WebP.
  • Magnifies 10× under the cursor so you never miss the right pixel.
  • Shows five colour formats in real time.
  • Copies any value to your clipboard with a single click.
  • Stays entirely client‑side—images never leave your machine.

Why might I care?

  • Design QA: Verify that exported assets match the brand palette.
  • Accessibility audits: Check contrast hotspots.
  • Development shortcuts: Skip the screenshot → Photoshop loop.
  • Palette mining: Turn vintage posters into modern UI themes.

How might I use this?

1  Load an image

  • Drop a file anywhere inside the dashed zone, or
  • Click the zone to open a file picker.
Tip: Huge RAWs are fine—the script auto‑scales them to fit your viewport.

2  Hover to inspect

The circular loupe follows your cursor and zooms 10×. A crosshair marks the exact pixel.

3  Click to lock

Click anywhere on the image. The current HEX value is copied straight to your clipboard, and the button flashes a confirmation.

4  Grab any format

Need RGBA for CSS or HSL for Tailwind? Just click the label beside the value—copied.

5  Start over

Load another image and repeat. No refresh needed.