> 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

Let customers personalise products with any colour or quick presets. Learn how to set up the Colour Picker Widget and connect it to your 3D meshes.

The Colour Picker widget lets customers dynamically change the connected materials in the configurator's front end. It is particularly useful for offering custom colour options.

***

## How to set up the widget

{% stepper %}
{% step %}

### Create the Colour Picker option block

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.

<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><strong>Material</strong></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><strong>Show Presets</strong></td><td>Selecting <strong>Yes</strong> allows you to define a list of presets for fast selections. Choose <strong>No</strong> to omit the presets.</td></tr><tr><td>3</td><td><strong>Allow User to Clear Value</strong></td><td>If set to <strong>No</strong>, the Colour Picker cannot be cleared. If set to <strong>Yes</strong>, the Colour Picker can be reset to blank in the configurator view.</td></tr><tr><td>4</td><td><strong>Initial Value</strong></td><td>If <strong>Allow User to Clear Value</strong> is set to <strong>No</strong>, 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><strong>Presets</strong></td><td>If <strong>Show Presets</strong> is set to <strong>Yes</strong>, this section appears, allowing you to add colour presets for quick selection.</td></tr></tbody></table>

![Colour Picker option block settings on the product Options tab](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)
{% endstep %}

{% step %}

### Assign it to a group and save

1. Assign your Colour Picker to a group for it to appear.
2. Save your work.

![Colour Picker option assigned to a group, with 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)
{% endstep %}
{% endstepper %}

***

## Connecting the Colour Picker

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

{% tabs %}
{% tab title="Direct connection" %}
If you've added a default material, the Colour Picker should be the primary option for configuration.

1. Navigate to the **3D** tab and go to the **Meshes** section.
2. Find the meshes you want to assign the widget to.
3. Choose mode **Dynamic** and select the Colour Picker as the value.

![Meshes section in the 3D tab with the Colour Picker selected as a dynamic value](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)
{% endtab %}

{% tab title="Material override" %}
To use the Colour Picker based on specific rules, use the Trigger and Action rule logic. For instance, set a trigger like "Select custom colour" and then choose an action, such as overriding meshes with another material (for example, the Colour Picker).

![Rule with a trigger and an Override Material action using the Colour Picker](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)
{% endtab %}

{% tab title="Override material parameters" %}
Alternatively, override material parameters. The material parameters window opens, allowing you to override the currently selected material with the Colour Picker as an albedo input.

![Override Material Parameters window with the Colour Picker as the albedo input](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)
{% endtab %}
{% endtabs %}

***

## Picking and reusing colours

The colour picker includes tools that make it quicker to choose and reuse colours. They are available in standard and modular configurators, in admin colour settings and in AI Studio.

<table><thead><tr><th width="68.375">#</th><th width="175.85546875">Tool</th><th>What it does</th></tr></thead><tbody><tr><td>1</td><td><strong>Pick from screen</strong></td><td>Samples a colour from anywhere on your screen, for example from a brand guide or a photo open in another window.</td></tr><tr><td>2</td><td><strong>Recently Used</strong></td><td>Lists your last 16 colours, newest first, together with their opacity. Select one to reuse it in any colour field.</td></tr><tr><td>3</td><td><strong>Value labels</strong></td><td>In configurator colour pickers, drag the red, green and blue value labels to adjust their numbers. Where opacity is available, you can drag its label too.</td></tr></tbody></table>

{% hint style="info" %}
**Pick from screen** depends on your browser. If your browser doesn't support screen colour picking, you can still choose colours with the palette, hue slider or values.
{% endhint %}

***

## 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" %}
![Colour Picker with presets in the desktop configurator 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)

![Colour Picker open in the desktop configurator 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" %}
![Colour Picker with presets in the mobile configurator 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)

![Colour Picker open in the mobile configurator 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 %}

***

## Related articles

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Thumbnail Widget</strong></td><td>Display option sets as a visual grid of swatches or images.</td><td></td></tr><tr><td><strong>Print on Demand</strong></td><td>Let customers place their own images and logos on products.</td><td></td></tr><tr><td><strong>Button Widget</strong></td><td>Add buttons that reset options, guide steps or fire events.</td><td></td></tr></tbody></table>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.