Skip to main content

Colour Chart

Show one colour as a big block with its HEX, RGB and HSL values, for when a section is built around one colour, like a brand's main colour.

Adding A Colour Chart​

  1. Click on the project page where you want the Colour Chart to be added, and type / to open the element menu
  2. Search for Colour Chart
  3. Select it to add it to the page

The Colour​

Click the colour to copy its HEX code. Right-click it to change it in the colour picker, where the palette icon shows its HEX, RGB, CMYK and HSL values and the colours that go with it. See Colour Palette.

Adding A Data Source​

Hover + and select Connect data source to take the colour from a Colour Palette, a Moodboard or a Table. It updates when the source does. Connect a whole Colour Palette and a Colour Chart is added for each of its colours. From a Moodboard, it takes a layer's strongest colour, or the colour that covers most of the Moodboard or of the layers you selected.

Using A Colour Chart As A Data Source​

A Colour Palette, Moodboard or Table can show the colour, and a To Do List, To Do Kanban, Content Calendar or Timeline can add it to a task. Hover + on the Colour Chart and select Copy connection ID to find it quickly in their list. They update when the colour changes.

Client Approval​

When you send the page to a client in a client revision, they can approve the colour.

Export Your Colour Chart​

Click the download icon in the Colour Chart's toolbar. The formats are:

  • PDF
  • CSS
  • JSON

Keyboard Shortcuts​

These shortcuts work when the Colour Chart is selected:

ActionShortcut
Copy⌘ / Ctrl + C
Export⌘ / Ctrl + E

Tips​

  • Put a few Colour Charts in a row for a brand sheet, like the primary, secondary and accent colours
  • Connect a Colour Chart to your Colour Palette's main colour, so the big block updates when the palette does