---
description: How to alter the color scheme to better fit the style and feel of the website
---

# Colors

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color settings**
3. Make the necessary adjustments.
4. **Save**
{% endhint %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FJgpN5jxAyDIAUhDEcx4J%2Fcolors.png?alt=media&#x26;token=81c0f4b3-9425-4955-98d1-d1f58383472c" alt=""><figcaption></figcaption></figure>

## Add a color scheme group

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2Fzya5c2U8zjchGT4OrrDc%2Fadd_color_scheme.png?alt=media&#x26;token=100268e5-d3cc-4bd5-90aa-4e6889299658" alt=""><figcaption></figcaption></figure>

| Settings                     | Description                                                              |
| ---------------------------- | ------------------------------------------------------------------------ |
| Background                   | This is a field to add background color                                  |
| Background gradient          | Background gradient replaces background where possible.                  |
| Text                         | This is a field to add text color                                        |
| **Primary/Solid button**     | **Solid background button**                                              |
| Button background            | This is a field to change the **solid button** background color          |
| Button text                  | This is a field to change the **solid button** text color                |
| Button background hover      | This is a field to change the **solid button** hover background color    |
| Button text hover            | This is a field to change the **solid button** hover text color          |
| **Secondary/Outline Button** | **Outline button**                                                       |
| Outline button               | This is the field to change the **outline button** text and border-color |
| Button background hover      | This is a field to change the **outline button** hover background color  |
| Button text hover            | This is a field to change the **outline button** hover text color        |
| **Text link**                |                                                                          |
| Text link hover              | You can add a hover color to the link                                    |

## Edit the existing color scheme group

<div><figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2Fge7US7eAH2uIi5hjmdNC%2Fedit_color_scheme.png?alt=media&#x26;token=e559fc04-c37b-4ffa-b4c1-c627813a996c" alt=""><figcaption></figcaption></figure> <figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2F1Z5QPa2ixMXduUJz0311%2Fedit_color_scheme-2.png?alt=media&#x26;token=3b6e9dbe-b99a-4260-818a-81aa722982cb" alt=""><figcaption></figcaption></figure></div>

## Change color to section

After adding the color scheme group, you can add/change the color scheme for the specific section

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FyYrw48Ra3LX4QfkNiOkZ%2Fcolor_schme_1.png?alt=media&#x26;token=e8490aeb-7aa3-4b93-ab03-0fbff3c68631" alt=""><figcaption></figcaption></figure>

## Summary

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2F2HgC7WRd5rU0nTdeLgRR%2FUntitled%20Project.gif?alt=media&#x26;token=6041a5e4-b984-4809-bc2d-2d7a5b7abbbf" alt=""><figcaption></figcaption></figure>

## Video Tutorials

{% embed url="https://www.youtube.com/watch?index=5&list=PLWCiWoEvn91ivfW5vf1gw_rnacJw8G5pj&v=znanQMNvC0k" %}
