diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
index 384aed11e6d3..948f90bd53c4 100644
--- a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
+++ b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -8,8 +8,8 @@
   // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
   // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
   // and doesn't match the Material design spec. For now we approximate the buffer background by
-  // lightening the color of the primary bar.
-  $buffer-color: color.adjust(mdc-theme-color.prop-value($color), $lightness: 30%);
+  // applying an opacity to the color of the bar.
+  $buffer-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75);
   @include mdc-linear-progress.bar-color($color, $query: mdc-helpers.$mat-theme-styles-query);
   @include mdc-linear-progress.buffer-color($buffer-color,
     $query: mdc-helpers.$mat-theme-styles-query);