> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/theme-settings/colours.md).

# 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](/convivial-for-govcms/concepts-and-tools/palettes.md).

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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-206044c4af14aeccbbe33beb41fde32ac260f4a7%2Ftheme-schemes.png?alt=media)

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](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-5f5b1ec5c1fb31f167f43d1ea647059279346fbf%2Ftheme-palette.png?alt=media)

> **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.