How to use a tint as an accent color on my Progress Bar?

111 Views Asked by At

I do manage to change the progress bar color but it appears darker than expected.

I get a very dark red instead of a light pink.

I use Safari as my browser.

progress {
  accent-color: #ffc7d4;
}

progress::-moz-progress-bar {
  accent-color: #ffc7d4;
}

progress::-webkit-progress-value {
  accent-color: #ffc7d4;
}

progress::-webkit-progress-bar {
  accent-color: #ffc7d4;
}
<h3>Accent color for a progress element:</h3>
<label for="file">Downloading progress:</label>
<progress id="file" value="72" max="100">72%</progress>

0

There are 0 best solutions below