I built a browser-based Image Color Picker — HEX, RGB, HSL with magnifier lens

#javascript #webdev #design #tools

What I built

Added an Image Color Picker to devnestio.

👉 https://image-color-picker-ebm.pages.dev

Upload any image, hover to preview colors with a magnifier lens, and click to sample. Get the exact HEX, RGB, and HSL values instantly.

Features

Upload PNG, JPG, GIF, WebP, SVG — drag & drop or click
Magnifier lens (8× zoom) follows your cursor for pixel-precise picking
Click any pixel → instant HEX, RGB, HSL output
Individual R, G, B channel values displayed
One-click copy for each color format
Palette history — every picked color saved as a clickable swatch
Click a swatch to restore all color values for that pick
Zero server uploads — image stays in your browser

Color conversions

The tool handles three conversions entirely in JS:

// RGB → HEX
function rgbToHex(r, g, b) {
  return # + [r, g, b].map(v => v.toString(16).padStart(2, 0)).join();
}

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  // ... (standard HSL formula)
}