Configuring Your Brand Colors

Before Starting

Note that you need to have Editor permissions to configure a color in your account.

In this article:
Configuring a Color
Color Mapping Diagrams

A SundaySky theme includes various components in different colors. These colors, set by professional designers at SundaySky, are included in the brand configuration.

An example of a color is the Button Color and in the example below, the color selected for this component is a light orange (hex code #FCBD70).


As your company's brand colors are most likely different from the default theme colors, you'll need to configure the colors accordingly.

The colors that you configure will apply to all the programs in your account, and will be used in the programs' scenes.


Configuring a Color


Select your program from the program menu (left side of the page) and then click Edit Program.



With Brand selected in the toolbar, click the pencil icon by My brand configuration.



Open the Colors section.


The Colors section is displayed with the six colors that can be configured.



Click the color that you want to configure (in the example below, Secondary Color).
▶ For your reference, use the color mapping diagrams to identify the color that you want to configure.



Select a new color by doing one of the following:
a. Enter the hex code.
b. Enter the R, G, and B numeric values.
c. Use the color slider to visually select a color.


To see how the new color looks in your scenes, click anywhere outside of the color selection panel and the color will be updated in the relevant component. If you would like to try a different color, click Cancel at the bottom of the page and continue to a new selection.



When you're happy with the color that you have selected, click Save.


The new color is saved in your brand configuration.



Configure additional colors, as required.

Color Mapping Diagrams

If you would like to see how a color is used in a theme, you can refer to the mapping diagrams below.

The color names in the brand configuration, displayed on the right, are mapped to where the colors are used in the theme.

Note that there may be scenes in which not all the colors are used. For example: in the Lite Theme scene below, neither Accent 1 nor Accent 2 is used for any component.



Was this article helpful?
0 out of 0 found this helpful



Article is closed for comments.