# 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-primary-50: #faf5ff;
--sl-color-primary-100: #f3e8ff;
--sl-color-primary-200: #e9d5ff;
--sl-color-primary-300: #d8b4fe;
--sl-color-primary-400: #c084fc;
--sl-color-primary-500: #a855f7;
--sl-color-primary-600: #9333ea;
--sl-color-primary-700: #7e22ce;
--sl-color-primary-800: #6b21a8;
--sl-color-primary-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)
## Primary
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-primary-50` | |
| `--sl-color-primary-100` | |
| `--sl-color-primary-200` | |
| `--sl-color-primary-300` | |
| `--sl-color-primary-400` | |
| `--sl-color-primary-500` | |
| `--sl-color-primary-600` | |
| `--sl-color-primary-700` | |
| `--sl-color-primary-800` | |
| `--sl-color-primary-900` | |
| `--sl-color-primary-950` | |
## 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` | |
## Success
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-success-50` | |
| `--sl-color-success-100` | |
| `--sl-color-success-200` | |
| `--sl-color-success-300` | |
| `--sl-color-success-400` | |
| `--sl-color-success-500` | |
| `--sl-color-success-600` | |
| `--sl-color-success-700` | |
| `--sl-color-success-800` | |
| `--sl-color-success-900` | |
| `--sl-color-success-950` | |
## Info
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------- |
| `--sl-color-info-50` | |
| `--sl-color-info-100` | |
| `--sl-color-info-200` | |
| `--sl-color-info-300` | |
| `--sl-color-info-400` | |
| `--sl-color-info-500` | |
| `--sl-color-info-600` | |
| `--sl-color-info-700` | |
| `--sl-color-info-800` | |
| `--sl-color-info-900` | |
| `--sl-color-info-950` | |
## Warning
| Token | Example |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `--sl-color-warning-50` | |
| `--sl-color-warning-100` | |
| `--sl-color-warning-200` | |
| `--sl-color-warning-300` | |
| `--sl-color-warning-400` | |
| `--sl-color-warning-500` | |
| `--sl-color-warning-600` | |
| `--sl-color-warning-700` | |
| `--sl-color-warning-800` | |
| `--sl-color-warning-900` | |
| `--sl-color-warning-950` | |
## Danger
| Token | Example |
| ------------------------ | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-50` | |
| `--sl-color-danger-100` | |
| `--sl-color-danger-200` | |
| `--sl-color-danger-300` | |
| `--sl-color-danger-400` | |
| `--sl-color-danger-500` | |
| `--sl-color-danger-600` | |
| `--sl-color-danger-700` | |
| `--sl-color-danger-800` | |
| `--sl-color-danger-900` | |
| `--sl-color-danger-950` | |