---
name: Palette
route: /palette
---

import Grid from 'styled-components-grid';
import { Color } from './.docz/color';

# Palette

Most colors are available with a selection of hues (as depicted below). 

You can set the colors on most components by using `color="blue"` and `hue="5"` for example.

## Base
<Grid>
  <Grid.Unit size={1 / 10}>
    <Color color="base"/>
  </Grid.Unit>
</Grid>

---

## Black
<Grid>
  <Grid.Unit size={1 / 10}>
    <Color color="black"/>
  </Grid.Unit>
</Grid>

---

## Gray 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="gray" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Blue 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="blue" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Indigo 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="indigo" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Violet 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="violet" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Fuschia 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="fuschia" hue={i} />
    </Grid.Unit>
  ))}
</Grid>


---

## Pink 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="pink" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Red 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="red" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Orange 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="orange" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Yellow 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="yellow" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Lime 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="lime" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Green 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="green" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Teal 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="teal" hue={i} />
    </Grid.Unit>
  ))}
</Grid>

---

## Cyan 
<Grid>
  {Array(10).fill(1).map((_, i) => (
    <Grid.Unit size={1/ 10}>
      <Color color="cyan" hue={i} />
    </Grid.Unit>
  ))}
</Grid>