diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 248efee75..87ead0e47 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -325,3 +325,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 }
+
+.note-split.with-hue {
+    --note-icon-custom-background-color: hsl(var(--custom-color-hue), 8%, 29.4%);
+    --note-icon-custom-color: hsl(var(--custom-color-hue), 89%, 78%);
+}
\ No newline at end of file
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index d1364ebd4..d24d002cc 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -296,3 +296,8 @@
     --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
 }
+
+.note-split.with-hue {
+    --note-icon-custom-background-color: hsl(var(--custom-color-hue), 50%, 86.7%);
+    --note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 7168daf5b..7bcb794a4 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -90,7 +90,7 @@ body.experimental-feature-new-layout {
         &::before {
             position: relative;
             z-index: 1;
-            color: var(--note-icon-button-color);
+            color: var(--note-icon-custom-color, var(--note-icon-button-color));
         }
 
         /* The background circle */
@@ -99,11 +99,11 @@ body.experimental-feature-new-layout {
             position: absolute;
             inset: 0;
             border-radius: 50%;
-            background: var(--note-icon-button-background-color);
+            background: var(--note-icon-custom-background-color, var(--note-icon-button-background-color));
         }
 
         &:focus-visible {
-            outline: 2px solid var(--note-icon-button-color);
+            outline: 2px solid var(--note-icon-custom-color, var(--note-icon-button-color));
         }
 
         &:hover:not(.bx-empty:disabled)::after {