# Colour Choice & Strategy

## Light & Colour in The Sandbox

{% hint style="info" %}
Learn about managing one palette in the Modeler's [**Palette Panel**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth/broken-reference).

Learn about managing multiple shared palettes in a compound or animated asset in the Animator's [**Library Panel**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth/broken-reference).
{% endhint %}

{% tabs %}
{% tab title="Reference: Colour in VoxEdit" %}

### Reference: Colour in VoxEdit

<table data-view="cards" data-full-width="true"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/pC3Mnk4jWykbqn9Ul7Gx/image.png" alt=""> <span data-gb-custom-inline data-tag="emoji" data-code="2195">↕️</span> Hue Selection</td><td><ul><li><strong>Hue</strong> is the colour base</li></ul></td></tr><tr><td><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/DptMKqkQRpjYtDrdDuYD/image.png" alt=""> <span data-gb-custom-inline data-tag="emoji" data-code="2195">↕️</span> Light<br><span data-gb-custom-inline data-tag="emoji" data-code="2194">↔️</span> Saturation</td><td><ul><li>Saturation is intensity</li><li><p>Lightness is:</p><ul><li><span data-gb-custom-inline data-tag="emoji" data-code="2b06">⬆️</span>tint (whiter)</li><li><span data-gb-custom-inline data-tag="emoji" data-code="2b07">⬇️</span>shade (blacker)</li></ul></li></ul></td></tr><tr><td><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/1onUciqYPnxFB6zZVb14/image.png" alt=""> Emissive Colour<br><br>(Toggle)</td><td>This button switches the colour into a mode that creates the illusion of casting a glowing light from the asset when used in an Experience.<br><br><strong>Tip:</strong> <br>To make an asset shine light on other assets placed in an Experience, use <a href="../../../../game-maker/docs/components/display/light"><strong>Light</strong> </a>behaviour.</td></tr></tbody></table>
{% endtab %}

{% tab title="Colour Differences" %}

### Emissive Colour Differences

{% hint style="warning" %}
**QUALITY ASSURANCE**

Colour and emissive glow may appear different between VoxEdit, the Marketplace, and in the game world of Game Maker and the Game Client. Test assets thoroughly for game world quality. The graphic below will be updated soon to reflect recent updates to the ecosystem.
{% endhint %}

Below is a helpful comparison of how some colours and emissive glow will appear in different software of The Sandbox ecosystem.

<figure><img src="https://s3.amazonaws.com/com.appolearning.files/production/uploads/uploaded_file/b4f34cdb-e75d-4292-8825-e34c78de0fe9/EmissionTest_VE_extended__1_.png" alt="" width="375"><figcaption><p>Different software on our platform handle light a bit differently. <strong>Aim for the desired result in Game Maker.</strong></p></figcaption></figure>
{% endtab %}

{% tab title="Light Behavior" %}

### New Light Behaviour

{% hint style="info" %}
Game Maker's Light behaviour may affect the way assets appear depending on the light's colour, intensity, and other settings.
{% endhint %}

Light behaviour can be used to make the emissive colours of an asset seem to shine their light onto other nearby objects to make a scene feel more natural since assets do not emit light onto other surfaces.

**Example:**

The image on the right shows how light in an Experience changes the apparent color of the asset.

<div><figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/wY3oJX1TsFj5pVVv2GdN/gm%20asset%20light%20sample.png" alt="" width="188"><figcaption><p>Marketplace<br>light emission not shown</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/J6U6ffJN7n1UaX1gr6Ps/gm%20vending%20machine%20no%20light.png" alt="" width="184"><figcaption><p>Game Maker<br>light emission</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/QpNYKqvRp6bVv95W16Hx/gm%20vending%20machine%20light.webp" alt="" width="188"><figcaption><p>Game Maker<br>light emission &#x26; light behaviour</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

​

## Colour Theory

A colour sphere (below) is a 3D representation of hue, saturation, lightness, and darkness.

* Hue - the pure base of a colour
* Tint - lightness applied to a hue
* Shade - darkness applied to a hue
* Saturation - the intensity applied to a hue

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F5EXhdlVO3E2ujD89WGrV%2Fimage.png?alt=media&#x26;token=b110a54a-d7c2-473a-9839-2c3a9e1c0e11" alt=""><figcaption><p>Attribution: Created by <a href="https://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a></p></figcaption></figure>

A colour wheel (below) is a simple 2D visual aid that arranges colour by wavelength. It's useful for selecting colour combinations that can be adjusted in lightness/darkness and saturation to create the mood for your art.&#x20;

A variety of colour strategies are shown below: primary, analogous, secondary, complimentary, square, and split complementary.

<figure><img src="https://s3.amazonaws.com/com.appolearning.files/production/uploads/uploaded_file/241fc976-00c3-420c-bfd7-0aabababe377/color-theory-basics.jpg" alt=""><figcaption><p>​<a href="https://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/">Beginnings of Colour Theory (Source: Hongkiat.com)</a>​</p></figcaption></figure>

### ​Cohesiveness

{% hint style="success" %}
**EXPERIENCE ART & NFT SALES**

Create a unique and cohesive art style for an Experience or a group of related assets to sell on the Marketplace so they blend together quite well.
{% endhint %}

An easy strategy for creating an attractive palette of colours that work well together:

1. Pick a hue combination (above)
2. Set saturation and lightness for mood
3. Make multiple colour blends with different hues, but similar saturation and lightness

{% hint style="info" %}
VoxEdit allows for 5 custom palettes per asset in the Animator (one palette per model).
{% endhint %}

## Troubleshooting Colour

Sometimes an asset just doesn't look right and it's hard to figure out why. Use the ideas below from Designmantic to try some potential solutions.

<div data-full-width="false"><figure><img src="https://s3.amazonaws.com/com.appolearning.files/production/uploads/uploaded_file/a0936359-a428-4cbf-9acd-8d79abc3562f/Color-Theory-Infographic.jpg" alt=""><figcaption><p>Right Click this Image from <a href="https://www.designmantic.com/blog/infographics/the-10-commandments-of-color-theory/">Designmantic</a> to see it at full resolution in a new tab.</p></figcaption></figure></div>

## Adding Colours from Screen to Palette

To save time with pre-made palettes, you can find many resources online, such as [**Color Hunt**](https://colorhunt.co/).&#x20;

Then you can either copy the colour code shown and paste into VoxEdit's [**Material Panel**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth/broken-reference) or use the new colour picker button <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FgeeYUVedDtAE2918lVn5%2Fimage.png?alt=media&#x26;token=e11e2af3-b17c-48b1-b79e-ccd4b7b9e7a8" alt="" data-size="line"> in the [**Palette Panel**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth/broken-reference) to add any colour from your screen to the selected palette swatch.


---

# 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.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth/colour-choice-and-strategy.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.