Color Picker from Image
Upload a picture, hover with a high-fidelity zoom magnifier, and click to extract exact color codes locally in your browser.
Drag & Drop Image Here
Supports JPEG, PNG, WebP, SVG, GIF (No server uploads)
Selected Color
HEX Color
#6450fa
How a Browser-Based Color Eyedropper Works
A digital image is composed of a matrix of colored pixels, where each pixel has Red, Green, Blue, and Alpha (transparency) channels. To extract the exact color values of a specific pixel, a color picker renders the image onto a local memory canvas and registers coordinates. Traditional online color pickers require files to upload to a backend server to retrieve color arrays, compromising your privacy.
Secure Local Zoom Magnification
TinyImagefy processes your photos entirely client-side inside your browser sandbox. When you hover your cursor over the image preview, the script reads coordinates relative to the underlying canvas, extracts the 2D pixel array, and draws an expanded circle layout representing the surrounding pixels. This creates a virtual magnifying lens that highlights the exact pixel under your cursor. Clicking reads the canvas color data (ctx.getImageData) instantly, outputting standard color values.
Understanding Color Value Codes
- HEX Code: A six-character hexadecimal representation of RGB values (e.g. #FFFFFF for white). It is the standard format used in HTML, CSS, and UI templates.
- RGB Format: Indicates the intensity of Red, Green, and Blue channels as an integer between 0 and 255 (e.g. rgb(255, 255, 255)).
- HSL Coordinates: Measures color values in Hue (0 to 360 degrees), Saturation (0% to 100%), and Lightness (0% to 100%). HSL is highly intuitive for adjusting brightness and shades in custom stylesheets.