> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help-option.ymqapp.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 Picker

1. [Option](/ymq-options-v2/option)
2. [Input Type options](/ymq-options-v2/option/input-type-options)

# Color Picker

📌 The **Color Picker** **Field** enables customers to select a custom color using an interactive color panel. It's ideal for customizable products where the color of the item or text is important.

---

**🔧 Basic Settings**

* **Name** – Change the display name shown to customers.
* **Required Field** – Make the field mandatory before form submission.
* **Default Value**: Set a default color (via hex code) to be pre-selected when the page loads.
* **Column width** - Option represents a percentage of the overall width, e.g., 100%, 50%.
* **Add-on Price** – Add an extra cost when a customer fills out this field.
* **Conditional Logic** – Show/hide this field based on other option selections.

---

**💡 Advanced Settings**

1

**Color Preview Function**:

This feature allows the selected color from the **Color Picker** to be linked to elements such as a **Single line text**, **Multi line text**, enabling a **real-time preview**.

🎨 _Example:_

When a customer chooses a color and types into a text field, or views static content like a heading or paragraph, the **text will dynamically reflect the selected color**. This enhances interactivity and lets customers better visualize personalized options.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/5/2/31527735f143ae00/6f6407e8-3eb4-44d7-9918-df60fe_qnfmpf.jpg)

For other setting of Help text position/ HTML class /Column width, You can set up the same as other elements

2

**Allow transparency**

After enabling this feature, customers can select _**both color and**_ _**transparency**__**.**_

![](https://storage.crisp.chat/users/helpdesk/website/-/e/9/b/b/e9bb2b0b34edc800/dbb71a28-79fb-4b73-ada5-54a49e_1rh7asw.jpg)