Skip to end of metadata
Go to start of metadata

Confluence Colours

This tutorial shows you how to use colours from the Colour Scheme settings in Space Administration within your CSS...

If you use Confluence colours within your style sheets, space administrators will be able to customise the colours of your layout even if they don't have access to edit it. This is particularly useful when you want to allow a layout to be customised on a space-by-space basis.


Simply insert the colour property in to your CSS where you would normally use a HTML colour reference, for example if you want to set the border colour of the menu bar you could use:

.atb-menu {

The layout will automatically replace the colour property with the colour specified in the colour scheme. If the colour scheme is changed, the layout will automatically update to the new colours.

Colour Properties

The table below shows the colour name as it appears in the colour scheme and it's corresponding colour property that can be used in your CSS files.

Colour Name


Top Bar

Breadcrumbs Text

Space Name Text

Heading Text


Borders and Dividers

Menu Bar Background

Menu Bar Text

Menu Bar Background Highlight

Menu Bar Text Highlight

Custom 1

Custom 2

Custom 3

Custom 4

Custom 5

Other Notes

When viewing themed pages at global level (eg. Dashboard, search results, etc.) the global colour scheme will be used. When viewing at space level (eg. wiki pages, alphabetical index, etc) the space's colour scheme will be used.

See Also

  • No labels