---
layout: docs
title: Background Color
description: null
---
| Class | Description |
| -------------------------- | ---------------------------------------------------- |
| `background-transparent` | Applies `background: transparent;` to element |
| `background-current-color` | Applies `background-color: currentColor;` to element |
| `background-inherit` | Applies `background-color: inherit;` to element |
Base Background
```html
...
```
## Colors
White
Black
```html
...
...
```
## Shades
### Light
Light
Light
50
Light
100
Light
200
Light
300
Light
400
Light
500
Light
600
Light
700
Light
800
Light
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Grey
Grey
Grey
50
Grey
100
Grey
200
Grey
300
Grey
400
Grey
500
Grey
600
Grey
700
Grey
800
Grey
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Dark
Dark
Dark
50
Dark
100
Dark
200
Dark
300
Dark
400
Dark
500
Dark
600
Dark
700
Dark
800
Dark
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
## Palettes
### Primary
Primary
Primary
50
Primary
100
Primary
200
Primary
300
Primary
400
Primary
500
Primary
600
Primary
700
Primary
800
Primary
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Secondary
Secondary
Secondary
50
Secondary
100
Secondary
200
Secondary
300
Secondary
400
Secondary
500
Secondary
600
Secondary
700
Secondary
800
Secondary
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Tertiary
Tertiary
Tertiary
50
Tertiary
100
Tertiary
200
Tertiary
300
Tertiary
400
Tertiary
500
Tertiary
600
Tertiary
700
Tertiary
800
Tertiary
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
## Indicators
### Error
Error
Error
50
Error
100
Error
200
Error
300
Error
400
Error
500
Error
600
Error
700
Error
800
Error
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Warning
Warning
Warning
50
Warning
100
Warning
200
Warning
300
Warning
400
Warning
500
Warning
600
Warning
700
Warning
800
Warning
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Success
Success
Success
50
Success
100
Success
200
Success
300
Success
400
Success
500
Success
600
Success
700
Success
800
Success
900
```html
...
...
...
...
...
...
...
...
...
...
...
```
### Info
Info
Info
50
Info
100
Info
200
Info
300
Info
400
Info
500
Info
600
Info
700
Info
800
Info
900
```html
...
...
...
...
...
...
...
...
...
...
...
```