# 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. This will update all colors in the palette — there's no need to update individual palette colors. In fact, doing so is strongly discouraged.
```css
--sl-color-primary-hue: 203;
--sl-color-primary-saturation: 100%;
--sl-color-primary-text: var(--sl-color-white);
```
?> Color palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly.
## 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` | |