diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 799195f848..f9c6f84b6a 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -273,6 +273,7 @@
   --colorpicker-details-color: var(--color-background-quaternary);
   --colorpicker-details-color-selected: var(--color-accent-primary);
   --colorpicker-handlers-color: var(--color-foreground-primary);
+  --colorpicker-background-color: var(--color-foreground-primary);
 
   // COMMENTS
   --comment-title-color: var(--color-foreground-primary);
@@ -400,4 +401,6 @@
 
   --text-editor-selection-background-color: var(--la-tertiary-70);
   --expand-button-icon-border-width-selected: 2px;
+
+  --colorpicker-background-color: var(--color-background-primary);
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
index 65d2ae287b..aef415df59 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
@@ -93,7 +93,7 @@
 }
 
 .opacity-wrapper {
-  background-color: var(--colorpicker-handlers-color);
+  background-color: var(--colorpicker-background-color);
   border-radius: $br-8;
 }