# 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](https://docs.shimoku.com/dev/building-web-app/theming) 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
PreviewColor nameHEXVariable nameComments
Color primary#002FD8var(--color-primary)
Color primary light#B8C7F9var(--color-primary-light)
Color primary dark#0315B9var(--color-primary-dark)
Color secondary#29D86Fvar(--color-secondary)
Color secondary light#C7F0D8var(--color-secondary-light)
Color secondary dark#09B85Avar(--color-secondary-dark)
Color success#2e7d32var(--color-success)
Color success light#4caf50var(--color-success-light)
Color warning#ed6c02var(--color-warning)
Color warning light#ff9800var(--color-warning-light)
Color error#d32f2fvar(--color-error)
Color error light#ef5350var(--color-error-light)
Color status error#F76868var(--color-status-error)
Color white#FFFFFFvar(--color-white)
Color black#202A36var(--color-black)
Color base icon#202A36var(--color-base-icon)
Color background-default#FFFFFFvar(--background-default)
Color Background paper#FFFFFFvar(--background-paper)
### Complementary & Chart series colors
PreviewColor nameHEXVariableComments
Complementary red#EE3A4Fvar(--complementary-red)
Complementary red light#F86C7Dvar(--complementary-red-light)
Complementary green#2ED020var(--complementary-green)
Complementary yellow#F3B922var(--complementary-yellow)
Complementary orange#ED5627var(--complementary-orange)
Complementary aqua#20C69Evar(--complementary-aqua)
Complementary violet#7208B4var(--complementary-violet)
Chart C1#4C72F9var(--chart-C1)
Chart C2#74D890var(--chart-C2)
Chart C3#F2BB67var(--chart-C3)
Chart C4#F78A68var(--chart-C4)
Chart C5#C6E2E9var(--chart-C5)
Chart C6#9BA4F5var(--chart-C6)
Chart C7#EAB8CDvar(--chart-C7)
Chart C8#D28AC7var(--chart-C8)
Chart C9#B6AFD0var(--chart-C9)
Chart C10#4C5AA4var(--chart-C10)
### Grey
PreviewColor nameHEXVarComments
Grey50#fafafavar(--color-grey-50)
Grey100#FAFAFBvar(--color-grey-100)
Grey200#F1F1F5var(--color-grey-200)
Grey300#E2E2EAvar(--color-grey-300)
Grey400#D5D5DCvar(--color-grey-400)
Grey500#AEAEAEvar(--color-grey-500)
Grey600#92929Dvar(--color-grey-600)
Grey700#696974var(--color-grey-700)
Grey800#44444Fvar(--color-grey-800)
--- # 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.shimoku.com/dev/building-web-app/theming/colors-usage.md?ask= ``` 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.