Why CSS variable is not working in button?

Question

If I use hex color it work's perfectly. Don't know why custom property doesn't working.

I tried everything, but no luck :( {I am using chrome}

:root {
  --primary-color: hsl(0, 0% 20%);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  /* border: none; */
  background-color: var(--primary-color);
  /* color: #fff; */
}

<button class="btn">Read More</button>

Answer 1

You need to add a comma , after the second parameter of HSL.

Since you havn't provided an image of the desired color, i'm guessing this was the mistake and you are after a grey color.

:root {
  --primary-color: hsl(0, 0%, 20%)
}

body {
  background: var(--primary-color)
}