Hermann Grid Illusion
An illusion where phantom gray dots appear at the intersections of white channels in a grid of dark squares, caused by lateral inhibition in retinal ganglion cells.
What it means
Draw a grid of dark squares separated by light channels, and ghostly gray dots appear at every intersection — but only in your peripheral vision. Look directly at any intersection, and the dot vanishes. This happens because of lateral inhibition in your retinal ganglion cells. At an intersection, the light channel is surrounded by more light area than at a non-intersection point, so the inhibitory surround suppresses the brightness signal more strongly, creating the perception of a darker spot.
The effect is strongest with high contrast (near-black squares, near-white gaps) and medium gap widths. It weakens when the squares are lighter, the gaps are very narrow or very wide, or when colors replace pure grayscale.
Why it matters in palette design
The Hermann grid effect can appear in dense UI layouts: card grids, data tables with thick borders, dashboard tile arrangements, and image galleries with uniform gutters. If users report 'shimmering' or 'spots' in a dense grid layout, it may be this illusion rather than a rendering defect. Breaking the regularity — with subtle border tints, rounded corners, or varied gutter widths — disrupts the lateral inhibition pattern and eliminates the phantom dots.
Example
A photo gallery uses a 4×4 grid of near-black thumbnails with white 8px gutters. Users complain about gray dots flickering at the grid intersections. Changing the gutter color from pure white (#FFFFFF) to a light gray (#E8E8E8) and adding 4px border-radius to the thumbnails eliminates the phantom dots without changing the layout.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.