Color palette

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

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

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
Published as a table, every row carries the name, the swatch and the code readers need to copy.

#9 colours, table: Deep Sea Blue

NameColorCode
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

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

Small, and quietly useful.