CSS Pattern

The Geometry of Alternating Color

A checkerboard is the simplest non-trivial tiling: two colors alternating across a rectangular grid such that no two adjacent cells share the same color. In graph theory, this is a proper 2-coloring of the grid graph, possible because grid graphs are bipartite. The coloring rule is elegant: cell (row, column) receives color A if row + column is even, color B if odd. This single arithmetic test generates the entire pattern regardless of grid dimensions.

Color Contrast and Harmony

This tool generates color pairs with guaranteed contrast and harmony. The base hue is chosen randomly, and the second hue is shifted 120 to 240 degrees around the HSL color wheel. One color is rendered dark (22% lightness), the other bright (78% lightness). This ensures every pair is visually distinct while remaining harmonious, because hues separated by 120 degrees or more create natural tension that the eye reads as deliberate and balanced.

The Adelson Checker Shadow Illusion

In 1995, Edward Adelson at MIT published a famous optical illusion: two squares on a checkerboard that appear to be different colors are actually identical shades of gray. The brain interprets one square as a light color in shadow and the other as a dark color in full light, compensating for the perceived illumination difference. This illusion demonstrates that human color perception is contextual, constructed by the visual cortex from surrounding information. A checkerboard is the ideal canvas for exploring this phenomenon because its rigid structure makes perceptual deviations strikingly apparent.

Using the CSS Pattern

The code panel below the grid provides a single CSS line using repeating-conic-gradient. This modern CSS function creates a seamless checkerboard at any scale with zero images and zero SVG. Set it as a background property on any element. Adjust the size value (default 50px) to control cell dimensions. The pattern tiles infinitely and renders at native resolution on every display.

In the Classroom

Checkerboards connect to multiple mathematical concepts. Count the cells: an 8×8 board has 64 cells. How many are dark? (32.) How many are light? (32.) Now remove two opposite corners (both the same color). Can you tile the remaining 62 cells with dominoes, each covering exactly two adjacent cells? The answer is no, and the proof is elegant: each domino covers one dark and one light cell, but two cells of the same color have been removed, making the count unequal. This puzzle introduces proof by invariant, a powerful technique in combinatorics.