The UIKit includes a basic color palette with a limited set of colors and tones. You can update and add to the color palette included with the UIKit by navigating to Site Studio > Website settings > Color palette. Before you make any changes, it's important to understand how the colors have been tagged and what this means.

Color palette tags

Each color or tone within the palette has been tagged with either 'Color' 'Light' or 'Dark.' The color tags are used by the components to automatically apply a text color theme (a class) to the text within the component that is appropriate to the background color. This means content authors only need to select a background color without selecting a text color to contrast with the background. The text color themes applied are as follows:

• Color - When selected, a text theme for color backgrounds is applied to the component's text.
• Light - When selected, a text theme for light backgrounds is applied to the component's text.
• Dark - When selected, a text theme for dark backgrounds is applied to the component's text. 

Color naming

The colors have been given generic names so that you can change them to different colors and the variables will still make sense. For example, the first color Brand color light has the variable $brand-color-light rather than Light blue, which is the actual color. Taking this approach with new colors added to the palette will allow you to change colors in the future without creating variables that are descriptive of the actual color.

Updating the Primitives UIKit color palette

When you add new colors, you must tag them with 'Color' 'Light' or 'Dark' to maintain the automatic application of text colors. If a color isn't tagged, the content author will be asked to manually select a text color theme.

Color naming

The colors have been given generic names so that you can change them to different colors and the variables will still make sense. For example, the first color Brand color light has the variable $brand-color-light rather than Light blue, which is the actual color. Taking this approach with new colors added to the palette will allow you to change colors in the future without creating variables that are descriptive of the actual color.