# Colors

Select colors for different elements of your sections, including **General** colors, **Button** colors, and **Overlay** colors used for media with overlaying text.

You can also choose 2 **color schemes** to apply to sections in individual section settings.

***

In the theme editor, click the **Colors** block under **Section Studio** • **Global styles**

### General

<table data-header-hidden><thead><tr><th width="239.7928466796875"></th><th></th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the section, which spans the full height and width.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All headings, subheadings, and body text.</td></tr><tr><td><mark style="color:blue;">Links</mark></td><td>All linked text</td></tr><tr><td><mark style="color:blue;">Lines and borders</mark></td><td>All lines and borders that appear between or within sections.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Small design elements, like badges</td></tr><tr><td><mark style="color:blue;">Accent contrast</mark></td><td>Text or icons that overlay accent elements</td></tr></tbody></table>

### Buttons

<table data-header-hidden><thead><tr><th width="239.947998046875" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Primary button background</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Primary button text</mark></td><td valign="top"><br></td></tr><tr><td valign="top"><mark style="color:blue;">Secondary button background</mark></td><td valign="top"><br></td></tr><tr><td valign="top"><mark style="color:blue;">Secondary button text</mark></td><td valign="top"><br></td></tr></tbody></table>

### Overlay

<table data-header-hidden><thead><tr><th width="239.48773193359375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Background</mark></td><td valign="top">The tint applied on over images or videos.</td></tr><tr><td valign="top"><mark style="color:blue;">Foreground</mark></td><td valign="top">The text and elements that overlay images or videos.<br></td></tr></tbody></table>

### Color schemes

A color scheme consists of a set of colors that are applied to your sections. You can choose to set up two **custom color schemes.**

In section settings, you can select **alternate color schemes** that reuse your default colors to generate alternate palettes.&#x20;

Click section settings to find the variant color schemes. Section overlay colors also use these variant color schemes as additional options:

<table data-header-hidden><thead><tr><th width="239.48773193359375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Default</mark></td><td valign="top">Uses the global style colors as selected</td></tr><tr><td valign="top"><mark style="color:blue;">Inverse</mark></td><td valign="top">Swaps general background and text colors</td></tr><tr><td valign="top"><mark style="color:blue;">Soft</mark></td><td valign="top">Uses the general palette with a subtle alternate background based on the text color</td></tr><tr><td valign="top"><mark style="color:blue;">Accent</mark></td><td valign="top">Uses accent as a background and accent contrast as text</td></tr></tbody></table>
