> ## 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/4/app-studio/reference/gallery/color

[mintlify link]: https://doc.lucidworks.com/docs/4/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` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.