Dev.to WebDev ๐Ÿ›  Dev ๐Ÿ‘ 0 ๐Ÿ“– 4 min read

Sample Colours From a Photo in the Browser: Build a Palette Without Uploading It

The palette is the point Extracting the colours out of an image is a job that usually comes with a trade: you upload the picture, and the picture goes somewhere. A logo goes to a server you did not choose, a client moc

The palette is the point

Extracting the colours out of an image is a job that usually comes with a trade: you upload the picture, and the picture goes somewhere. A logo goes to a server you did not choose, a client mockup goes to a company whose privacy page you have never read.

The Colour Studio's Image tab does it the other way round. The image is decoded in the tab, you click a pixel to read its colour, and the tab builds a small palette of the dominant colours for you. The panel heading calls it Image sampler, and the page is blunt about where the work happens: "Pick, convert, compare and sample colours on this device. Your values and selected images stay in this browser tab."

Open it here: the Colour Studio

The three steps in the tab

The Colour Studio carries four tool tabs on one page: Picker, Contrast, Palettes, Image. The Image tab is laid out as three numbered steps, and the wording of each is worth reading, because it tells you what the tool does and does not do.

01 Image - "No image yet. Drop one on the stage or browse for it." The drop area spells out the formats and the ceiling: "PNG, JPEG or WebP ยท up to 20 MiB and 16 megapixels", with a Browse files button underneath and the reassurance "The image stays in this tab."

02 Sample - "Click the image to sample a pixel." The keyboard route is documented too: "Focus it and use โ† โ†’ โ†‘ โ†“ to move, Shift for 10 px." The empty-state line says what you get back: "The colour under your click appears here as HEX, RGB and HSL."

03 Image palette - "Up to six dominant colours, each one a copy button."

Underneath the three steps the page says "Nothing leaves this tab.", and there are two controls on the stage: Copy sample and Clear image.

What a real run gives you

I loaded a test PNG - a 64 ร— 64 image with four blocks of flat colour - into the tab. The stage reported it as "probe-colour.png" and "64 ร— 64 px ยท decoded in this tab", and the status line under the image read "Ready ยท 64 ร— 64 px. Image stays in this tab."

The palette panel then came back with:

  • "4 colours"
  • #14A05A
  • #1E78DC
  • #DC283C
  • #FAC828

Six was the ceiling, four was what that image actually contained, and the four hex values are the four colours that were in the file. That is the behaviour you care about: the palette is computed from your image, not from a stock palette list.

Each hex is a button, and the panel describes what those buttons are for: "Up to six dominant colours, each one a copy button." Clicking one does not navigate you away from the image - the stage stays loaded, the sampled colour stays put, and Clear image is there when you want the stage back to "No image yet".

Why sample a pixel when you already have a palette

They answer different questions, and the tab has a place for each.

  • The palette tells you what the image is made of. Six swatches is enough to rebuild the colour scheme of a logo, a landing page hero or a set of product photos.
  • The pixel sample tells you what is under your cursor right now. Click a specific spot in a photograph and you get that exact colour as HEX, RGB and HSL - which is what you want when a mockup uses a gradient and you need to match a single point in it.

The arrow-key nudge ("Shift for 10 px") exists because a 16-megapixel photo is a lot of surface to hit with a mouse.

Two honest limits

  • Six colours, not a full histogram. The palette is deliberately small - the dominant colours, capped at six. It is a starting palette, not every colour in the file.
  • The sample is the pixel, not the average. Clicking gives you the colour of that pixel. On a photograph with noise or a soft edge, two nearby pixels can read differently. The palette is the steadier answer; the click is for the exact spot you care about.

Where the work happens

OnePassApps is one option here, and I work on OnePassApps - full disclosure, as it should be. The Colour Studio is where this lives, and it runs inside the tab. The image is decoded there ("decoded in this tab"), the sampled values and the palette stay in that browser tab, and the page says so plainly with "Nothing leaves this tab." The Studio page also states "Processing stays in the current browser tab" and "No account is required for browser-local processing."

The Standard plan is currently free during a promotional period: $0 / month, 100,000 credits every 30 days, no end date set and no card required, with no automatic paid subscription.

The short version

Drop in a PNG, JPEG or WebP (up to 20 MiB and 16 megapixels), click the pixels you care about to read them as HEX, RGB and HSL, and take the palette of up to six dominant colours that the tab builds for you. The image never leaves the browser tab.

Disclosure: I work on OnePassApps. The behaviour above is what I can verify today, read off the live studio page and from an image-sampling run I made myself. Limits may change. How the browser-local tools work in general is written up in the app's own guides: app.onepassapps.com/guides.

๐Ÿ“ฐ Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes โ€” full credit and traffic to the original publisher.