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

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

# ColorHSL
## Color HSL

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

### Accent
#### Primary
<Playground>
  <code>
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-20))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-20: 230, 60%, 20%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-30))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-30: 230, 60%, 30%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-45))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-45: 230, 60%, 45%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-55))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-55: 230, 60%, 55%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-90))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-90: 230, 60%, 90%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-chicago-95))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-chicago-95: 230, 60%, 95%;<br />
  </code>
</Playground>

#### Secondary
<Playground>
  <code>
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-hong-kong-45))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-hong-kong-45: 167, 75%, 45%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-hong-kong-55))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-hong-kong-55: 167, 75%, 55%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-hong-kong-90))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-hong-kong-90: 167, 75%, 90%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-hong-kong-95))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-hong-kong-95: 167, 75%, 95%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-tokyo-45))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-tokyo-45: 347, 75%, 45%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-tokyo-55))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-tokyo-55: 347, 75%, 55%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-tokyo-90))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-tokyo-90: 347, 75%, 90%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-tokyo-95))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-tokyo-95: 347, 75%, 95%;<br />
  </code>
</Playground>

#### Tertiary
<Playground>
  <code>
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-singapore-55))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-singapore-55: 25, 95%, 55%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-singapore-65))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-singapore-65: 25, 95%, 65%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-singapore-75))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-singapore-75: 25, 95%, 75%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-singapore-90))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-singapore-90: 25, 95%, 90%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-new-york-55))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-new-york-55: 45, 95%, 55%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-new-york-65))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-new-york-65: 45, 95%, 65%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-new-york-75))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-new-york-75: 45, 95%, 75%;<br />
  <span style={{backgroundColor: 'hsl(var(--ds-color-hsl-new-york-90))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --ds-color-hsl-new-york-90: 45, 95%, 90%;<br />
  </code>
</Playground>

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