# Color Palette

FloatGrids uses a token-based color palette so every token has a base color as a parent. You can find this color palette under the same nomenclature in both Figma and Unity.

## FloatGrids color palette

### Tokens

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FyOV55eEgye760Tag7OE7%2Fimage.png?alt=media&#x26;token=349d75be-149c-4ef2-bb21-003a40b89234" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FdXmQTGa2KXz2VJ1hcTmI%2Fimage.png?alt=media&#x26;token=870d2237-daa2-48a5-bdc4-07f077b5a31f" alt=""><figcaption></figcaption></figure>

### Tokens in Figma and Unity

| Color palette in Unity                                                                                                                                                                                              | Color palette in Figma                                                                                                                                                                                              |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2F0YpedyYKEXdbZcsiRgGI%2Fimage.png?alt=media\&token=25929992-dce1-4e70-b5dc-085432d5ab3e) | ![](https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FnO4gNULR29zjZkK8rgJU%2Fimage.png?alt=media\&token=81dd69a3-c33a-439d-8508-9aeb1b9a7ccb) |

### Base colors

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FJ4XASmfa50mcb4bEsv78%2Fimage.png?alt=media&#x26;token=43b0a5e0-f268-4ade-a79d-bdf65bd6789a" alt=""><figcaption></figcaption></figure>

## How to create your own base colors

1. Get a 10 color range color palette [here](https://uicolors.app/create).&#x20;

{% hint style="info" %}
**Reduce saturation for good contrast**

Colors tend to be brigther in VR than they are in desktop or mobile devices. If your Primary color (500) looks too bright in Unity, in the link provided above, go to Edit/Saturation/All Shades and reduce the saturation. Make some tests in Unity to see the actual result
{% endhint %}

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FRBRtGepsQjzmq26xOaRO%2FSaturated%20colors.png?alt=media&#x26;token=4432b41e-6e9c-4b2b-b75f-245aa2585d3c" alt=""><figcaption><p>Generated color palette</p></figcaption></figure>

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FRRJK0CatNVHgh9C6VpMB%2FSaturated%20color%202.png?alt=media&#x26;token=d92e647e-184f-4f8c-9da4-fdc24e93bbef" alt=""><figcaption><p>In the Edit page, reduce the saturation if the Primary was too shine</p></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.floatgrids.com/features/color-palette.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.
