# Color Tokens
Color tokens are used to maintain consistent color use throughout your app.
## Theme Colors
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% or 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead.
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
To customize a theme color, change its respective hue, saturation, and text tokens. Possible theme colors include `primary`, `gray`, `success`, `info`, `warning`, and `danger`.
This will make all colors in the primary color palette various shades of purple.
```css
:root {
--sl-color-primary-hue: 290;
--sl-color-primary-saturation: 87%;
--sl-color-primary-text: var(--sl-color-white);
}
```
You can update these values on the client and the changes will reflect instantly. To update the primary color using JavaScript, try this.
```js
document.documentElement.style.setProperty('--sl-color-primary-hue', '290');
document.documentElement.style.setProperty('--sl-color-primary-saturation', '87%');
```
?> 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-5` | |
| `--sl-color-primary-10` | |
| `--sl-color-primary-15` | |
| `--sl-color-primary-20` | |
| `--sl-color-primary-25` | |
| `--sl-color-primary-30` | |
| `--sl-color-primary-35` | |
| `--sl-color-primary-40` | |
| `--sl-color-primary-45` | |
| `--sl-color-primary-50` | |
| `--sl-color-primary-55` | |
| `--sl-color-primary-60` | |
| `--sl-color-primary-65` | |
| `--sl-color-primary-70` | |
| `--sl-color-primary-75` | |
| `--sl-color-primary-80` | |
| `--sl-color-primary-85` | |
| `--sl-color-primary-90` | |
| `--sl-color-primary-95` | |
## Gray
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-black` | |
| `--sl-color-gray-5` | |
| `--sl-color-gray-10` | |
| `--sl-color-gray-15` | |
| `--sl-color-gray-20` | |
| `--sl-color-gray-25` | |
| `--sl-color-gray-30` | |
| `--sl-color-gray-35` | |
| `--sl-color-gray-40` | |
| `--sl-color-gray-45` | |
| `--sl-color-gray-50` | |
| `--sl-color-gray-55` | |
| `--sl-color-gray-60` | |
| `--sl-color-gray-65` | |
| `--sl-color-gray-70` | |
| `--sl-color-gray-75` | |
| `--sl-color-gray-80` | |
| `--sl-color-gray-85` | |
| `--sl-color-gray-90` | |
| `--sl-color-gray-95` | |
| `--sl-color-white` | |
## Success
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-success-5` | |
| `--sl-color-success-10` | |
| `--sl-color-success-15` | |
| `--sl-color-success-20` | |
| `--sl-color-success-25` | |
| `--sl-color-success-30` | |
| `--sl-color-success-35` | |
| `--sl-color-success-40` | |
| `--sl-color-success-45` | |
| `--sl-color-success-50` | |
| `--sl-color-success-55` | |
| `--sl-color-success-60` | |
| `--sl-color-success-65` | |
| `--sl-color-success-70` | |
| `--sl-color-success-75` | |
| `--sl-color-success-80` | |
| `--sl-color-success-85` | |
| `--sl-color-success-90` | |
| `--sl-color-success-95` | |
## Info
| Token | Example |
| -------------------- | --------------------------------------------------------------------------------- |
| `--sl-color-info-5` | |
| `--sl-color-info-10` | |
| `--sl-color-info-15` | |
| `--sl-color-info-20` | |
| `--sl-color-info-25` | |
| `--sl-color-info-30` | |
| `--sl-color-info-35` | |
| `--sl-color-info-40` | |
| `--sl-color-info-45` | |
| `--sl-color-info-50` | |
| `--sl-color-info-55` | |
| `--sl-color-info-60` | |
| `--sl-color-info-65` | |
| `--sl-color-info-70` | |
| `--sl-color-info-75` | |
| `--sl-color-info-80` | |
| `--sl-color-info-85` | |
| `--sl-color-info-90` | |
| `--sl-color-info-95` | |
## Warning
| Token | Example |
| ----------------------- | ------------------------------------------------------------------------------------ |
| `--sl-color-warning-5` | |
| `--sl-color-warning-10` | |
| `--sl-color-warning-15` | |
| `--sl-color-warning-20` | |
| `--sl-color-warning-25` | |
| `--sl-color-warning-30` | |
| `--sl-color-warning-35` | |
| `--sl-color-warning-40` | |
| `--sl-color-warning-45` | |
| `--sl-color-warning-50` | |
| `--sl-color-warning-55` | |
| `--sl-color-warning-60` | |
| `--sl-color-warning-65` | |
| `--sl-color-warning-70` | |
| `--sl-color-warning-75` | |
| `--sl-color-warning-80` | |
| `--sl-color-warning-85` | |
| `--sl-color-warning-90` | |
| `--sl-color-warning-95` | |
## Danger
| Token | Example |
| ---------------------- | ----------------------------------------------------------------------------------- |
| `--sl-color-danger-5` | |
| `--sl-color-danger-10` | |
| `--sl-color-danger-15` | |
| `--sl-color-danger-20` | |
| `--sl-color-danger-25` | |
| `--sl-color-danger-30` | |
| `--sl-color-danger-35` | |
| `--sl-color-danger-40` | |
| `--sl-color-danger-45` | |
| `--sl-color-danger-50` | |
| `--sl-color-danger-55` | |
| `--sl-color-danger-60` | |
| `--sl-color-danger-65` | |
| `--sl-color-danger-70` | |
| `--sl-color-danger-75` | |
| `--sl-color-danger-80` | |
| `--sl-color-danger-85` | |
| `--sl-color-danger-90` | |
| `--sl-color-danger-95` | |