diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1238fd9c1..bd895dc5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#728]
+  - **Description:** Adds `$darken_` utility functions for darkening palette colors and ensures compatibility with Node.js v10 by pinning the `color` package version to `3.2.1`.
+  - **Products impact:** Kolibri Design System
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/726
+  - **Components:** Styling utilities (`$darken1(hexColorValue)`,`$darken2(hexColorValue)` and `$darken3(hexColorValue)` functions)
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Ensure to install the exact `color` version specified in `package.json` to maintain compatibility with Node.js v10.
+
+[#728]: https://github.com/learningequality/kolibri-design-system/pull/728
+
 - [#738]
   - **Description:** Bump KDS version to 5.0.0-rc2.
   - **Products impact:** -.
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index 312829331..a6445476d 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -92,7 +92,40 @@
         <li><code>palette</code> refers to <code>$themePalette</code></li>
       </ul>
 
+      <h3>Darken utilities</h3>
 
+      <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
+
+      <DocsShowCode language="html">
+        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+          base
+        </div>
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+          $darken1
+        </div>
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+          $darken2
+        </div>
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+          $darken3
+        </div>
+      </DocsShowCode>
+      <DocsShow>
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+          <code>base</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+          <code>$darken1</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+          <code>$darken2</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+          <code>$darken3</code>
+        </div>
+      </DocsShow>
+
+      <p>These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.</p>
     </DocsPageSection>
 
 
@@ -323,4 +356,17 @@
     width: 350px;
   }
 
+  .darken-block {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 140px;
+
+    code {
+      padding: 4px;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+  }
+
 </style>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 8f7e377a4..3531b4692 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -1,5 +1,6 @@
 import { isNuxtServerSideRendering } from '../lib/utils';
 import computedClass from './styles/computedClass';
+import { darken1, darken2, darken3 } from './styles/darkenColors.js';
 
 import KBreadcrumbs from './KBreadcrumbs';
 import KButton from './buttons-and-links/KButton';
@@ -115,6 +116,10 @@ export default function KThemePlugin(Vue) {
   Vue.prototype.$themePalette = themePalette();
   Vue.prototype.$computedClass = computedClass;
 
+  Vue.prototype.$darken1 = darken1;
+  Vue.prototype.$darken2 = darken2;
+  Vue.prototype.$darken3 = darken3;
+
   // globally-accessible components
   Vue.component('KButton', KButton);
   Vue.component('KButtonGroup', KButtonGroup);
diff --git a/lib/styles/darkenColors.js b/lib/styles/darkenColors.js
new file mode 100644
index 000000000..12a5cd6da
--- /dev/null
+++ b/lib/styles/darkenColors.js
@@ -0,0 +1,19 @@
+import Color from 'color';
+
+export function darken1(color) {
+  return Color(color)
+    .darken(0.19)
+    .hex();
+}
+
+export function darken2(color) {
+  return Color(color)
+    .darken(0.4)
+    .hex();
+}
+
+export function darken3(color) {
+  return Color(color)
+    .darken(0.58)
+    .hex();
+}
diff --git a/package.json b/package.json
index 74af3f36e..0ca2dc1fe 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@vue/composition-api": "1.7.2",
     "aphrodite": "https://github.com/learningequality/aphrodite/",
     "autosize": "3.0.21",
+    "color": "3.2.1",
     "css-element-queries": "1.2.0",
     "date-fns": "1.30.1",
     "frame-throttle": "3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 0b24d7f8f..297219939 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4021,7 +4021,7 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
+color@3.2.1, color@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==