Swatch

The word is borrowed from textiles, where a swatch is a cut corner of the actual cloth, and the borrowing is exact: a swatch is a sample of the material, shown at a size small enough to arrange many of them and large enough to judge one. Interfaces use it in three places. In a picker, swatches are the options. In documentation, they stand beside the name and the value so a reader can see what #D9480F is without pasting it anywhere. In a canvas tool, the swatch on the toolbar reports the current fill.

A swatch is a sample, not a decoration, so the craft is in what surrounds it. It needs a border or an inset outline, because a white swatch on a white surface disappears and a dark one bleeds into a dark theme. It needs enough area to be judged, since a colour read off a 12 pixel dot is not the colour it will be at full bleed. It should carry its name and ideally its value, because the point of showing a sample is to let someone identify and then use it. And selection has to be marked with something other than the colour itself: a ring outside the block, a check drawn on it, never a change to the fill, which would make the sample lie about the value it represents.

Colour is the one thing a swatch cannot rely on to communicate. A palette where the only difference between the selected chip and the rest is a subtle hue shift fails for anyone who cannot see that shift, so pair the fill with a name, and mark state with shape or position. That is also why a swatch should show transparency honestly, over a checkerboard, rather than mixing the alpha into a solid: a sample that flattens what it is sampling is a sample of nothing. See colour token for the named values a documented palette is usually made of.