> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/configurator/options-and-widgets/colour-picker-widget.md).

# Colour Picker Widget

Learn how to use Mimeeq's Colour Picker Widget to let customers personalize products with predefined colour swatches or selecting any colour from a colour picker.

The Colour Picker widget enhances the configurator's front end by allowing customers to dynamically alter the connected materials. This is particularly useful for offering custom colour options.

## How to Set Up the Widget

1. Navigate to the product admin's options tab and click "New Option Block."
2. Select "Colour Picker" as the mode type.
3. Configure the widget according to your preferences.

Below is a table detailing various options for the Colour Picker and their descriptions:

<table><thead><tr><th width="68.375">#</th><th width="175.85546875">Name</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Material</td><td>The default material for the Colour Picker, which can be linked to a mesh. This is optional, as you can also use the Colour Picker to override other material parameters based on rules.</td></tr><tr><td>2</td><td>Show Presets</td><td>Selecting "Yes" allows you to define a list of presets for fast selections. Choose "No" to omit the presets.</td></tr><tr><td>3</td><td>Allow User to Clear Value</td><td>If set to "No," the Colour Picker cannot be cleared. If set to "Yes," the Colour Picker can be reset to blank in the configurator view.</td></tr><tr><td>4</td><td>Initial Value</td><td>If "Allow User to Clear Value" is set to "No," this field becomes visible. It defines the starting value for the widget. The starting value will be this one unless a different starting value is set in your default configuration, in which case the default configuration takes the highest priority.</td></tr><tr><td>5</td><td>Presets</td><td>If "Show Presets" is set to "Yes," this section appears, allowing you to add colour presets for quick selection.</td></tr></tbody></table>

![Product Page -> Options -> Add Option Set](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FW1fSaqZ0Ympps5fvILxp%2Fcolour-picker-help-1_m5e0j5.png?alt=media)

4. Assign your Colour Picker to a group for it to appear.
5. Save your work.

![Create Colour Picker Option -> Assign to Group -> Save Changes](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FH1IkvoQGUdFnd7ddmnIv%2Fcolour-picker-help-11_2mg3qy.png?alt=media)

## Connecting the Colour Picker

There are several methods to connect the Colour Picker to a specific mesh. Here are three common approaches:

1. **Direct Connection:** If you've added a default material, the Colour Picker should be the primary option for configuration. Simply navigate to the 3D tab, go to the Meshes section, find the meshes you want to assign the widget to, choose mode dynamic, and select the Colour Picker as the value.

![How to Connect Colour Picker to 3D Meshes](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FLQsRyHVFPKbMd9MUMVLi%2Fcolour-picker-help-2_irrfci.png?alt=media)

2. **Material Override:** If you prefer to use the Colour Picker based on specific rules, you can use the Trigger and Action rule logic. For instance, you can set a trigger like "Select custom colour" and then choose an action, such as overriding meshes with another material (e.g., the Colour Picker).

![Rules -> Trigger & Actions -> Override Material](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FLbE7ZaSw23jvGI1fuJlW%2Fcolour-picker-image-5_k4z7md.png?alt=media)

3. **Override Material Parameters:** Alternatively, you can override material parameters. In this case, the material parameters window will open, allowing you to override the currently selected material with the Colour Picker as an albedo input.

![Rules -> Trigger & Actions -> Override Material Parameters](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F76n2rK31WAR5QMVk4fMA%2Fcolour-picker-image-4_w4kc4.png?alt=media)

## Configurator View Appearance

The appearance of the Colour Picker in the configurator view varies based on the theme used. Below are examples of how it appears in the Mimeeq theme:

{% tabs %}
{% tab title="Desktop" %}
![Desktop view](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2Fshvs9VIcqbfKA5Pz0noC%2Fcolour-picker-help5_l0pxq6.png?alt=media)

![Desktop view](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FNtlWE5Nn5cFSXA4yWEkg%2Fcolour-picker-help7_13pks9o.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![Mobile view](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2Fvg29v2rtT67Mm7LBvSXZ%2Fcolour-picker-help6_1w3n0pg.png?alt=media)

![Mobile view](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FdzonoA23wDYqrZeeqPgf%2Fcolour-picker-help8_11s0xqg.png?alt=media)
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.mimeeq.com/configurator/options-and-widgets/colour-picker-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.