---
layout: docs
title: Color
description: null
---

<p class="color-inherit">Color Inherit</p>
<p class="current-color">Current Color</p>
<p class="color">Base Color</p>

```html
<p class="color-inherit">...</p>
<p class="current-color">...</p>
<p class="color">...</p>
```

<p class="color-white background-black">White</p>
<p class="color-black">Black</p>

```html
<p class="color-white">...</p>
<p class="color-black">...</p>
```

## Shades

### Light

<p class="color-light">Light</p>
<p class="color-light-50">Light 50</p>
<p class="color-light-100">Light 100</p>
<p class="color-light-200">Light 200</p>
<p class="color-light-300">Light 300</p>
<p class="color-light-400">Light 400</p>
<p class="color-light-500">Light 500</p>
<p class="color-light-600">Light 600</p>
<p class="color-light-700">Light 700</p>
<p class="color-light-800">Light 800</p>
<p class="color-light-900">Light 900</p>

```html
<p class="color-light">...</p>
<p class="color-light-50">...</p>
<p class="color-light-100">...</p>
<p class="color-light-200">...</p>
<p class="color-light-300">...</p>
<p class="color-light-400">...</p>
<p class="color-light-500">...</p>
<p class="color-light-600">...</p>
<p class="color-light-700">...</p>
<p class="color-light-800">...</p>
<p class="color-light-900">...</p>
```

### Grey

<p class="color-grey">Grey</p>
<p class="color-grey-50">Grey 50</p>
<p class="color-grey-100">Grey 100</p>
<p class="color-grey-200">Grey 200</p>
<p class="color-grey-300">Grey 300</p>
<p class="color-grey-400">Grey 400</p>
<p class="color-grey-500">Grey 500</p>
<p class="color-grey-600">Grey 600</p>
<p class="color-grey-700">Grey 700</p>
<p class="color-grey-800">Grey 800</p>
<p class="color-grey-900">Grey 900</p>

```html
<p class="color-grey">...</p>
<p class="color-grey-50">...</p>
<p class="color-grey-100">...</p>
<p class="color-grey-200">...</p>
<p class="color-grey-300">...</p>
<p class="color-grey-400">...</p>
<p class="color-grey-500">...</p>
<p class="color-grey-600">...</p>
<p class="color-grey-700">...</p>
<p class="color-grey-800">...</p>
<p class="color-grey-900">...</p>
```

### Dark

<p class="color-dark">Dark</p>
<p class="color-dark-50">Dark 50</p>
<p class="color-dark-100">Dark 100</p>
<p class="color-dark-200">Dark 200</p>
<p class="color-dark-300">Dark 300</p>
<p class="color-dark-400">Dark 400</p>
<p class="color-dark-500">Dark 500</p>
<p class="color-dark-600">Dark 600</p>
<p class="color-dark-700">Dark 700</p>
<p class="color-dark-800">Dark 800</p>
<p class="color-dark-900">Dark 900</p>

```html
<p class="color-dark">...</p>
<p class="color-dark-50">...</p>
<p class="color-dark-100">...</p>
<p class="color-dark-200">...</p>
<p class="color-dark-300">...</p>
<p class="color-dark-400">...</p>
<p class="color-dark-500">...</p>
<p class="color-dark-600">...</p>
<p class="color-dark-700">...</p>
<p class="color-dark-800">...</p>
<p class="color-dark-900">...</p>
```

## Palettes

### Primary

<p class="color-primary">Primary</p>
<p class="color-primary-50">Primary 50</p>
<p class="color-primary-100">Primary 100</p>
<p class="color-primary-200">Primary 200</p>
<p class="color-primary-300">Primary 300</p>
<p class="color-primary-400">Primary 400</p>
<p class="color-primary-500">Primary 500</p>
<p class="color-primary-600">Primary 600</p>
<p class="color-primary-700">Primary 700</p>
<p class="color-primary-800">Primary 800</p>
<p class="color-primary-900">Primary 900</p>

```html
<p class="color-primary">...</p>
<p class="color-primary-50">...</p>
<p class="color-primary-100">...</p>
<p class="color-primary-200">...</p>
<p class="color-primary-300">...</p>
<p class="color-primary-400">...</p>
<p class="color-primary-500">...</p>
<p class="color-primary-600">...</p>
<p class="color-primary-700">...</p>
<p class="color-primary-800">...</p>
<p class="color-primary-900">...</p>
```

### Secondary

<p class="color-secondary">Secondary</p>
<p class="color-secondary-50">Secondary 50</p>
<p class="color-secondary-100">Secondary 100</p>
<p class="color-secondary-200">Secondary 200</p>
<p class="color-secondary-300">Secondary 300</p>
<p class="color-secondary-400">Secondary 400</p>
<p class="color-secondary-500">Secondary 500</p>
<p class="color-secondary-600">Secondary 600</p>
<p class="color-secondary-700">Secondary 700</p>
<p class="color-secondary-800">Secondary 800</p>
<p class="color-secondary-900">Secondary 900</p>

