diff --git a/package-lock.json b/package-lock.json
index 8d244015b..e182e9aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/vue": "^7.12.4",
         "blueimp-md5": "^2.19.0",
+        "chroma-js": "^2.4.2",
         "dompurify": "^3.0.5",
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
@@ -6713,6 +6714,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "license": "MIT",
@@ -24826,6 +24832,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "peer": true
diff --git a/package.json b/package.json
index 8028de4fc..cfb79b881 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/vue": "^7.12.4",
     "blueimp-md5": "^2.19.0",
+    "chroma-js": "^2.4.2",
     "dompurify": "^3.0.5",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index f0a18cf90..a46ffcc9f 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -65,6 +65,7 @@
 
 				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
+
 			<transition-group v-if="card.labels && card.labels.length"
 				name="zoom"
 				tag="ul"
diff --git a/src/mixins/color.js b/src/mixins/color.js
index 7ab48790c..45c0441b2 100644
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -20,76 +20,19 @@
  *
  */
 
+import chroma from "chroma-js"
+
 export default {
 	methods: {
-		hexToRgb(hex) {
-			const result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex)
-			if (result) {
-				return {
-					r: parseInt(result[1], 16),
-					g: parseInt(result[2], 16),
-					b: parseInt(result[3], 16),
-				}
-			}
-			return null
-		},
-		rgb2hls(rgb) {
-			// RGB2HLS by Garry Tan
-			// http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
-			const r = rgb.r / 255
-			const g = rgb.g / 255
-			const b = rgb.b / 255
-			const max = Math.max(r, g, b)
-			const min = Math.min(r, g, b)
-			let h
-			let s
-			const l = (max + min) / 2
-
-			if (max === min) {
-				h = s = 0 // achromatic
-			} else {
-				const d = max - min
-				s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-				switch (max) {
-				case r:
-					h = (g - b) / d + (g < b ? 6 : 0)
-					break
-				case g:
-					h = (b - r) / d + 2
-					break
-				case b:
-					h = (r - g) / d + 4
-					break
-				}
-				h /= 6
-			}
-			return {
-				h, l, s,
-			}
-		},
 		textColor(hex) {
-
-			const rgb = this.hexToRgb(hex)
-			if (rgb === null) {
-				return '#000000'
-			}
-			const { l } = this.rgb2hls(rgb)
-
-			if (l < 0.5) {
-				return '#ffffff'
-			} else {
-				return '#000000'
-			}
-
+			return chroma(hex).get('lab.l') > 50 ? '#000000' : '#ffffff'
 		},
 		colorIsValid(hex) {
-
 			const re = /[A-Fa-f0-9]{6}/
 			if (re.test(hex)) {
 				return true
 			}
 			return false
-
 		},
 		randomColor() {
 			return Math.floor(Math.random() * (0xffffff + 1)).toString(16).padStart(6, '0')