> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://fpd-doc.ganymede-apps.net/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).

# Colorization Methods & Setup

**Fancy Product Designer provides several options to let your customers recolor text, SVG files, and PNG images directly in the Product Designer. With the right setup, you can give them complete flexibility or restrict choices to fit your brand style.**

![](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/image_1o0xngb.png)

### Supported Elements for colorization

* **All Text Elements** → fully colorizable
* **SVG Images** → supported (single-path SVGs work best for linked colors)
* **PNG Images** → supported with additional **Color Modes** (see below)

Other image formats (JPG, GIF, etc.) cannot be recolored.

### Colorization Options

There are generally two options you can offer for coloring elements in our app: The **Color Picker** and the **Color Palette**. Also, there are different places in the app where coloring options can be assigned. 

###### 1. Color Picker
* Enter a **single hex value** (e.g., `#000000`) in the settings.
* This enables a **color wheel** where customers can choose *any* color they like.

![Color Picker](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/image_s6pero.png)

###### 2. Color Palette
* Enter **multiple hex values** (e.g., `#000000, #FF0000, #008000`).
* Customers will see a **preset palette** instead of a free picker.
* This keeps color choices consistent with your brand or product requirements.

![Color Palette](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/image_neqflt.png)
### Color Link Group

If you want to make sure that multiple elements will always keep the same color, the Color Link Group is your way to go. 
* Navigate to the Product Builder
* Select the elements you want to link one at a time
* Assign a **unique link ID** to group elements together
* When one element’s color is changed, all linked elements update at the same time

###### Color Link Groups work with:
* Text elements
* PNG images
* Single-path SVG images

![Color Link Group](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/color-link-group_22z8hk.png)

Example: Link the front and back image of a t-shirt so the customer only picks a color once.

### PNG Color Modes

When working with PNG images, you can select a **color mode** to control how recoloring behaves:

![Colorization Mode](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/png-colorization-mode_ad9qou.png)


| Mode | Resulting Effect | Best Use Case |
| ---- |
| **Tint** | Recolors the entire image with the chosen hue, while preserving light/dark balance | Theming icons or graphics to match brand colors |
| **Multiply** | Applies a color cast that blends with the original hues and darkens the image | Adding depth or tinting photos — works best on **white base PNGs** |

| For clothing mockups (like t-shirts), use Multiply mode to simulate realistic recoloring. However, this mode doesn't work well with dark colors so use a white product image to start with. 

### Color Lists

If you want to offer the same set of colors in different places, you don't need to enter the hex codes for those colors everywhere. You can just create a **Color List** and select the list everywhere those colors should be used. 
To create a Color List:
* navigate to Resources > Colors
* scroll down to the bottom and enter the name for the Color List
* add the color hex codes of the colors you want to add to the list

![Create Color List](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/color-list-resources-2_1g7whwd.png)
| Color Lists can be used in most places where colors can be set.

### Where to set Color Options

You can define colorization settings in several places:

**Single Elements in Product Builder**
* While building a product, single elements can be selected
* In the **Element Options**, open the **Colors** segment 
* Set its available colorization options

![Colors in Product Builder](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/color-settings-pb_1frg0x3.png =170xauto)

**General Settings > Element Properties**
* Go to the **General Settings > Element Properties**
* Open **Images & Designs** or **Custom Texts**
* Scroll down until you see the input field **Colors **
* Enter the hex codes of the colors you want to be available on **all uploaded images or texts**

![Element Properties](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/element-properties-images-2_yi8oqn.png)

**Customization Profiles**
* Navigate to **General Settings > Customization Profiles**
* Open the Profile you want to change and select the **Colors tab**
* Select the color options you want to offer

![Color Selection in Profiles](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/colors-in-profiles_ingtba.png)

**Single Designs & Design Categories**
* Go to the **Designs backend**
* Open **Category Options** or **Single Design Options**
* In the **Colors tab**, select the color options you want to offer

![Color Selection in Designs](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/designs-2_c4emsy.png)

### Color Selection Panel

Aside from the toolbar color selection, you can also offer the color selection for predefined elements directly on the product page. Details on this option and how to set it up you can find [here](https://fpd-doc.ganymede-apps.net/en/article/color-selection-panel-1jb88ak/). This is how this setup option will look like:

![Color Selection Panel](https://storage.crisp.chat/users/helpdesk/website/-/c/b/1/7/cb1733eed2f3b800/image_1acyde1.png)

### Summary

There are multiple ways to offer coloring in the Fancy Product Designer app. In essence, there are two options to offer colorization:
* **Color Picker** = unlimited colors
* **Color Palette** = restricted set of brand colors

Additinally, there are a few useful tools and options:
* **Color Link Group** = synchronize multiple elements
* **Color Lists** = a preset group of colors you can use in different places
* **PNG image Color Modes (Tint & Multiply)** = flexible recoloring with realistic effects

Use these tools strategically to balance creative freedom with brand consistency.

| If there are any questions left just reach out to us in our in-app chat.