---
title: "Creating your color palette"
date: "2017-11-10T15:33:25+00:00"
summary: "Create and manage your website's color palette effortlessly with Site Studio. Learn how to add, organize, and customize colors for a cohesive design. Discover tips for tagging, locking, and efficiently handling colors in use."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-your-color-palette"
id: "9a05f772-5dac-44d6-8b05-78c1e390155a"
---

Table of contents will be added

Site Studio allows you to manage colors across your website with a globally managed color palette. Colors added to the palette are made available through a color picker (shown below) when selecting a color is required.

![9642a96e-color-palette.png](https://acquia.widen.net/content/a8664678-8791-42bf-a833-56689183e978/web/9642a96e-color-palette.png)

Creating a color
----------------

To create a color in the palette:

1.  Navigate to Site Studio > Website settings > **Color palette** 
2.  Click **Add**
3.  Enter a name in the **Label** field
4.  Click on the **Color swatch** to open the color picker
5.  Select your color using the **color picker** or type a hex code into the **text field**
6.  Click on the **Transparency slider** below the color panel to adjust the opacity of the color
7.  Click the **Available in WYSIWYG** toggle if you want to make your color available to the WYSIWYG editor
8.  Click **Save**

To add another color, click **Add** and repeat the steps above before clicking **Save**.

![fcccb9c9-adding-a-color.png](https://acquia.widen.net/content/3df424b2-c406-4024-b6a4-82603099499a/web/fcccb9c9-adding-a-color.png)

Changing the order of the colors
--------------------------------

You can change the order of the colors in your palette to control how the colors are arranged in your color picker.

1.  Navigate to Site Studio > Website settings > **Color palette** 
2.  Click and hold on the **Drag handle** next to the color you want to move and drag the color up or down to reposition it
3.  Click **Save**

![3f09fff5-ordering-colors.png](https://acquia.widen.net/content/827c44f8-be88-48bc-8cd7-440acf1bf3f9/web/3f09fff5-ordering-colors.png)

Deleting a color
----------------

You can delete colors as long as they are not being used. To delete a color:

1.  Navigate to Site Studio > Website settings > **Color palette** 
2.  Click the **Delete** button to delete a color.

![90771966-delete-color.png](https://acquia.widen.net/content/0b05349b-2cbe-460b-89c5-5a1f30e0125f/web/90771966-delete-color.png)

Deleting a color in use
-----------------------

When a color has been applied to a page, style, template or anything else, it's flagged as 'In use' and cannot be deleted. Instead of a Delete button, you will see an In use button.

To delete a color in use:

1.  Navigate to Site Studio > Website settings > **Color palette** 
2.  Click on the **In use** button next to the color you want to delete
3.  A modal will open showing a list of links to locations where the color is being used
4.  Navigate to each of these locations and select a different color
5.  When the color is no longer in use, it will be unlocked and you will see a **Delete** button
6.  Click on the **Delete** button to delete the color

![46fa2c07-delete-color-in-use.png](https://acquia.widen.net/content/5b85804c-8d41-42b1-90ff-67738f9c1668/web/46fa2c07-delete-color-in-use.png)

Link/unlink color label
-----------------------

You can link or unlink the color label from the variable, this means that the label can be something different from the variable.

When adding a new color the label and variable fields are linked by default. This is shown by the link icon color being blue and the variable field is greyed out.

Important

Note you can only change the color variable of a color that is not in-use.

To unlink a color label and variable:

1.  Navigate to Site Studio > Website settings > **Color palette**
2.  Click the link icon next to the label field  
    The variable field will turn white, if the color is not in-use
3.  Update the color label
4.  Click **Save**.

![84ea3788-unlink-color-label-with-variable.png](https://acquia.widen.net/content/c6edf673-3e37-4f18-b502-23719adce321/web/84ea3788-unlink-color-label-with-variable.png)

Locking a color
---------------

Locking a color will stop it from being overridden if changes are detected when importing using Site Studio sync.

1.  Navigate to Site Studio > Website settings > **Color palette**
2.  Find the color you want to lock
3.  Click **Lock entity**
    
    ![f56b2f71-lock-color.png](https://acquia.widen.net/content/20b9b7b7-3c76-4fd3-b253-78d0452db131/web/f56b2f71-lock-color.png)
    

Tagging colors
--------------

When creating or editing colors in the color palette, they can be grouped by tagging them. Tagging colors allows site builders to restrict the [color picker form element](/drupal-starter-kits/add-ons/site-studio/color-picker-form-element "Color picker form element") to allow use of a specific tag.

To tag a color:

1.  Navigate to Site Studio > Website settings > **Color palette** 
2.  Find the color you want to tag
3.  Type the name of the tag you want to create. Existing tags will appear if they match. Colors can also be tagged with multiple tags
4.  Once done, press **return** - this will then create the tag.

![75b43874-tag-color.png](https://acquia.widen.net/content/e5a7b3b8-5941-4f3c-8407-effe555f38de/web/75b43874-tag-color.png)