diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index a6c09e562..14376d530 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 <script>
-import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
+import { getContrastingTextColor } from '@chatwoot/utils';
 export default {
   props: {
     title: {
diff --git a/app/javascript/shared/helpers/ColorHelper.js b/app/javascript/shared/helpers/ColorHelper.js
deleted file mode 100644
index 50e3296ac..000000000
--- a/app/javascript/shared/helpers/ColorHelper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const getContrastingTextColor = bgColor => {
-  const color = bgColor.replace('#', '');
-  const r = parseInt(color.slice(0, 2), 16);
-  const g = parseInt(color.slice(2, 4), 16);
-  const b = parseInt(color.slice(4, 6), 16);
-  // http://stackoverflow.com/a/3943023/112731
-  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
-};
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index dcb11c7bb..448c33ba5 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -56,7 +56,7 @@ import FormInput from '../Form/Input';
 import FormTextArea from '../Form/TextArea';
 import Spinner from 'shared/components/Spinner';
 import { mapGetters } from 'vuex';
-import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
+import { getContrastingTextColor } from '@chatwoot/utils';
 import { required, minLength, email } from 'vuelidate/lib/validators';
 export default {
   components: {
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index a2889ec4c..41c389ae2 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -29,8 +29,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
-import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
 import CustomButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
diff --git a/package.json b/package.json
index 43766f3de..bf7f18e04 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517",
+    "@chatwoot/utils": "^0.0.3",
     "@rails/actioncable": "6.1.3",
     "@rails/webpacker": "5.3.0",
     "@sentry/vue": "^5.30.0",
diff --git a/yarn.lock b/yarn.lock
index c1ba0a607..600a23f0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1096,6 +1096,11 @@
     prosemirror-state "^1.3.3"
     prosemirror-view "^1.17.2"
 
+"@chatwoot/utils@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@chatwoot/utils/-/utils-0.0.3.tgz#40fbb6c6d1aed853b3c5189d0f4979d3ca185a2f"
+  integrity sha512-2KbA1r34IM2U58CUvsC9dEN3gsx5Dcc6uD1iHPFNC3zTsg8Tb+K7IQXxfZt+VAvV0fbniLzCuXt6h81Ds0aj6Q==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"