--- 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


   --ds-color-hsl-economist-red: 2, 91%, 47%;

   --ds-color-hsl-economist-red-60: 2, 91%, 60%;

### Accent #### Primary


   --ds-color-hsl-chicago-20: 230, 60%, 20%;

   --ds-color-hsl-chicago-30: 230, 60%, 30%;

   --ds-color-hsl-chicago-45: 230, 60%, 45%;

   --ds-color-hsl-chicago-55: 230, 60%, 55%;

   --ds-color-hsl-chicago-90: 230, 60%, 90%;

   --ds-color-hsl-chicago-95: 230, 60%, 95%;

#### Secondary


   --ds-color-hsl-hong-kong-45: 167, 75%, 45%;

   --ds-color-hsl-hong-kong-55: 167, 75%, 55%;

   --ds-color-hsl-hong-kong-90: 167, 75%, 90%;

   --ds-color-hsl-hong-kong-95: 167, 75%, 95%;

   --ds-color-hsl-tokyo-45: 347, 75%, 45%;

   --ds-color-hsl-tokyo-55: 347, 75%, 55%;

   --ds-color-hsl-tokyo-90: 347, 75%, 90%;

   --ds-color-hsl-tokyo-95: 347, 75%, 95%;

#### Tertiary


   --ds-color-hsl-singapore-55: 25, 95%, 55%;

   --ds-color-hsl-singapore-65: 25, 95%, 65%;

   --ds-color-hsl-singapore-75: 25, 95%, 75%;

   --ds-color-hsl-singapore-90: 25, 95%, 90%;

   --ds-color-hsl-new-york-55: 45, 95%, 55%;

   --ds-color-hsl-new-york-65: 45, 95%, 65%;

   --ds-color-hsl-new-york-75: 45, 95%, 75%;

   --ds-color-hsl-new-york-90: 45, 95%, 90%;

### Greyscale


   --ds-color-hsl-london-5: 0, 0%, 5%;

   --ds-color-hsl-london-10: 0, 0%, 10%;

   --ds-color-hsl-london-20: 0, 0%, 20%;

   --ds-color-hsl-london-35: 0, 0%, 35%;

   --ds-color-hsl-london-70: 0, 0%, 70%;

   --ds-color-hsl-london-85: 0, 0%, 85%;

   --ds-color-hsl-london-95: 0, 0%, 95%;

   --ds-color-hsl-london-100: 0, 0%, 100%;