diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index f58ec4ad..e606ed64 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -29,23 +29,16 @@
         }
     }
 
-
-    // @todo replace with variables
-
     $colors: (
-        yfm-accent-info: #027bf3,
-        yfm-accent-tip: #56bd67,
-        yfm-accent-warning: #f19518,
-        yfm-accent-alert: #ff4645,
+        yfm-accent-info: var(--yfm-color-accent),
+        yfm-accent-tip: var(--yfm-color-note-tip),
+        yfm-accent-alert: var(--yfm-color-note-important),
+        yfm-accent-warning: var(--yfm-color-note-warning),
     );
 
     @each $type, $color in $colors {
         &.#{$type} > p:first-child::before {
-            $r: red($color);
-            $g: green($color);
-            $b: blue($color);
-            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
-            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $color + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
         }
     }