> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Color Categories

# What is Color Categories?

Color Categories is **a collection of colors** that can be an alternative for a color of a text layer. **Your customers can pick a color from it** to change color of a text layer of your design on the storefront.

Here is an example of a color category: 

![Color Category in Teeinblue portal](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-27_1bxi0ux.png)

Then on live store, you can show this category for customers to pick in order to change the color of a text layer:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-28_t0cgap.png)

# Create a Color Category

* Go to **Color Categories** page under the "Assets" menu

* Click on **New Category** button

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1cx5w7r.png)

* Type a **Name** for this new category and hit on the Create button

# Add Colors to a category

* To **add a color to this category**, you can \*\*enter the color hex \*\*on the text box or **choose a color from the color picker**. Then hit the **Add new button**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-30_1svef2s.png)

# Edit Colors in a category

* After adding colors, by default, the display options on personalization form will be \*\*Thumbnail images. \*\*

* Click on color option's name to edit (by default, color option's name = the color hex you added)

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-36_jsx3s9.png)

Name of colors will be displayed on storefront if you choose the Display Settings as *Dropdown Option Name* or enable the *Show option name on hover* toggle

* Click on the *X button* to delete a color

* To re-order color options, hold the blank space on a row and drag it to the correct position.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-32_h2n6h6.png)

# Use Color Categories in Artwork 2.0

In Artwork 2.0, add a standalone Color Layer to the personalization form. You can set its default value, then populate the selected color into a supported Layer such as a Text Layer.

### Add a Color Layer

1. In **Teeinblue Portal > Artworks**, open an Artwork.
2. In **Teeinblue Portal > Artworks > open an Artwork**, select **+ Layer > Form Elements > Color**.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/codex-image-aug-26-2026-080738_8niuog.png)

### Configure the Color option

You can create a Color option for this Artwork or reuse an existing Global Color Option.

#### Create a new Color option

1. In **Teeinblue Portal > Artworks > open an Artwork > select the Color Layer > Personalization Settings**, select **Create a new option**.
2. Enter an **Option Title**.
3. Under **Color options**, select one of these types:

* **Solid Color category:** Select a Color Category
![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/screenshot-2026-09-14-142107_uoypu5.png)

* **Color Sequence categories:** Select a group of Color Categories. 

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/screenshot-2026-09-14-142352_o8cq1v.png)

* **Color picker:** Allow customers pick a color from the picker

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/screenshot-2026-09-14-142448_q309xy.png)

| For a Color Layer, **Select default value** appears when you select **Create a new option**.

To remove a selected default, select **Clear default value**.

#### Reuse an existing Global Color Option

1. In **Teeinblue Portal > Artworks > open an Artwork > select the Color Layer > Personalization Settings**, select **Use an existing global option**.
2. Under **Select a global option**, choose the Color Global Option you previously created.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/image_sg3i7j.png)

### Set a default value for a Global Color Option

1. In **Teeinblue Portal > Assets > Global Options**, create or open a Color Global Option.
2. Select **Solid Color category**, **Color Sequence**, or **Color picker**.
3. Under **Select default value**, select a swatch or sequence, or choose a color with the picker.
4. Select **Save**.


| The default belongs to the Global Option. Artworks that use this Global Option use the same default value.

### Apply the Color option to another Layer

1. In **Teeinblue Portal > Artworks > open an Artwork**, select the Layer whose color customers can change, such as a Text Layer.
2. Under **Populate Values**, enable **Populate Color from another option**.
3. Under **Select a Color option**, choose the Color Layer.
4. Keep the populated value as `{{color}}`.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/0/8/5/6085dc2a7293d800/codex-image-aug-26-2026-081454_1mdz1c4.png)

The connected Layer uses the default color before the customer makes a selection. If the customer selects another color, their selection replaces the default.

### Verify the result

1. Open a storefront product that uses the Artwork.
2. Confirm that the Color option starts with the default value and the connected Layer uses that color.
3. Select another color and confirm that the preview updates.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/img-28_t0cgap.png)

| Read more about [Add Text & Text Personalization](/en/article/add-text-text-personalization-12lfa55/)