# Colors

To use color schemes, please configure your color schemes by following below : [Set up color schemes.](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme)

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Colors**.
4. Choose the color scheme that you want change.

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Set the background color.</td></tr><tr><td>Background gradient</td><td>Set the background gradient.</td></tr><tr><td>Primary text</td><td>Set the color for the primary text.</td></tr><tr><td>Secondary text</td><td>Set the color for the secondary text.</td></tr><tr><td>Shadow</td><td>Set the shadow color.</td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Set the background color for the button.</td></tr><tr><td>Label</td><td>Set the color for the button label.</td></tr><tr><td>Outline</td><td>Set the color for the button's outline.</td></tr><tr><td>Outline gradient</td><td>Set the gradient color for the button's outline.</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Set the color for the button label.</td></tr><tr><td>Outline</td><td>Set the color for the secondary button's outline.</td></tr><tr><td>Outline gradient</td><td>Set the gradient color for the secondary button's outline.</td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Set the color first.</td></tr><tr><td>Second color</td><td>Set the color second.</td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Set the color for the heading.</td></tr></tbody></table>

{% hint style="info" %}
**Create the color schemes as shown below to ensure the theme's colors match those on the demo store.**
{% endhint %}

## Scheme 1

The default color scheme applied to elements that are not assigned a color.

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#01FA59</strong></td></tr></tbody></table>

## Scheme 2

Scheme 2 is applied to the **Announcement bar** section and **Product card**.

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#E54C4C</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 3

Scheme 3 is applied to the first **Image banner** section on the about us page.

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color: <strong>Transparent</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 4

Scheme 4 is applied to the following sections: **Collage**, **Shop the look (Banner left)**.

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Solid button background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Solid button label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline button</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline secondary button</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 5

Scheme 5 is applied to the **Sale badge** on product card.

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#DB0C0C</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#121212</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 6

Scheme 6 is applied to the **Multicolumn** section.

<figure><img src="/files/4sXiVuHeofYlYZYKdH3L" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Background gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(0, 59, 245, 1), rgba(86, 172, 209, 1) 49.5%, rgba(221, 255, 51, 1) 100%)</strong></td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 7

Scheme 7 is applied to the **Running text with image** section, the third **Rich text** section on the about us page, **Add To Card button** on product page and Featured Product section and **Checkout button.**

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Background gradient</td><td>Color code: <strong>linear-gradient(90.26deg, rgba(222, 254, 10, 1) 2.91%, rgba(115, 252, 77, 1) 50.46%, rgba(2, 250, 89, 1) 99.96%)</strong></td></tr><tr><td>Primary text</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 8

Scheme 8 is applied to the **Social icons.**

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#C7AFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#90BDF2</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 9

Scheme 9 is applied to the **Contact form** section, the second **Rich text** section on the about us page and the **Free shipping caculator** functio&#x6E;**.**

<figure><img src="/files/1IXrhUWNQAwt9K1ZuCVN" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#1B1A1A</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color code: <strong>#7344D0</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#000000</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 10

Scheme 10 is applied to the **Promotion popup** sectio&#x6E;**.**

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#8A8A8A</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#7344D0</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 11

Scheme 11 is applied to the **Blog card.**

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#1B1A1A</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#5FB2FF</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#8576FB</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#FFFFFF</strong></td></tr></tbody></table>

## Scheme 12

Scheme 12 is applied to the **Shop the look** sectio&#x6E;**.**

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

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#141313</strong></td></tr><tr><td>Background gradient</td><td>No color chosen</td></tr><tr><td>Primary text</td><td>Color code: <strong>#DEFE0A</strong></td></tr><tr><td>Secondary text</td><td>Color code: <strong>#8A52FE</strong></td></tr><tr><td>Shadow</td><td>Color: <strong>Transparent</strong></td></tr></tbody></table>

#### Primary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Label</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>No color chosen</td></tr></tbody></table>

#### Secondary button

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>Color code: <strong>#FFFFFF</strong></td></tr><tr><td>Outline</td><td>Color code: <strong>#6925F1</strong></td></tr><tr><td>Outline gradient</td><td>Color code: <strong>linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)</strong></td></tr></tbody></table>

#### Icon gradient

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>First color</td><td>Color code: <strong>#9312CE</strong></td></tr><tr><td>Second color</td><td>Color code: <strong>#1BD1FF</strong></td></tr></tbody></table>

#### Main page

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Color code: <strong>#01FA59</strong></td></tr></tbody></table>


---

# 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://halosoft.gitbook.io/soul-documentation/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.