Wiktionary:Palette

Wiktionary defines a CSS palette of colors that can be used by templates.

Colors

The list of colors in the palette can be found in MediaWiki:Gadget-Palette/table.

There are two main groups of colors: those without numbers are used by core templates and as text colors. Those with numbers are the numbered colors, intended for use as background or border colors, which are provided for 16 base colors with 10 contrast levels each. These colors are derived algorithmically: see Wiktionary:Palette/numbered for more information.

The numbered base colors are red, scarlet, orange, amber, yellow, lime, green, teal, cyan, blue, indigo, purple, magenta, rose, brown and grey, and the indices go from 0 to 9. For example, a blue color that is the closest to the background color has the name blue-0, resulting in the full name --wikt-palette-blue-0. Desaturated shades of all base colors except grey can be obtained by prefixing grey-, e.g. grey-blue-0.

Advantages

Using the palette instead of hardcoded colors provides automatic support for dark mode, and provides a consistent set of colors for use by templates to maintain a more consistent look-and-feel.

Use

Palette colors can be used via CSS by using var(...).

It is recommended, although not required, that a fallback color be provided. It should usually be the light mode equivalent of the color. This means that the final color value used in CSS should look something like var(--wikt-palette-blue-0, #f8fafe). When converting older templates, the pre-existing color may be used as a fallback instead.

Recommendations

When using numbered colors, the colors with index 0, or simply the default page background color, should be used as the background color for main table cells to ensure maximum contrast. Headers should use colors with the index 1, 2, 3 or 4 as the background color depending on their level and required levels of contrast.

Colors with indices 7, 8 and 9 should ideally not be used as background colors for elements with text, unless the text color is inverted from the default color. They are mainly useful as text or border colors.