---
name: Color
route: /components/common/color
menu: Color
edit: false
---

import { Playground } from 'docz'
import Color from './color'

# Color
## Color

### Brand
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-economist-red)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-economist-red: #E3120B;<br />
  <span style={{backgroundColor: 'var(--ds-color-economist-red-60)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-economist-red-60: #F6423C;<br />
  </code>
</Playground>

### Accent
#### Primary
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-chicago-20)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-20: #0A1757;<br />
  <span style={{backgroundColor: 'var(--ds-color-chicago-30)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-30: #142680;<br />
  <span style={{backgroundColor: 'var(--ds-color-chicago-45)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-45: #2E45B8;<br />
  <span style={{backgroundColor: 'var(--ds-color-chicago-55)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-55: #475ED1;<br />
  <span style={{backgroundColor: 'var(--ds-color-chicago-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-90: #D6DBF5;<br />
  <span style={{backgroundColor: 'var(--ds-color-chicago-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-chicago-95: #EBEDFA;<br />
  </code>
</Playground>

#### Secondary
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-hong-kong-45)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hong-kong-45: #1DC9A4;<br />
  <span style={{backgroundColor: 'var(--ds-color-hong-kong-55)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hong-kong-55: #36E2BD;<br />
  <span style={{backgroundColor: 'var(--ds-color-hong-kong-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hong-kong-90: #D2F9F0;<br />
  <span style={{backgroundColor: 'var(--ds-color-hong-kong-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hong-kong-95: #E9FCF8;<br />
  <span style={{backgroundColor: 'var(--ds-color-tokyo-45)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-tokyo-45: #C91D42;<br />
  <span style={{backgroundColor: 'var(--ds-color-tokyo-55)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-tokyo-55: #E2365B;<br />
  <span style={{backgroundColor: 'var(--ds-color-tokyo-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-tokyo-90: #F9D2DB;<br />
  <span style={{backgroundColor: 'var(--ds-color-tokyo-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-tokyo-95: #FCE9ED;<br />
  </code>
</Playground>

#### Tertiary
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-singapore-55)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-singapore-55: #F97A1F;<br />
  <span style={{backgroundColor: 'var(--ds-color-singapore-65)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-singapore-65: #FB9851;<br />
  <span style={{backgroundColor: 'var(--ds-color-singapore-75)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-singapore-75: #FCB583;<br />
  <span style={{backgroundColor: 'var(--ds-color-singapore-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-singapore-90: #FEE1CD;<br />
  <span style={{backgroundColor: 'var(--ds-color-new-york-55)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-new-york-55: #F9C31F;<br />
  <span style={{backgroundColor: 'var(--ds-color-new-york-65)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-new-york-65: #FBD051;<br />
  <span style={{backgroundColor: 'var(--ds-color-new-york-75)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-new-york-75: #FCDE83;<br />
  <span style={{backgroundColor: 'var(--ds-color-new-york-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-new-york-90: #FEF2CD;<br />
  </code>
</Playground>

### Greyscale
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-london-5)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-5: #0D0D0D;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-10)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-10: #1A1A1A;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-20)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-20: #333;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-35)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-35: #595959;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-70)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-70: #B3B3B3;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-85)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-85: #D9D9D9;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-95: #F2F2F2;<br />
  <span style={{backgroundColor: 'var(--ds-color-london-100)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-london-100: #FFF;<br />
  </code>
</Playground>

### Canvas
<Playground>
  <code>
  <span style={{backgroundColor: 'var(--ds-color-los-angeles-85)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-los-angeles-85: #E1DFD0;<br />
  <span style={{backgroundColor: 'var(--ds-color-los-angeles-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-los-angeles-90: #EBE9E0;<br />
  <span style={{backgroundColor: 'var(--ds-color-los-angeles-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-los-angeles-95: #F5F4EF;<br />
  <span style={{backgroundColor: 'var(--ds-color-paris-85)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-paris-85: #D0E1E1;<br />
  <span style={{backgroundColor: 'var(--ds-color-paris-90)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-paris-90: #E0EBEB;<br />
  <span style={{backgroundColor: 'var(--ds-color-paris-95)', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-paris-95: #EFF5F5;<br />
  </code>
</Playground>
