Click to sample a pixel (eyedropper)
This top-down 2D companion to the 3D Colour Contrast Illusions sim isolates one classic effect — simultaneous colour contrast — and adds a genuine measurement tool instead of a scripted reveal. A single RGB colour, set with the Red, Green and Blue sliders, is painted identically into a patch on top of 2 to 5 backgrounds whose hues are spread evenly around the wheel and converted from true HSL to RGB. A real eyedropper reads raw pixel data back from the canvas with getImageData on click, so clicking any two patches proves, byte for byte, that they were never different colours — only their induced appearance changed with the surrounding hue and lightness.
Simultaneous colour contrast is the effect where a single, unchanging colour appears to shift hue or lightness depending on what surrounds it. This simulation renders one RGB value, chosen with the Red, Green and Blue sliders, into an identical square patch on top of every background panel — each background is a genuine HSL-to-RGB conversion at a different hue, spread evenly around the wheel by the Hue spread slider and rotated by the Base hue slider.
Instead of a scripted "reveal" animation, this version gives you a real eyedropper: click any point on the canvas and the sim calls getImageData to read the true pixel value under your cursor, displaying its RGB and hex code. Click a second point and it computes the channel-by-channel difference, reporting IDENTICAL or DIFFERENT — clicking any two patches always reports identical, no matter how differently they appear, because the pixels genuinely never changed.
Are the patches on different backgrounds really the same colour?
Yes. Every patch is drawn with the exact same fillStyle built from the Red, Green and Blue sliders. Use the eyedropper to click any two patches and the sim will read the actual canvas pixels back out and confirm they are identical to within rounding.
How does the eyedropper actually work?
On click, the sim converts your cursor position into device-pixel canvas coordinates and calls the canvas 2D context's getImageData method on that single pixel. This reads the real rendered colour data, not a value looked up from a table, so it reflects exactly what was painted to the screen.
What does Isolate patches do?
It temporarily replaces every coloured background with the same neutral grey, removing the inducing context so you can see the patch's true, un-shifted appearance directly, then switches back when toggled off.
Neurons in the retina and visual cortex compare a region's colour to its immediate surroundings rather than measuring it in isolation, a process related to lateral inhibition and chromatic induction. A background of one hue pushes the perceived colour of everything on it toward the opposite side of the colour wheel, which is why the identical patch looks warmer on a cool background and cooler on a warm one.
Hue spread controls how far apart the background colours are around the wheel — a wider spread makes the induced shifts more obviously different between panels. Background lightness affects how saturated the induction appears, and the patch's own RGB value changes what colour is being tested; a neutral grey patch shows the effect most clearly because it has no hue of its own to compete with the induced one.
The 3D sim renders three separate illusions (grey-on-grey simultaneous contrast, Mach bands and Adelson's checker shadow) with a scripted Reveal overlay that draws a bridge of the shared colour. This 2D companion focuses on chromatic simultaneous contrast specifically, lets you tune the patch colour and the number and hue of backgrounds continuously, and replaces the scripted reveal with a general-purpose pixel-sampling eyedropper you can point anywhere.
Yes. The background hue, saturation and lightness values go through a standard HSL-to-RGB conversion formula in JavaScript, the same maths used by CSS and image editors, so the rendered background colours are exact, not approximated or picked from a fixed palette.
Designers and print professionals account for it when choosing colour palettes so that a colour reads consistently regardless of what is placed next to it, and it is a known source of error in tasks like colour matching, medical image reading and quality-control inspection under coloured lighting.