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

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

# ColorHSL
## Color HSL

<Playground>
  <code>
  <span style={{backgroundColor: 'hsl(var(--1843-color-hsl-dubai-45))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --1843-color-hsl-dubai-45: 33, 75%, 45%;<br />
  <span style={{backgroundColor: 'hsl(var(--1843-color-hsl-1843-red))', borderRadius: '100%', display: 'inline-block', height: '20px', width: '20px', verticalAlign: 'middle'}}></span> --1843-color-hsl-1843-red: 360, 100%, 35%;<br />
  </code>
</Playground>
