> For the complete documentation index, see [llms.txt](https://docs.shimoku.com/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shimoku.com/dev/building-web-app/theming/colors-usage.md).

# Colors Usage

Within Shimoku you can use the different style tokens for components such as charts or html. This allows consistency to be maintained and makes it easy for Theme changes to be uncomplicated.

From the [theming](/dev/building-web-app/theming.md) json you can change the hexes to adapt them to your color palette.

{% hint style="danger" %}
**DO NOT MODIFY the Variable name**
{% endhint %}

{% hint style="info" %}
Use the variable name within your graphics or html for consistency.
{% endhint %}

{% hint style="info" %}
To easily modify the styles **change the HEX color of the variable**. Check that the affected components are displayed correctly as you want.
{% endhint %}

For ease of use an enumerator can be used where all these names are already defined, you can import it from the library like this: 

```python
from shimoku import ShimokuPalette
```

### Main palette

<table><thead><tr><th width="77">Preview</th><th>Color name</th><th width="113">HEX</th><th width="252">Variable name</th><th>Comments</th></tr></thead><tbody><tr><td><img src="/files/O3KDL2YVjUIpIm1fVQig" alt="" data-size="line"></td><td>Color primary</td><td>#002FD8</td><td>var(--color-primary)</td><td></td></tr><tr><td><img src="/files/PePYsD9BrFK5MpoHtpHS" alt="" data-size="line"></td><td>Color primary light</td><td>#B8C7F9</td><td>var(--color-primary-light)  </td><td></td></tr><tr><td><img src="/files/AtKSy8tsJ6FYsNaMrFJt" alt="" data-size="line"></td><td>Color primary dark</td><td>#0315B9</td><td>var(--color-primary-dark) </td><td></td></tr><tr><td><img src="/files/sjfNCp0PJ9EhhyiEEsIH" alt="" data-size="line"></td><td>Color secondary</td><td>#29D86F</td><td>var(--color-secondary)</td><td></td></tr><tr><td><img src="/files/qjk4fAEwQX6oNMMF4E8B" alt="" data-size="line"></td><td>Color secondary light</td><td>#C7F0D8</td><td>var(--color-secondary-light) </td><td></td></tr><tr><td><img src="/files/xOJpIjiQBkYLjpMUaetY" alt="" data-size="line"></td><td>Color secondary dark</td><td>#09B85A</td><td>var(--color-secondary-dark) </td><td></td></tr><tr><td><img src="/files/H79Kn1RTD4MDFprLkee6" alt="" data-size="line"></td><td>Color success</td><td>#2e7d32</td><td>var(--color-success)</td><td></td></tr><tr><td><img src="/files/UjLVE2KRFfTng5SSIjr0" alt="" data-size="line"></td><td>Color success light</td><td>#4caf50</td><td>var(--color-success-light)</td><td></td></tr><tr><td><img src="/files/gEiVMbigBWX2mE2YOV6F" alt="" data-size="line"></td><td>Color warning</td><td>#ed6c02</td><td>var(--color-warning)</td><td></td></tr><tr><td><img src="/files/1muOwcPncEKRpCpMvQ34" alt="" data-size="line"></td><td>Color warning light</td><td>#ff9800</td><td>var(--color-warning-light)</td><td></td></tr><tr><td><img src="/files/6q1ztOwFQ6F3Z9yGcBYa" alt="" data-size="line"></td><td>Color error</td><td>#d32f2f</td><td>var(--color-error)</td><td></td></tr><tr><td><img src="/files/TBAbpQ2IwGvwOF5OG3e3" alt="" data-size="line"></td><td>Color error light</td><td>#ef5350</td><td>var(--color-error-light)</td><td></td></tr><tr><td><img src="/files/XtiHY9jD2uajXLmoBG1v" alt="" data-size="line"></td><td>Color status error</td><td>#F76868</td><td>var(--color-status-error)</td><td></td></tr><tr><td></td><td>Color white</td><td>#FFFFFF</td><td>var(--color-white)</td><td></td></tr><tr><td><img src="/files/5Z0oYALwcuo54RgZSNGC" alt="" data-size="line"></td><td>Color black</td><td>#202A36</td><td>var(--color-black)</td><td></td></tr><tr><td><img src="/files/5Z0oYALwcuo54RgZSNGC" alt="" data-size="line"></td><td>Color base  icon</td><td>#202A36</td><td>var(--color-base-icon)</td><td></td></tr><tr><td></td><td>Color background-default</td><td>#FFFFFF</td><td>var(--background-default)</td><td></td></tr><tr><td></td><td>Color Background paper</td><td>#FFFFFF</td><td>var(--background-paper)</td><td></td></tr></tbody></table>

### Complementary & Chart series colors

<table><thead><tr><th width="83">Preview</th><th>Color name</th><th width="112">HEX</th><th width="285">Variable</th><th>Comments</th></tr></thead><tbody><tr><td><img src="/files/u4PKyyE4Fd4Amrre6LjG" alt="" data-size="line"></td><td>Complementary red</td><td>#EE3A4F</td><td>var(--complementary-red)</td><td></td></tr><tr><td><img src="/files/2TLeEfHsitroALpSZMwU" alt="" data-size="line"></td><td>Complementary red light</td><td>#F86C7D</td><td>var(--complementary-red-light)</td><td></td></tr><tr><td><img src="/files/6aWYx6Zz0pTph4V0uPxd" alt="" data-size="line"></td><td>Complementary green</td><td>#2ED020</td><td>var(--complementary-green)</td><td></td></tr><tr><td><img src="/files/wrLZIJBwl01q8d18bQyo" alt="" data-size="line"></td><td>Complementary yellow</td><td>#F3B922</td><td>var(--complementary-yellow)</td><td></td></tr><tr><td><img src="/files/ZSN9DyEPkYwuJ195o6xE" alt="" data-size="line"></td><td>Complementary orange</td><td>#ED5627</td><td>var(--complementary-orange)</td><td></td></tr><tr><td><img src="/files/43kxYe5a3E2AXd8FJKPk" alt="" data-size="line"></td><td>Complementary aqua</td><td>#20C69E</td><td>var(--complementary-aqua)</td><td></td></tr><tr><td><img src="/files/BMX1eAM5a4BA9nOJZqbG" alt="" data-size="line"></td><td>Complementary violet</td><td>#7208B4</td><td>var(--complementary-violet)</td><td></td></tr><tr><td><img src="/files/ZHnvIWkiOIEyOtGHxvZA" alt="" data-size="line"></td><td>Chart C1</td><td>#4C72F9</td><td>var(--chart-C1)</td><td></td></tr><tr><td><img src="/files/fIlj17P2NgKNONhWn4Bk" alt="" data-size="line"></td><td>Chart C2</td><td>#74D890</td><td>var(--chart-C2)</td><td></td></tr><tr><td><img src="/files/VN3wYiNCfrJzJDK1ldeD" alt="" data-size="line"></td><td>Chart C3</td><td>#F2BB67</td><td>var(--chart-C3)</td><td></td></tr><tr><td><img src="/files/RHpq6HWnmENdlrB86fv4" alt="" data-size="line"></td><td>Chart C4</td><td>#F78A68</td><td>var(--chart-C4)</td><td></td></tr><tr><td><img src="/files/8hu2hzUUG40jNSybMz0J" alt="" data-size="line"></td><td>Chart C5</td><td>#C6E2E9</td><td>var(--chart-C5)</td><td></td></tr><tr><td><img src="/files/nYLnBARoEmRVxees41gA" alt="" data-size="line"></td><td>Chart C6</td><td>#9BA4F5</td><td>var(--chart-C6)</td><td></td></tr><tr><td><img src="/files/ytdnAj2ccZkR60pryBWu" alt="" data-size="line"></td><td>Chart C7</td><td>#EAB8CD</td><td>var(--chart-C7)</td><td></td></tr><tr><td><img src="/files/CCTkpkahK2y1nGxJBNBn" alt="" data-size="line"></td><td>Chart C8</td><td>#D28AC7</td><td>var(--chart-C8)</td><td></td></tr><tr><td><img src="/files/5Y4TR1ZT4zojq5TAHUd1" alt="" data-size="line"></td><td>Chart C9</td><td>#B6AFD0</td><td>var(--chart-C9)</td><td></td></tr><tr><td><img src="/files/30cxLMSFQBK4s360Rxmt" alt="" data-size="line"></td><td>Chart C10</td><td>#4C5AA4</td><td>var(--chart-C10)</td><td></td></tr></tbody></table>

### Grey

<table><thead><tr><th width="98">Preview</th><th width="133">Color name</th><th width="113">HEX</th><th width="219">Var</th><th>Comments</th></tr></thead><tbody><tr><td><img src="/files/4WbgrGDyv4ieBNf4Jkn4" alt="" data-size="line"></td><td>Grey50</td><td>#fafafa</td><td>var(--color-grey-50)</td><td></td></tr><tr><td><img src="/files/cGoBPIs3evsc94dZ0Tyc" alt="" data-size="line"></td><td>Grey100</td><td>#FAFAFB</td><td>var(--color-grey-100)</td><td></td></tr><tr><td><img src="/files/oNp82phu35X53c9jzgIW" alt="" data-size="line"></td><td>Grey200</td><td>#F1F1F5</td><td>var(--color-grey-200)</td><td></td></tr><tr><td><img src="/files/2bl0fk3Gwbuk52S7L4NY" alt="" data-size="line"></td><td>Grey300</td><td>#E2E2EA</td><td>var(--color-grey-300)</td><td></td></tr><tr><td><img src="/files/N3afu7GMfJUgeQ1cuOSw" alt="" data-size="line"></td><td>Grey400</td><td>#D5D5DC</td><td>var(--color-grey-400)</td><td></td></tr><tr><td><img src="/files/S7c8FTYFCFrZBMuYkk05" alt="" data-size="line"></td><td>Grey500</td><td>#AEAEAE</td><td>var(--color-grey-500)</td><td></td></tr><tr><td><img src="/files/2ixjd1BoWvJiMbqqfnOb" alt="" data-size="line"></td><td>Grey600</td><td>#92929D</td><td>var(--color-grey-600)</td><td></td></tr><tr><td><img src="/files/XILnrAIJ4eGrlMPvfhzO" alt="" data-size="line"></td><td>Grey700</td><td>#696974</td><td>var(--color-grey-700)</td><td></td></tr><tr><td><img src="/files/h2AqCUgVy1M0UmG94vua" alt="" data-size="line"></td><td>Grey800</td><td>#44444F</td><td>var(--color-grey-800)</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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.shimoku.com/dev/building-web-app/theming/colors-usage.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.