diff --git a/app/assets/stylesheets/partials/_colors.scss b/app/assets/stylesheets/partials/_colors.scss
index 54dde4f1..02567c0f 100644
--- a/app/assets/stylesheets/partials/_colors.scss
+++ b/app/assets/stylesheets/partials/_colors.scss
@@ -25,6 +25,11 @@ $growth: $gold;
 $approval: $purple;
 $ideal: $purple;
 
+:root {
+  --color-purple: #{$purple};
+  --color-gold: #{$gold};
+}
+
 .color-red {
   color: $red;
 }
diff --git a/app/presenters/response_rate_presenter.rb b/app/presenters/response_rate_presenter.rb
index aa45a234..a8f45d63 100644
--- a/app/presenters/response_rate_presenter.rb
+++ b/app/presenters/response_rate_presenter.rb
@@ -18,11 +18,7 @@ class ResponseRatePresenter
   end
 
   def color
-    # Problem: the color (either $gold or $purple) is determined by the scss variable, but the
-    # percentage is decided by the presenter. Therefore the class style must be generated
-    # within this file and not the scss file.
-    # TODO: Fix this.
-    percentage > 75 ? '#49416D' : '#FFC857'
+    percentage > 75 ? 'purple' : 'gold'
   end
 
   private
diff --git a/app/views/overview/_response_rate_graphic.html.erb b/app/views/overview/_response_rate_graphic.html.erb
index 34798ec8..7b357a20 100644
--- a/app/views/overview/_response_rate_graphic.html.erb
+++ b/app/views/overview/_response_rate_graphic.html.erb
@@ -26,7 +26,7 @@
   position: absolute;
   border-radius: 50%;
   inset: 0;
-  background: conic-gradient(<%= response_rate_presenter.color %> calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
+  background: conic-gradient(var(--color-<%= response_rate_presenter.color %>) calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
 }
 </style>