# Colors

The colors configuration defines the color system used across the theme, including sections, buttons, headers, and product highlights.

It provides flexibility through color schemes, background gradients, and transparency, ensuring brand consistency and visual harmony across all sections.

<figure><img src="/files/Sc1Ev2khwtRhU4Eag22y" alt=""><figcaption><p><strong>Theme Settings -> Colors</strong></p></figcaption></figure>

{% hint style="info" %}
If you're updating from an earlier version of Broadcast, you can view your site's colors from the live theme. This will be helpful when you're building the newer version as a Draft.

The Shopify update tool cannot copy your original colors. However, you can view them from the live theme and create new color schemes with the latest version.&#x20;
{% endhint %}

***

## Color settings

Configure your brand colors in the color settings. These color elements are used in all the general sections, the header,  and all other pages.

<figure><img src="/files/HXUQK0TyCuWo3cVzy9SF" alt=""><figcaption><p><strong>Open the Colors accordion to find all the settings</strong></p></figcaption></figure>

{% hint style="info" %}
***Tip*****:** These are your primary brand colors used throughout the theme. Some sections or blocks have their own color settings for even greater control.&#x20;
{% endhint %}

***

Here are some common color elements to demonstrate how the color settings work:

## Color schemes

The color schemes group defines all the color values used throughout the theme.\
Each subsection provides customizable color inputs with default values and optional transparency.

### Light background

The light background setting is used for background accents like the coupon message in the cart drawer. It's also used in the free shipping indicator with the bright accent color setting.&#x20;

<figure><img src="/files/VMfZShyP6C9SD2qvF1sD" alt=""><figcaption></figcaption></figure>

## Additional

The additional color group defines supporting and utility colors that enhance the overall visual experience of the theme.

### Accent

A  highlight color that can be used to draw attention to important elements such as active states, badges, or promotional highlights. It reinforces brand personality and adds visual emphasis.

<figure><img src="/files/60KNerlMvKVIz2pAlKEF" alt=""><figcaption></figcaption></figure>

## Header

The header color group controls the visual presentation of the site’s main navigation area, including the top bar, dropdown menus, and transparent header states.

It ensures that navigation elements are readable, accessible, and visually aligned with the overall brand design.

### Background

This is the background color of the main navigation bar. It provides a neutral foundation for logos and navigation links. Typically white or a light neutral tone for modern designs.

<figure><img src="/files/R4obSaZ7BfwjcpZ8GLdf" alt=""><figcaption></figcaption></figure>

### Navigation

The text color for header navigation links. It must contrast strongly with the menu color to ensure readability and accessibility.

<figure><img src="/files/T3cjluac4hVLvQiSsCoo" alt=""><figcaption></figcaption></figure>

### Dropdown background

The background color for dropdown (submenu) panels that appear beneath main navigation links.

Ensures clear separation from the main header and easy legibility.

<figure><img src="/files/tWsOyfTLz5uQMnqzLSU2" alt=""><figcaption></figcaption></figure>

### Dropdown navigation

Text color for links inside dropdown menus. Matches or complements the main navigation link color for consistency.

<figure><img src="/files/TTUqJoiWO8Twyul02oAv" alt=""><figcaption></figcaption></figure>

### Transparent navigation

The color applied to header links and icons when the header is transparent (for example, when placed over hero images or videos). Used to maintain contrast and readability in overlay designs.

<figure><img src="/files/jZNXbYqfBt0kayisJ7U6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
***Note:*** When using a transparent header, these colors are used when the dropdown is activated. The transparent header has a separate setting while inactive. That setting is in the next group.&#x20;
{% endhint %}

## Product

The product color group defines the visual styling for product-related elements, particularly those used in pricing, promotions, and sales indicators across the storefront.

### Sale

A bold, attention-grabbing color can be used to highlight sale prices, promotional badges, or discount labels.

<figure><img src="/files/QkEWO4mDQhaXu9zJgp5u" alt="sale highlight settings"><figcaption></figcaption></figure>

{% hint style="info" %}
***Tip:*** Use a color that will convey urgency and encourage engagement.
{% endhint %}

## Contrast

Try to use colors that are high in contrast. It will make your text easier to read. Here is a great contrast checker:

{% embed url="<https://webaim.org/resources/contrastchecker/>" %}

* Example of a good score, 21:1 - **White** foreground on **Black** background:

<figure><img src="/files/IHbM0kq9ME8yXi2WVgi1" alt="good contrast ratio example"><figcaption></figcaption></figure>

* Poor score, 2.44:1 - **Blue** foreground on **Black** background:

<figure><img src="/files/yMiAt5NQMkRxD7JoQ5Ve" alt="poor  contrast ratio example"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/theme-settings/theme-settings/colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.