> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

[localhost link]: http://localhost:3000/docs/5/app-studio/reference/gallery/color

[mintlify link]: https://doc.lucidworks.com/docs/5/app-studio/reference/gallery/color

[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1031

All of the colors can be used in the styling attribute: `styling="bg-raspberry text-paper-light"`
import { LwTemplate } from '/snippets/LwTemplate.jsx';

<LwTemplate />

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color01.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=293abc138300c476c79f43e7eb3e31dc" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color01.png" />

|                    |                      |                     |
| ------------------ | -------------------- | ------------------- |
| `bg-primary-light` | `bg-secondary-light` | `bg-tertiary-light` |
| `bg-primary`       | `bg-secondary`       | `bg-tertiary`       |
| `bg-primary-dark`  | `bg-secondary-dark`  | `bg-tertiary-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color02.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=e6f147541b742d5b7aff21691c1b8b13" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color02.png" />

|                      |                       |                   |
| -------------------- | --------------------- | ----------------- |
| `bg-raspberry-light` | `bg-strawberry-light` | `bg-carrot-light` |
| `bg-raspberry`       | `bg-strawberry`       | `bg-carrot`       |
| `bg-raspberry-dark`  | `bg-strawberry-dark`  | `bg-carrot-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color03.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=7b53bc0293d297e3227a865daf229c44" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color03.png" />

|                    |                      |                 |
| ------------------ | -------------------- | --------------- |
| `bg-pumpkin-light` | `bg-sunflower-light` | `bg-leaf-light` |
| `bg-pumpkin`       | `bg-sunflower`       | `bg-leaf`       |
| `bg-pumpkin-dark`  | `bg-sunflower-dark`  | `bg-leaf-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color04.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=72675813efabb871808ed5fd01a3d991" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color04.png" />

|                  |                    |                 |
| ---------------- | ------------------ | --------------- |
| `bg-grass-light` | `bg-emerald-light` | `bg-mint-light` |
| `bg-grass`       | `bg-emerald`       | `bg-mint`       |
| `bg-grass-dark`  | `bg-emerald-dark`  | `bg-mint-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color05.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=1563832d44ebd5f62e2f1c0f5be18f6d" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color05.png" />

|                 |                |                  |
| --------------- | -------------- | ---------------- |
| `bg-aqua-light` | `bg-sky-light` | `bg-royal-light` |
| `bg-aqua`       | `bg-sky`       | `bg-royal`       |
| `bg-aqua-dark`  | `bg-sky-dark`  | `bg-royal-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color06.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=68420f0aee56d90e25e782e5e0c44e3d" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color06.png" />

|                     |                 |                  |
| ------------------- | --------------- | ---------------- |
| `bg-lavender-light` | `bg-pink-light` | `bg-paper-light` |
| `bg-lavender`       | `bg-pink`       | `bg-paper`       |
| `bg-lavender-dark`  | `bg-pink-dark`  | `bg-paper-dark`  |

<img src="https://mintcdn.com/lucidworks/svjqq6CDiXcpPrjs/assets/images/app-studio/as-examples/gallery/color07.png?fit=max&auto=format&n=svjqq6CDiXcpPrjs&q=85&s=e021f736b7b28370ea4948009fbb6ba4" alt="Example" width="1271" height="411" data-path="assets/images/app-studio/as-examples/gallery/color07.png" />

|                    |                     |                    |
| ------------------ | ------------------- | ------------------ |
| `bg-duckegg-light` | `bg-concrete-light` | `bg-asphalt-light` |
| `bg-duckegg`       | `bg-concrete`       | `bg-asphalt`       |
| `bg-duckegg-dark`  | `bg-concrete-dark`  | `bg-asphalt-dark`  |