diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index d990cb84d..f34d47d56 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -60,7 +60,7 @@
   // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
   --primary-light-l: 73%;
   --primary-a: 1;
-  --primary-hsl: 216.5deg, 100%, 54.9%;
+  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
   --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));