diff --git a/tools/helper/package.json b/tools/helper/package.json
index 0384d2c102..2bb5c4e824 100644
--- a/tools/helper/package.json
+++ b/tools/helper/package.json
@@ -25,7 +25,10 @@
   },
   "type": "module",
   "exports": {
-    ".": "./lib/node/index.js",
+    ".": {
+      "sass": "./lib/styles/helper.scss",
+      "import": "./lib/node/index.js"
+    },
     "./client": "./lib/client/index.js",
     "./client/*": "./lib/client/*",
     "./shared": "./lib/shared/index.js",
@@ -42,7 +45,8 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "style": "sass src:lib --no-source-map"
+    "style": "sass src/client:lib/client --no-source-map",
+    "copy": "cpx \"src/styles/**/*.scss\" lib/styles"
   },
   "dependencies": {
     "@vue/shared": "^3.4.32",
diff --git a/tools/helper/src/styles/functions/_color.scss b/tools/helper/src/styles/functions/_color.scss
new file mode 100644
index 0000000000..1fa191421e
--- /dev/null
+++ b/tools/helper/src/styles/functions/_color.scss
@@ -0,0 +1,47 @@
+@use 'sass:color';
+@use 'sass:math';
+
+/**
+ * By adjusting the brightness of a color and calculating a new opacity value based on the color's original opacity, a high-contrast color within the same color scheme can be obtained.
+ */
+@function get-soft-color($color) {
+  $lightness: color.lightness($color);
+  $alpha: 1;
+
+  @if $lightness > 50% {
+    $alpha: $lightness - 40%;
+    $lightness: -30%;
+  } @else {
+    $alpha: math.max($lightness - 20%, 0);
+    $lightness: 25%;
+  }
+
+  /* stylelint-disable-next-line order/order */
+  $alpha: math.div(math.floor(100 * $alpha), 100);
+
+  @return rgba(color.scale($color, $lightness: $lightness), $alpha);
+}
+
+@function get-hover-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -17%;
+  } @else {
+    $lightness: 17%;
+  }
+
+  @return rgba(color.scale($color, $lightness: $lightness), 1);
+}
+
+@function get-background-color($color) {
+  $lightness: color.lightness($color);
+
+  @if $lightness > 50% {
+    $lightness: -36.265%;
+  } @else {
+    $lightness: 36.265%;
+  }
+
+  @return rgba(color.scale($color, $lightness: $lightness), 1);
+}
diff --git a/tools/helper/src/styles/helper.scss b/tools/helper/src/styles/helper.scss
new file mode 100644
index 0000000000..85a5055347
--- /dev/null
+++ b/tools/helper/src/styles/helper.scss
@@ -0,0 +1,2 @@
+@forward 'functions/color';
+@forward 'mixins/palette';
diff --git a/tools/helper/src/styles/mixins/_palette.scss b/tools/helper/src/styles/mixins/_palette.scss
new file mode 100644
index 0000000000..d25b4820ec
--- /dev/null
+++ b/tools/helper/src/styles/mixins/_palette.scss
@@ -0,0 +1,24 @@
+@use '../functions/color' as *;
+
+/**
+ * Mixins for color palette
+ *
+ * Input:
+ * :root {
+ *   @include color-palette("accent", #5086a1);
+ * }
+ *
+ * Output:
+ * :root {
+ *   --vp-c-accent: #5086a1;
+ *   --vp-c-accent-hover: #6a9cb5;
+ *   --vp-c-accent-bg: #8cb3c6;
+ *   --vp-c-accent-soft: rgba(120, 165, 188, 0.2725);
+ * }
+ */
+@mixin color-palette($name, $color) {
+  --vp-c-#{$name}: #{$color};
+  --vp-c-#{$name}-hover: #{get-hover-color($color)};
+  --vp-c-#{$name}-bg: #{get-background-color($color)};
+  --vp-c-#{$name}-soft: #{get-soft-color($color)};
+}