# Color palette

Publishes a named set of colours as a click-to-copy swatch bar or a Name / Colour / Code table.

![](https://help.gocapable.com/images/59080afb-2741-4741-8ff0-2dc2d8918f39.webp)

Typing /color offers the macro straight away, with no need to open the full macro browser.

Design systems, brand pages and style guides need the hex values written down somewhere people can grab them. This macro holds a list of named colours and renders them either as a solid segmented bar that expands the swatch you hover, or as a table with the name, a swatch and the hex code. Every swatch is click-to-copy: readers click and the hex lands on their clipboard with a confirmation toast. You can build the list by hand, seed it in one click from your organisation's brand colours, or describe the palette you want and let AI generate it. Three starter templates (Brand swatches, Design tokens, Contrast pair) are offered when you insert a new one.

---

## See it

Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up.

![A colour palette table headed colour theme with four rows naming Capable Primary, Capable Secondary, Capable Tertiary and Links, each with a swatch and a hex code, and the Confluence macro toolbar ben](https://help.gocapable.com/images/28d75502-8044-4eb3-b509-fae614c6412e.webp)

Published as a table, every row carries the name, the swatch and the code readers need to copy.

### 9 colours, table: Deep Sea Blue

| Name          | Color   | Code |
| ------------- | ------- | ---- |
| Deep Sea Blue | #003B5C |      |
| Coral Reef    | #FF6F61 |      |
| Aqua Wave     | #00B2A9 |      |
| Sandy Beach   | #F4D03F |      |
| Sunset Glow   | #FF8C42 |      |
| Seafoam Green | #A8E6CE |      |
| Ocean Mist    | #B2E0E0 |      |
| Shell Pink    | #FAD3D3 |      |
| Stormy Sky    | #7D9EC0 |      |

### 3 colours, table: Primary

| Name      | Color   | Code |
| --------- | ------- | ---- |
| Primary   | #172b4d |      |
| Secondary | #0c66e4 |      |
| Tertiary  | #e9f2ff |      |

### 3 colours, box: Primary

![A horizontal bar split into three blocks, a dark navy one labelled primary, a blue one labelled secondary and a pale one labelled tertiary.](https://help.gocapable.com/images/614f6002-669e-4775-b5ea-2b63d61cd456.webp)

The colours fill a single bar in order, each name printed on its own swatch.

Primary

Secondary

Tertiary

---

## Settings

![The Color palette configuration modal showing a three row table of primary, secondary and tertiary colours with hex codes, next to a colour list, an add colour button and a box or table display switch](https://help.gocapable.com/images/a626e7e7-f4dc-4f5e-8aa0-8a73a638d648.webp)

Colours are named and reordered on the right, and the display switch decides how they publish.

| **Setting**   | **Values**                                                                                                | **What it changes**                                                                                                                                                                                                               |
| ------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Colors        | A reorderable list; each entry has "Name" (free text) and "Color" (a colour picker plus a hex text field) | The palette itself. Entries are added with "Add Color" (which appends "New Color" / #123456), removed with the bin icon, and reordered by dragging the grip handle. Order is the render order.                                    |
| Display       | Box, Table                                                                                                | Box renders a single 75px-tall bar split into equal segments, one per colour, each labelled with its name and growing on hover. Table renders a three-column table: Name, Color (a clickable swatch), Code (the hex, select-all). |
| Corner radius | Slider, 0–24 px                                                                                           | Rounds the frame around the whole palette and clips the content to it. At 0 there is no rounding on the outer container (the Box display keeps its own internal rounding).                                                        |
| Border        | Off / On; when on, "Width" slider 0–6 px and a colour field                                               | Draws a light frame around the whole palette. The Style tab explains it as off by default because the swatches are meant to be the focus.                                                                                         |

---

## Related

[MetadataDrops one piece of live page metadata — last updated, published date, version number, page titl](https://help.gocapable.com/macros/metadata.html)

[DiffShows two blocks of text side by side with the changes between them highlighted.](https://help.gocapable.com/macros/diff.html)

[Page utilitiesThe rest of this family.](https://help.gocapable.com/macros/page-utilities.html)

---

_Small, and quietly useful._