Image Color Picker VS JavaScript Tutorial

Image Color Picker's answer

It reports APCA alongside WCAG 2. Almost every other colour tool gives you the WCAG ratio and stops there — but WCAG 2 ignores text size and weight, so it passes combinations that are genuinely hard to read and fails ones that are perfectly fine. APCA, the perceptual model drafted for WCAG 3, accounts for both. The two disagree often enough that seeing only one of them is how bad colour decisions get signed off.

Two other things are unusual. Palettes are quantised in OKLab rather than raw RGB, so visually distinct blues don't collapse into a single swatch. And the typographic data is measured directly from 54 open-source font binaries — x-height, cap-height and variable weight axes read out of the files themselves, not estimated.

Image Color Picker's answer

Most colour pickers answer "what colour is this pixel". This one also answers "can anyone actually read text in it", which is the question that decides whether you can use the colour at all.

Beyond that: it's free with no account and no paid tier, images you open from your device are processed in your browser and never uploaded, and it works as a reference rather than only a tool — 4,336 named colours with conversions, shade ramps and readable-background pairings, plus brand colour codes and colour families A to Z.

Nothing is gated. There is no sign-up wall between you and a hex code.

Image Color Picker's answer

Front-end developers and web designers choosing colours that have to survive an accessibility review — people who need to know whether a given grey passes on white, and at what text size.

Second, anyone who needs a colour out of an image quickly: a logo, a screenshot, a photograph, without opening an image editor to get it.

Third, students and people learning colour theory, who use the named-colour reference, the colour wheel and the shade ramps rather than the picker itself.

Image Color Picker's answer

Server side: custom PHP with no framework, running on OpenLiteSpeed via CyberPanel, behind Cloudflare.

Client side: vanilla JavaScript, no framework — no React, Vue or jQuery. The Canvas API does the pixel reading, which is why images opened from your device never need to reach a server. Bootstrap is used for CSS only; its JavaScript was removed.

The colour maths is written from scratch rather than pulled from a library: WCAG 2 relative luminance, APCA-W3 0.1.9 implemented to the published constants, OKLab conversion, and median-cut quantisation for palette extraction.

The browser extension is Manifest V3 for both Chrome and Firefox, sharing the same colour library as the site.

Image Color Picker's answer

It started as a single tool: open an image, click a pixel, get the hex code.

The contrast checker came later, and putting APCA next to WCAG 2 changed what the site was for. It stopped being a colour picker that happened to check contrast, and became a tool about whether a colour is usable at all.

Since then it has grown into a reference as much as a utility — 4,336 named colours, brand colour codes, shade and tint ramps, OKLab palette extraction, and typographic metrics measured from font binaries. A browser extension now brings the picker and the contrast checker onto any page.