> For the complete documentation index, see [llms.txt](https://help.blings.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.blings.io/apps/blings-studio/connectors/color-connector.md).

# Color Connector

Use the Color Connector when a shape layer, text layer, or shared color should change dynamically. Typical uses include brand colors, campaign colors, product themes, status colors, and audience-specific visual states.

<figure><img src="/files/aYjJxUZwdCExQXDcxw63" alt="Studio connector list with color connectors mapped to brand color fields" width="375"><figcaption></figcaption></figure>

## Options

| Option                   | What it controls                                                     | Notes                                                                                         |
| ------------------------ | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| **Target color**         | The layer color or global HEX value affected by the connector.       | Confirm whether the connector should affect one selected layer or every matching color value. |
| **Data source**          | A Dynamic Data field, Live Control value, edit value, or expression. | Use Live Control for shared brand colors and Dynamic Data for viewer-specific color states.   |
| **Edit color**           | A HEX value entered directly in Studio.                              | Useful for fixed project colors that may be exposed to Platform editing.                      |
| **Expression**           | JavaScript that returns or decides the color.                        | Use for conditional colors such as correct, incorrect, warning, or success states.            |
| **Default or fallback**  | The color used when the source value is missing or invalid.          | Keep fallback colors aligned with the design system.                                          |
| **Platform editing**     | Whether operators can update the color from Platform.                | Enable for values such as brand color or campaign accent color.                               |
| **Internal description** | A note explaining which visual element the color controls.           | Important when several layers share similar colors.                                           |

## Choose Layer or Global Color

| Selection             | What it affects                                   | Use it when                                                                  |
| --------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Layer-based color** | The selected layer or selected color property.    | Only one layer or a small set of selected layers should change.              |
| **Global HEX value**  | Every project color that uses the same HEX value. | A brand or theme color appears in several places and should change together. |

{% hint style="info" %}
Always preview dynamic colors on the real scene background. A valid color can still fail if it does not provide enough contrast for text, buttons, or important visual states.
{% endhint %}

## Configure a Dynamic Color

{% stepper %}
{% step %}

### Select the Color Target

Choose the shape, text color, or global HEX value that should become dynamic.
{% endstep %}

{% step %}

### Choose the Source

Select Data, Live Control, Edit, or Expression depending on whether the color is per viewer, shared across the project, fixed, or calculated.
{% endstep %}

{% step %}

### Add a Fallback Color

Set a fallback that keeps the design usable if the source field is missing or invalid.
{% endstep %}

{% step %}

### Preview Contrast

Check the color against the actual background, nearby media, and any text that depends on it.
{% endstep %}
{% endstepper %}

## Success Checks

Before publishing a Color Connector, confirm:

* Runtime values use a valid color format such as HEX.
* The correct layer or global color scope is selected.
* The fallback color fits the design.
* Text and important UI states remain readable.
* Live Control is used for shared operational colors that should be updated centrally.

{% content-ref url="/pages/vF3GOo8viXK19zuT75hD" %}
[Data in Studio](/apps/blings-studio/data.md)
{% endcontent-ref %}