```html
<p class="color-secondary">...</p>
<p class="color-secondary-50">...</p>
<p class="color-secondary-100">...</p>
<p class="color-secondary-200">...</p>
<p class="color-secondary-300">...</p>
<p class="color-secondary-400">...</p>
<p class="color-secondary-500">...</p>
<p class="color-secondary-600">...</p>
<p class="color-secondary-700">...</p>
<p class="color-secondary-800">...</p>
<p class="color-secondary-900">...</p>
```

### Tertiary

<p class="color-tertiary">Tertiary</p>
<p class="color-tertiary-50">Tertiary 50</p>
<p class="color-tertiary-100">Tertiary 100</p>
<p class="color-tertiary-200">Tertiary 200</p>
<p class="color-tertiary-300">Tertiary 300</p>
<p class="color-tertiary-400">Tertiary 400</p>
<p class="color-tertiary-500">Tertiary 500</p>
<p class="color-tertiary-600">Tertiary 600</p>
<p class="color-tertiary-700">Tertiary 700</p>
<p class="color-tertiary-800">Tertiary 800</p>
<p class="color-tertiary-900">Tertiary 900</p>

```html
<p class="color-tertiary">...</p>
<p class="color-tertiary-50">...</p>
<p class="color-tertiary-100">...</p>
<p class="color-tertiary-200">...</p>
<p class="color-tertiary-300">...</p>
<p class="color-tertiary-400">...</p>
<p class="color-tertiary-500">...</p>
<p class="color-tertiary-600">...</p>
<p class="color-tertiary-700">...</p>
<p class="color-tertiary-800">...</p>
<p class="color-tertiary-900">...</p>
```

## Indicators

### Info

<p class="color-info">Info</p>
<p class="color-info-50">Info 50</p>
<p class="color-info-100">Info 100</p>
<p class="color-info-200">Info 200</p>
<p class="color-info-300">Info 300</p>
<p class="color-info-400">Info 400</p>
<p class="color-info-500">Info 500</p>
<p class="color-info-600">Info 600</p>
<p class="color-info-700">Info 700</p>
<p class="color-info-800">Info 800</p>
<p class="color-info-900">Info 900</p>

```html
<p class="color-info">...</p>
<p class="color-info-50">...</p>
<p class="color-info-100">...</p>
<p class="color-info-200">...</p>
<p class="color-info-300">...</p>
<p class="color-info-400">...</p>
<p class="color-info-500">...</p>
<p class="color-info-600">...</p>
<p class="color-info-700">...</p>
<p class="color-info-800">...</p>
<p class="color-info-900">...</p>
```

### Error

<p class="color-error">Error</p>
<p class="color-error-50">Error 50</p>
<p class="color-error-100">Error 100</p>
<p class="color-error-200">Error 200</p>
<p class="color-error-300">Error 300</p>
<p class="color-error-400">Error 400</p>
<p class="color-error-500">Error 500</p>
<p class="color-error-600">Error 600</p>
<p class="color-error-700">Error 700</p>
<p class="color-error-800">Error 800</p>
<p class="color-error-900">Error 900</p>

```html
<p class="color-error">...</p>
<p class="color-error-50">...</p>
<p class="color-error-100">...</p>
<p class="color-error-200">...</p>
<p class="color-error-300">...</p>
<p class="color-error-400">...</p>
<p class="color-error-500">...</p>
<p class="color-error-600">...</p>
<p class="color-error-700">...</p>
<p class="color-error-800">...</p>
<p class="color-error-900">...</p>
```

### Warning

<p class="color-warning">Warning</p>
<p class="color-warning-50">Warning 50</p>
<p class="color-warning-100">Warning 100</p>
<p class="color-warning-200">Warning 200</p>
<p class="color-warning-300">Warning 300</p>
<p class="color-warning-400">Warning 400</p>
<p class="color-warning-500">Warning 500</p>
<p class="color-warning-600">Warning 600</p>
<p class="color-warning-700">Warning 700</p>
<p class="color-warning-800">Warning 800</p>
<p class="color-warning-900">Warning 900</p>

```html
<p class="color-warning">...</p>
<p class="color-warning-50">...</p>
<p class="color-warning-100">...</p>
<p class="color-warning-200">...</p>
<p class="color-warning-300">...</p>
<p class="color-warning-400">...</p>
<p class="color-warning-500">...</p>
<p class="color-warning-600">...</p>
<p class="color-warning-700">...</p>
<p class="color-warning-800">...</p>
<p class="color-warning-900">...</p>
```

### Success

<p class="color-success">Success</p>
<p class="color-success-50">Success 50</p>
<p class="color-success-100">Success 100</p>
<p class="color-success-200">Success 200</p>
<p class="color-success-300">Success 300</p>
<p class="color-success-400">Success 400</p>
<p class="color-success-500">Success 500</p>
<p class="color-success-600">Success 600</p>
<p class="color-success-700">Success 700</p>
<p class="color-success-800">Success 800</p>
<p class="color-success-900">Success 900</p>

```html
<p class="color-success">...</p>
<p class="color-success-50">...</p>
<p class="color-success-100">...</p>
<p class="color-success-200">...</p>
<p class="color-success-300">...</p>
<p class="color-success-400">...</p>
<p class="color-success-500">...</p>
<p class="color-success-600">...</p>
<p class="color-success-700">...</p>
<p class="color-success-800">...</p>
<p class="color-success-900">...</p>
```