# Color Tokens
Color tokens are used to maintain consistent color use throughout your app.
## Theme Colors
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
This will make all colors in the primary color palette various shades of purple.
```css
:root {
/* Changes the primary color palette to purple */
--sl-color-blue-50: #faf5ff;
--sl-color-blue-100: #f3e8ff;
--sl-color-blue-200: #e9d5ff;
--sl-color-blue-300: #d8b4fe;
--sl-color-blue-400: #c084fc;
--sl-color-blue-500: #a855f7;
--sl-color-blue-600: #9333ea;
--sl-color-blue-700: #7e22ce;
--sl-color-blue-800: #6b21a8;
--sl-color-blue-900: #581c87;
}
```
?> Although CSS lets you override custom properties on specific elements, these values _must_ be scoped to the `:root` block for the entire palette to be recalculated. [See this page for details.](https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop)
## Slate
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-white` | |
| `--sl-color-slate-50` | |
| `--sl-color-slate-100` | |
| `--sl-color-slate-200` | |
| `--sl-color-slate-300` | |
| `--sl-color-slate-400` | |
| `--sl-color-slate-500` | |
| `--sl-color-slate-600` | |
| `--sl-color-slate-700` | |
| `--sl-color-slate-800` | |
| `--sl-color-slate-900` | |
| `--sl-color-slate-950` | |
| `--sl-color-black` | |
## Gray
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-white` | |
| `--sl-color-gray-50` | |
| `--sl-color-gray-100` | |
| `--sl-color-gray-200` | |
| `--sl-color-gray-300` | |
| `--sl-color-gray-400` | |
| `--sl-color-gray-500` | |
| `--sl-color-gray-600` | |
| `--sl-color-gray-700` | |
| `--sl-color-gray-800` | |
| `--sl-color-gray-900` | |
| `--sl-color-gray-950` | |
| `--sl-color-black` | |
## Red
| Token | Example |
| ------------------------ | ----------------------------------------------------------------------------------- |
| `--sl-color-red-50` | |
| `--sl-color-red-100` | |
| `--sl-color-red-200` | |
| `--sl-color-red-300` | |
| `--sl-color-red-400` | |
| `--sl-color-red-500` | |
| `--sl-color-red-600` | |
| `--sl-color-red-700` | |
| `--sl-color-red-800` | |
| `--sl-color-red-900` | |
| `--sl-color-red-950` | |
## Yellow
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-yellow-50` | |
| `--sl-color-yellow-100` | |
| `--sl-color-yellow-200` | |
| `--sl-color-yellow-300` | |
| `--sl-color-yellow-400` | |
| `--sl-color-yellow-500` | |
| `--sl-color-yellow-600` | |
| `--sl-color-yellow-700` | |
| `--sl-color-yellow-800` | |
| `--sl-color-yellow-900` | |
| `--sl-color-yellow-950` | |
## Green
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-green-50` | |
| `--sl-color-green-100` | |
| `--sl-color-green-200` | |
| `--sl-color-green-300` | |
| `--sl-color-green-400` | |
| `--sl-color-green-500` | |
| `--sl-color-green-600` | |
| `--sl-color-green-700` | |
| `--sl-color-green-800` | |
| `--sl-color-green-900` | |
| `--sl-color-green-950` | |
## Blue
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-blue-50` | |
| `--sl-color-blue-100` | |
| `--sl-color-blue-200` | |
| `--sl-color-blue-300` | |
| `--sl-color-blue-400` | |
| `--sl-color-blue-500` | |
| `--sl-color-blue-600` | |
| `--sl-color-blue-700` | |
| `--sl-color-blue-800` | |
| `--sl-color-blue-900` | |
| `--sl-color-blue-950` | |
## Indigo
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-indigo-50` | |
| `--sl-color-indigo-100` | |
| `--sl-color-indigo-200` | |
| `--sl-color-indigo-300` | |
| `--sl-color-indigo-400` | |
| `--sl-color-indigo-500` | |
| `--sl-color-indigo-600` | |
| `--sl-color-indigo-700` | |
| `--sl-color-indigo-800` | |
| `--sl-color-indigo-900` | |
| `--sl-color-indigo-950` | |
## Purple
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-purple-50` | |
| `--sl-color-purple-100` | |
| `--sl-color-purple-200` | |
| `--sl-color-purple-300` | |
| `--sl-color-purple-400` | |
| `--sl-color-purple-500` | |
| `--sl-color-purple-600` | |
| `--sl-color-purple-700` | |
| `--sl-color-purple-800` | |
| `--sl-color-purple-900` | |
| `--sl-color-purple-950` | |
## Pink
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-pink-50` | |
| `--sl-color-pink-100` | |
| `--sl-color-pink-200` | |
| `--sl-color-pink-300` | |
| `--sl-color-pink-400` | |
| `--sl-color-pink-500` | |
| `--sl-color-pink-600` | |
| `--sl-color-pink-700` | |
| `--sl-color-pink-800` | |
| `--sl-color-pink-900` | |
| `--sl-color-pink-950` | |