Background Color

The Background Color macro allows you to change the background color of content, for example, to highlight a block of content to make it stand out on a page. Any background color can be specified using either color names or hexadecimal color codes. You can combine the Background Color macro with the CSS Style Sheet macro to further customize the content.

Instructions

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click the position on the page where you want to insert the macro. The macro placeholder can be repositioned later if required.

  4. Click Insert More Content > Other Macros.

  5. Select the Background Color macro from the Macro Browser.

  6. Define the color using the color parameter and optional CSS.

    ParameterDescriptionTypeDefaultRequired

    Color

    The background color for the content contained within the macro. This can be either a common color name (supported by most browsers) or a hexadecimal color code (supported by all browsers).

    string

    green

     (tick)

    CSS Class

    Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page.

    Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name.

    string

    none

     (error)

  7. Click Insert. The macro placeholder displays with space to add your content to the body of the macro.

  8. Publish the page

    Published Example

    Your text goes here


Examples

Color Names

There are several built-in pastel colors ideal for use as backgrounds. Type the desired color to display one of the following:

red
yellow
green
cyan
blue
purple


Use standard browser color names to define additional colors, for example: 

orange
violet

Hexadecimal color code

To define a specific color, for example to match a theme, use a hexadecimal color code, e.g. #003366:

Slate Blue

When changing background color, try to keep a contrast between the text and the background so that it is still clearly readable. If there is not enough contrast, you can use Confluence's text editor to change the font color as illustrated below.


The color options available for text in the Confluence text toolbar menu.

Slate Blue

Q: Can I highlight just a few words within my text, rather than a whole block of content?

A: Yes. Use the Highlight macro.


Q: I’m using hexadecimal codes, but they are not working - why?

A: Unlike the Color macro, this macro requires the "#" at the start of the number.


Q: Where can I find HTML text color codes?

A: HTML Color Codes has a good color code reference page that shows each of the standard colors with the corresponding color code. If you want a groovy wall chart with color codes, try http://html-color-codes.com/.


Q: Some color names, such as "grey", don’t seem to work in all browsers - why?

A: Color names are supported differently by different browsers. To be 100% sure of getting the right color, use the hexadecimal color code instead.


Q: How do I change the color of text?

A: Use the Confluence text editor toolbar.


Q: How do I change the default background color of my page?

A: If you are using a standard theme, there are some limited options to change colors. If you are using the Builder Documentation theme, you have complete control over all colors using Builder CSS Custom Styles.


Q: Can I put a graphic in the background?

A: Yes. The Div and CSS Style Sheet macros gives you a lot more flexibility. You can follow instructions on using CSS with the Div macro.

Need more help?
Need more help?
If you are still stuck please contact our support team who can offer you more assistance. 
Not tried our macros yet?
Not tried our macros yet?
You can try our full range of content formatting macros for free by visiting the Marketplace.
On this page