Skip to content

feat(image): add Image Color Picker - #159

Merged
hateofhades merged 1 commit into
mainfrom
feat/121-image-color-picker
Sep 5, 2026
Merged

feat(image): add Image Color Picker#159
hateofhades merged 1 commit into
mainfrom
feat/121-image-color-picker

Conversation

@hateofhades

@hateofhades hateofhades commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

Closes #121.

The last planned Gizlet of roadmap phase 2. The registry entry flips to available with an agent block, it declares itself flowless, gains a related-Gizlet key, a social card and page copy, and its bench row goes.

What it does

Pick a pixel and read it as HEX, RGB and HSL, each copyable. The picture is drawn onto a canvas in this browser and each pick reads that one pixel back — nothing uploaded, no file written.

  • Pointer or touch: click, or hold and drag to keep picking as you sweep across an area.
  • Keyboard: focus the picture and use the arrow keys — one pixel a step, ten with Shift, stopping at the edge. It opens on the middle pixel, so there is always a colour to move from rather than an empty panel to aim at, and the canvas's accessible name carries the current colour and coordinates as they change.
  • The colours you picked sit underneath, newest first, each copyable by clicking it. A repeat moves rather than duplicating, because picking a colour twice is how somebody checks they picked it. They live in the page and nowhere else — localStorage is untouched, and closing the tab forgets them.

Two decisions in the colour maths

  • A grey has no hue. Every hue produces it once saturation is gone, so it is reported as 0 rather than as whatever the arithmetic left behind — the convention browsers print too.
  • The swatch chooses its own text colour by relative luminance, not lightness. Yellow is the case a lightness threshold gets wrong: bright, but a white label on it is unreadable. That is a unit test rather than a screenshot.

No flow contract, deliberately

Like Image Dimensions, it shows the visitor something and produces nothing another Gizlet could take, so it joins flowlessToolSlugs rather than being given a pass-through contract it does not have.

Checks

pnpm run check, pnpm test (500), pnpm run build and pnpm run test:e2e (119) all pass. New coverage: tests/unit/image-colour.test.ts (hex padding, the wheel's corners, greys, the negative-hue case, hex round-trips, luminance, the history rules) and tests/e2e/image-color-picker.spec.ts, which picks from a four-colour fixture and asserts the exact values, copies to a real clipboard and reads it back, walks the picture with the keyboard alone including the edge stop, and checks a repeat does not duplicate.

Note for whoever merges

One of several image Gizlets cut from main in parallel (#156, #157, #158). They touch the registry, the related-Gizlet map, flowlessToolSlugs and the regenerated gizlets.png; whichever lands last needs a rebase, and the conflicts are additions next to each other.

Screenshot

colour-picker

@hateofhades
hateofhades force-pushed the feat/121-image-color-picker branch from c535b25 to b2bc192 Compare September 5, 2026 19:19
@hateofhades
hateofhades merged commit 56fe746 into main Sep 5, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(image): add Color Picker from Image

1 participant