# Colour Property

The Colour Property allows you to configure a colour property. 

You can input a Name, decide whether it should be Responsive or not and choose a suitable Default colour.

* Open the Components Properties modal.
* Select the Colour Property you wish to configure.

<figure><img src="/files/QNzTeuw3bqVigr1pHres" alt=""><figcaption></figcaption></figure>

This is an example of how it will look once configured.

## Connect&#x20;

The Colour Property needs to be connected for it to be applied to the canvas.

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Colour Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="/files/uBbikkIJPhQPWGyLSvAX" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* Find and select the Colour property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon above the Colour property you wish to modify.

<figure><img src="/files/FAzfdvwKIdkYl1AkcZbo" alt=""><figcaption></figcaption></figure>

* Choose the appropriate Colour property in the dropdown and click to open the Component Properties modal.&#x20;

<figure><img src="/files/zFnSZhfnwFM8KF9CSobW" alt=""><figcaption></figcaption></figure>

* The Colour Property will now be visible in the Content field in green which indicates that it is connected.
* Click the Colour Property to open the Component Properties modal to make any further adjustments.

<figure><img src="/files/jZNeGlvsx38CsSysXe9N" alt=""><figcaption></figcaption></figure>

## Customise

To customise the colour property, make sure Customise is selected in the tool bar.

* Adjust to required colour in the Block Inspector and it will be visible on the Canvas.

<figure><img src="/files/ncJqugWyIHIaCVytLT0h" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected Colour property.

* Open the Component Properties modal.
* Select required text property.
* Input suitable label name to Name field.

![](/files/QbYsRA5Mg1hsvMEkwCzh)

The required label will now be visible in the Block Inspector next to the Colour field.

<figure><img src="/files/u3WmfUUMn4LzGNRR4SQX" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set a suitable default Colour to your component.

* Open the Components Properties.
* Select required Colour property.
* Open Settings tab.
* Input required default Colour in Default field.

![](/files/Xa480DOg0hPJyi8HIOc1)

This is how it should now look on the canvass.

<figure><img src="/files/7Wpfa4yihtaB3cgqyWt5" alt=""><figcaption></figcaption></figure>

### Responsive

This property can be toggled to allow you to set different Colour properties on selected screen sizes.

* Toggle Responsive on and off as required.
* Select required screen size (desktop, tablet, mobile, normal).

<figure><img src="/files/jM2roHTN1polIaUxjAwF" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://docs.cwicly.com/cwicly/components/properties-add/colour-property.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.