We default to the `-400` accents of each color schemes.
### Gray

```jsx noeditor
import Palette from '../../src/_doc/Palette';

const colorCollection = [
  {
    title: 'white',
    hex: '#FFFFFF',
    variable: '.bg-white',
  },
  {
    title: 'gray:50',
    hex: 'var(--gray-50)',
    variable: '.bg-gray-50',
  },
  {
    title: 'gray:100',
    hex: 'var(--gray-100)',
    variable: '.bg-gray-100',
  },
  {
    title: 'gray:200',
    hex: 'var(--gray-200)',
    variable: '.bg-gray-200',
  },
  {
    title: 'gray:300',
    hex: 'var(--gray-300)',
    variable: '.bg-gray-300',
  },
  {
    title: 'gray:400',
    hex: 'var(--gray-400)',
    variable: '.bg-gray-400',
  },
  {
    title: 'gray:500',
    hex: 'var(--gray-500)',
    variable: '.bg-gray-500',
  },
  {
    title: 'gray:600',
    hex: 'var(--gray-600)',
    variable: '.bg-gray-600',
    textColor: '#fff'
  },
  {
    title: 'gray:700',
    hex: 'var(--gray-700)',
    variable: '.bg-gray-700',
    textColor: '#fff'
  },
  {
    title: 'gray:800',
    hex: 'var(--gray-800)',
    variable: '.bg-gray-800',
    textColor: '#fff'
  },
  {
    title: 'gray:900',
    hex: 'var(--gray-900)',
    variable: '.bg-gray-900',
    textColor: '#fff'
  },
];
<Palette colors={colorCollection} />
```
### Red

```jsx noeditor
import Palette from '../../src/_doc/Palette';

const colorCollection = [
  {
    title: 'red:50',
    hex: 'var(--red-50)',
    variable: '.bg-red-50'
  },
  {
    title: 'red:100',
    hex: 'var(--red-100)',
    variable: '.bg-red-100'
  },
  {
    title: 'red:200',
    hex: 'var(--red-200)',
    variable: '.bg-red-200'
  },
  {
    title: 'red:300',
    hex: 'var(--red-300)',
    variable: '.bg-red-300'
  },
  {
    title: 'red:400',
    hex: 'var(--red-400)',
    variable: '.bg-red-400'
  },
  {
    title: 'red:500',
    hex: 'var(--red-500)',
    variable: '.bg-red-500',
    usage: 'Primary',
    textColor: '#fff'
  },
  {
    title: 'red:600',
    hex: 'var(--red-600)',
    variable: '.bg-red-600',
    usage: 'Hover',
    textColor: '#fff'
  },
  {
    title: 'red:700',
    hex: 'var(--red-700)',
    variable: '.bg-red-700',
    textColor: '#fff'
  },
  {
    title: 'red:800',
    hex: 'var(--red-800)',
    variable: '.bg-red-800',
    textColor: '#fff'
  },
  {
    title: 'red:900',
    hex: 'var(--red-900)',
    variable: '.bg-red-900',
    textColor: '#fff'
  },
];
<Palette colors={colorCollection} />
```
### Blue

```jsx noeditor
import Palette from '../../src/_doc/Palette';

const colorCollection = [
  {
    title: 'blue:50',
    hex: 'var(--blue-50)',
    variable: '.bg-blue-50'
  },
  {
    title: 'blue:100',
    hex: 'var(--blue-100)',
    variable: '.bg-blue-100'
  },
  {
    title: 'blue:200',
    hex: 'var(--blue-200)',
    variable: '.bg-blue-200',
    usage: 'highlight'
  },
  {
    title: 'blue:300',
    hex: 'var(--blue-300)',
    variable: '.bg-blue-300',
    textColor: '#fff'
  },
  {
    title: 'blue:400',
    hex: 'var(--blue-400)',
    variable: '.bg-blue-400',
    textColor: '#fff'
  },
  {
    title: 'blue:500',
    hex: 'var(--blue-500)',
    variable: '.bg-blue-500',
    textColor: '#fff'
  },
  {
    title: 'blue:600',
    hex: 'var(--blue-600)',
    variable: '.bg-blue-600',
    textColor: '#fff'
  },
  {
    title: 'blue:700',
    hex: 'var(--blue-700)',
    variable: '.bg-blue-700',
    textColor: '#fff',
  },
  {
    title: 'blue:800',
    hex: 'var(--blue-800)',
    variable: '.bg-blue-800',
    textColor: '#fff',
  },
  {
    title: 'blue:900',
    hex: 'var(--blue-900)',
    variable: '.bg-blue-900',
    textColor: '#fff',
  }
];
<Palette colors={colorCollection} />
```
### Green

```jsx noeditor
import Palette from '../../src/_doc/Palette';

const colorCollection = [
  {
    title: 'green:50',
    hex: 'var(--green-50)',
    variable: '.bg-green-50'
  },
  {
    title: 'green:100',
    hex: 'var(--green-100)',
    variable: '.bg-green-100'
  },
  {
    title: 'green:200',
    hex: 'var(--green-200)',
    variable: '.bg-green-200'
  },
  {
    title: 'green:300',
    hex: 'var(--green-300)',
    variable: '.bg-green-300'
  },
  {
    title: 'green:400',
    hex: 'var(--green-400)',
    variable: '.bg-green-400'
  },
  {
    title: 'green:500',
    hex: 'var(--green-500)',
    variable: '.bg-green-500',
    textColor: '#fff'
  },
  {
    title: 'green:600',
    hex: 'var(--green-600)',
    variable: '.bg-green-600',
    textColor: '#fff'
  },
  {
    title: 'green:700',
    hex: 'var(--green-700)',
    variable: '.bg-green-700',
    textColor: '#fff'
  },
  {
    title: 'green:800',
    hex: 'var(--green-800)',
    variable: '.bg-green-800',
    textColor: '#fff'
  },
  {
    title: 'green:900',
    hex: 'var(--green-900)',
    variable: '.bg-green-900',
    textColor: '#fff'
  },
];
<Palette colors={colorCollection} />
```
### Yellow

```jsx noeditor
import Palette from '../../src/_doc/Palette';

const colorCollection = [
  {
    title: 'yellow:50',
    hex: 'var(--yellow-50)',
    variable: '.bg-yellow-50'
  },
  {
    title: 'yellow:100',
    hex: 'var(--yellow-100)',
    variable: '.bg-yellow-100'
  },
  {
    title: 'yellow:200',
    hex: 'var(--yellow-200)',
    variable: '.bg-yellow-200'
  },
  {
    title: 'yellow:300',
    hex: 'var(--yellow-300)',
    variable: '.bg-yellow-300'
  },
  {
    title: 'yellow:400',
    hex: 'var(--yellow-400)',
    variable: '.bg-yellow-400'
  },
  {
    title: 'yellow:500',
    hex: 'var(--yellow-500)',
    variable: '.bg-yellow-500'
  },
  {
    title: 'yellow:600',
    hex: 'var(--yellow-600)',
    variable: '.bg-yellow-600',
    textColor: '#fff'
  },
  {
    title: 'yellow:700',
    hex: 'var(--yellow-700)',
    variable: '.bg-yellow-700',
    textColor: '#fff'
  },
  {
    title: 'yellow:800',
    hex: 'var(--yellow-800)',
    variable: '.bg-yellow-800',
    textColor: '#fff'
  },
  {
    title: 'yellow:900',
    hex: 'var(--yellow-900)',
    variable: '.bg-yellow-900',
    textColor: '#fff'
  },
];
<Palette colors={colorCollection} />
```