Colours

A skin's colours are organised as two schemes, each holding the same set of palettes, and each palette is built from four base colours. This chapter covers the settings; what palettes are for is explained in Palettes.

See colour palettes on the demo site: https://govcms.convivial.io/demo/colour-palettes

Schemes

Each skin has a Light and a Dark scheme, and each scheme has the same ten colour palettes:

• Standard, Alternate, Primary, Secondary, Accent, Neutral — chosen by editors for banners and components.

• Success, Warning, Error, Info — used by alerts and messages.

Schemes

Visitors switch between the light and dark schemes with the Scheme switcher in the header; the Default scheme is what they see first.

Colour palettes

Each palette has four Base colours — Background, Foreground, Link and Highlight. Set these first and the fourteen Derivatives are calculated from them. Fine-tune individual derivatives afterwards if needed. Each derivative shows its contrast ratio against the background and the WCAG level it reaches — keep text and link colours at AA or better. The Example colors box previews the result.

A colour palette

Note: Any palette can be light or dark, set by the Is dark field. Decide this first and save before entering colours — it changes how the derivatives are calculated. Dark palettes get darker strong and stronger backgrounds; light palettes get lighter ones.

Where the derivatives are used:

Derivative	Applied to
Background	Core backgrounds, textures, overlays, text shadow.
Background strong	Mega menu background.
Background stronger	Textures, date card background, SVG patterns.
Background weak	Card border, menu item hover, webform step background, badge background, table zebra stripes, radio button background, content alert background and border, date card date background, properties table odd rows, login page background, media caption, webform section background.
Background weaker	Side nav border, footer bottom divider, webform range background, search autocomplete border, properties table border, date card border, accordion border, datatable border.
Foreground	Body copy.
Foreground weak	Info field, date field, breadcrumb caret.
Foreground focus	Focus outline.
Link	Links, default button, search autocomplete active selection, scheme switcher, datatable ordering.
Link hover	Link hover, button hover, focus state.
Link active	Active states.
Link contrast	Button text, side nav menu item hover text, webform help text, search autocomplete hover text, scheme switcher icon.
Highlight	Active step background, unpublished content background, webform fieldset legend, blockquote.
Highlight contrast	Active step text, unpublished content text.

Use the Import tab under a scheme to paste a full set of colours exported from another site or skin.