diff --git a/package-lock.json b/package-lock.json
index 12e75d37f..b07998ef0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2175,6 +2175,23 @@
       "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        }
       }
     },
     "anymatch": {
@@ -5169,19 +5186,17 @@
       }
     },
     "color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "requires": {
-        "color-name": "1.1.3"
+        "color-name": "~1.1.4"
       }
     },
     "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "combined-stream": {
       "version": "1.0.7",
diff --git a/package.json b/package.json
index 6d825ed4c..6b1eebe78 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
 		"@fullcalendar/vue": "^4.3.1",
 		"calendar-js": "git+https://github.com/georgehrke/calendar-js.git",
 		"cdav-library": "github:nextcloud/cdav-library",
+		"color-convert": "^2.0.1",
 		"debounce": "^1.2.0",
 		"jstz": "^2.1.1",
 		"nextcloud-auth": "0.0.3",
diff --git a/src/components/AppNavigation/CalendarListNew.vue b/src/components/AppNavigation/CalendarListNew.vue
index 9feb3814a..1bdf52e95 100644
--- a/src/components/AppNavigation/CalendarListNew.vue
+++ b/src/components/AppNavigation/CalendarListNew.vue
@@ -24,7 +24,7 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { randomColor } from '../../services/colorService'
+import { getRandomColor } from '../../services/colorService'
 
 export default {
 	name: 'CalendarListNew',
@@ -63,7 +63,7 @@ export default {
 		},
 		addCalendar() {
 			this.isCreating = true
-			this.$store.dispatch('appendCalendar', { displayName: this.displayName, color: randomColor() })
+			this.$store.dispatch('appendCalendar', { displayName: this.displayName, color: getRandomColor() })
 				.then(() => {
 					this.displayName = ''
 					this.showForm = false
diff --git a/src/components/AppNavigation/SubscriptionListNew.vue b/src/components/AppNavigation/SubscriptionListNew.vue
index 8456b67f4..600151ff4 100644
--- a/src/components/AppNavigation/SubscriptionListNew.vue
+++ b/src/components/AppNavigation/SubscriptionListNew.vue
@@ -24,7 +24,7 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { randomColor } from '../../services/colorService'
+import { getRandomColor } from '../../services/colorService'
 
 export default {
 	name: 'SubscriptionListNew',
@@ -63,7 +63,7 @@ export default {
 		},
 		addCalendar() {
 			this.isCreating = true
-			this.$store.dispatch('appendSubscription', { displayName: '', color: randomColor(), source: this.link })
+			this.$store.dispatch('appendSubscription', { displayName: '', color: getRandomColor(), source: this.link })
 				.then(() => {
 					this.displayName = ''
 					this.showForm = false
diff --git a/src/fullcalendar/eventSource.js b/src/fullcalendar/eventSource.js
index ea898b15e..5dff0f70f 100644
--- a/src/fullcalendar/eventSource.js
+++ b/src/fullcalendar/eventSource.js
@@ -20,8 +20,7 @@
  *
  */
 import {
-	extractRGBFromHexString,
-	generateTextColorFromRGB
+	generateTextColorForRGBString
 } from '../services/colorService'
 import getTimezoneManager from '../services/timezoneDataProviderService'
 import { getUnixTimestampFromDate } from '../services/date'
@@ -34,18 +33,12 @@ import { eventSourceFunction } from './eventSourceFunction.js'
  */
 export default function(store) {
 	return function(calendar) {
-		const {
-			red: colorRed,
-			green: colorGreen,
-			blue: colorBlue
-		} = extractRGBFromHexString(calendar.color)
-
 		const source = {
 			id: calendar.id,
 			// coloring
 			backgroundColor: calendar.color,
 			borderColor: calendar.color,
-			textColor: generateTextColorFromRGB(colorRed, colorGreen, colorBlue),
+			textColor: generateTextColorForRGBString(calendar.color),
 			// html foo
 			className: calendar.id,
 			events: ({ start, end, timeZone }, successCallback, failureCallback) => {
diff --git a/src/fullcalendar/eventSourceFunction.js b/src/fullcalendar/eventSourceFunction.js
index fb1d14cd0..f27f06092 100644
--- a/src/fullcalendar/eventSourceFunction.js
+++ b/src/fullcalendar/eventSourceFunction.js
@@ -20,8 +20,7 @@
  *
  */
 import {
-	generateTextColorFromRGB,
-	extractRGBFromHexString
+	generateTextColorForRGBString
 } from '../services/colorService'
 
 /**
@@ -62,8 +61,7 @@ export function eventSourceFunction(calendarObjects, start, end, timezone) {
 
 			if (calendarObject.color) {
 				fcEvent.backgroundColor = calendarObject.color
-				const { red, green, blue } = extractRGBFromHexString(calendarObject.color)
-				fcEvent.textColor = generateTextColorFromRGB(red, green, blue)
+				fcEvent.textColor = generateTextColorForRGBString(calendarObject.color)
 			}
 
 			fcEvents.push(fcEvent)
diff --git a/src/models/calendar.js b/src/models/calendar.js
index abca0d74c..da0938b01 100644
--- a/src/models/calendar.js
+++ b/src/models/calendar.js
@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import defaultColor from '../services/defaultColor'
+import { getDefaultColor } from '../services/colorService.js'
 import client from '../services/caldavService.js'
 
 /**
@@ -34,7 +34,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
 	// Visible display name
 	displayName: '',
 	// Color of the calendar
-	color: defaultColor(),
+	color: getDefaultColor(),
 	// Whether or not the calendar is visible in the grid
 	enabled: true,
 	// Whether or not the calendar is loading events at the moment
@@ -78,7 +78,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
  * @returns {Object}
  */
 export function mapDavCollectionToCalendar(calendar) {
-	let color = calendar.color || defaultColor()
+	let color = calendar.color || getDefaultColor()
 	if (color.length === 9) {
 		// Make sure it's #RRGGBB, not #RRGGBBAA
 		color = color.substr(0, 7)
diff --git a/src/services/colorService.js b/src/services/colorService.js
index 78226e707..84d94fcbb 100644
--- a/src/services/colorService.js
+++ b/src/services/colorService.js
@@ -19,26 +19,16 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
-/** @type String [] */
-const colors = []
+import convert from 'color-convert'
 
 /**
- * get the appropriate text color to be used on top of an rgb value
+ * Get a text-color that's readable on a given background color
  *
- * @param {Number|String} red decimal value for red
- * @param {Number} green decimal value for green
- * @param {Number} blue decimal value for blue
- * @returns {string}
+ * @param {String} rgbString The hex RGB string to get a text color for
+ * @returns {String} the matching text color
  */
-export function generateTextColorFromRGB(red, green, blue) {
-	if (typeof red === 'string') {
-		const { r, g, b } = extractRGBFromHexString(red)
-		red = r
-		green = g
-		blue = b
-	}
-
+export function generateTextColorForRGBString(rgbString) {
+	const [red, green, blue] = convert.hex.rgb(rgbString.substr(1))
 	const brightness = (((red * 299) + (green * 587) + (blue * 114)) / 1000)
 	return (brightness > 130) ? '#000000' : '#FAFAFA'
 }
@@ -48,94 +38,25 @@ export function generateTextColorFromRGB(red, green, blue) {
  *
  * @returns {String}
  */
-export function randomColor() {
-	if (typeof String.prototype.toRgb === 'function') {
-		const { r, g, b } = Math.random().toString().toRgb()
-		return rgbToHex(r, g, b)
-	} else {
-		return colors[Math.floor(Math.random() * colors.length)]
-	}
+export function getRandomColor() {
+	const red = Math.floor(Math.random() * 256)
+	const green = Math.floor(Math.random() * 256)
+	const blue = Math.floor(Math.random() * 256)
+
+	return '#' + convert.rgb.hex(red, green, blue)
 }
 
 /**
- * extracts decimal rgb values from a hexadecimal string
+ * Gets the default color of the nextcloud instance
  *
- * @param {String} colorString the hex rgb string
- * @returns {{red: Number, green: Number, blue: Number}}
- */
-export function extractRGBFromHexString(colorString) {
-	const fallbackColor = { red: 255, green: 255, blue: 255 }
-	let matchedString
-
-	if (typeof colorString !== 'string') {
-		return fallbackColor
-	}
-
-	switch (colorString.length) {
-	case 4: {
-		matchedString = colorString.match(/^#([0-9a-f]{3})$/i)
-		return (Array.isArray(matchedString) && matchedString[1])
-			? ({
-				red: parseInt(matchedString[1].charAt(0), 16) * 0x11,
-				green: parseInt(matchedString[1].charAt(1), 16) * 0x11,
-				blue: parseInt(matchedString[1].charAt(2), 16) * 0x11
-			})
-			: fallbackColor
-	}
-
-	case 7:
-	case 9: {
-		const regex = new RegExp('^#([0-9a-f]{' + (colorString.length - 1) + '})$', 'i')
-		matchedString = colorString.match(regex)
-		return (Array.isArray(matchedString) && matchedString[1])
-			? ({
-				red: parseInt(matchedString[1].substr(0, 2), 16),
-				green: parseInt(matchedString[1].substr(2, 2), 16),
-				blue: parseInt(matchedString[1].substr(4, 2), 16)
-			})
-			: fallbackColor
-	}
-
-	default:
-		return fallbackColor
-	}
-}
-
-/**
- *
- * @param {String[]|String} red Value from 0 to 255
- * @param {String} green Value from 0 to 255
- * @param {String} blue Value from 0 to 255
  * @returns {string}
  */
-export function rgbToHex(red, green, blue) {
-	if (Array.isArray(red)) {
-		[red, green, blue] = red
+export function getDefaultColor() {
+	const fallback = '#1483C6'
+
+	if (!OCA.Theming) {
+		return fallback
 	}
 
-	return [
-		'#',
-		('0' + parseInt(red, 10).toString(16)).slice(-2),
-		('0' + parseInt(green, 10).toString(16)).slice(-2),
-		('0' + parseInt(blue, 10).toString(16)).slice(-2)
-	].join('')
-}
-
-// initialize default colors
-if (typeof String.prototype.toRgb === 'function') {
-	['15', '9', '4', 'b', '6', '11', '74', 'f', '57'].forEach((hashValue) => {
-		const { r, g, b } = hashValue.toRgb()
-		colors.push(rgbToHex(r, g, b))
-	})
-} else {
-	colors.push(
-		'#31CC7C',
-		'#317CCC',
-		'#FF7A66',
-		'#F1DB50',
-		'#7C31CC',
-		'#CC317C',
-		'#3A3B3D',
-		'#CACBCD'
-	)
+	return OCA.Theming.color || fallback
 }
diff --git a/src/services/defaultColor.js b/src/services/defaultColor.js
deleted file mode 100644
index 97a4fe024..000000000
--- a/src/services/defaultColor.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Georg Ehrke
- *
- * @author Georg Ehrke <oc.list@georgehrke.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-/**
- * Returns a default color
- *
- * @returns {string}
- */
-export default function defaultColor() {
-	const fallback = '#000000'
-
-	if (!OCA.Theming) {
-		return fallback
-	}
-
-	return OCA.Theming.color || fallback
-}
diff --git a/src/store/calendars.js b/src/store/calendars.js
index b0fcd1839..347a89252 100644
--- a/src/store/calendars.js
+++ b/src/store/calendars.js
@@ -29,7 +29,7 @@ import CalendarObject from '../models/calendarObject'
 import { dateFactory, getUnixTimestampFromDate } from '../services/date'
 import { getDefaultCalendarObject, mapDavCollectionToCalendar } from '../models/calendar'
 import pLimit from 'p-limit'
-import { randomColor } from '../services/colorService'
+import { getRandomColor } from '../services/colorService'
 
 const state = {
 	calendars: [],
@@ -728,7 +728,7 @@ const actions = {
 				const displayName = file.parser.getName() || t('calendar', 'Imported {filename}', {
 					filename: file.name
 				})
-				const color = file.parser.getColor() || randomColor()
+				const color = file.parser.getColor() || getRandomColor()
 				const components = []
 				if (file.parser.containsVEvents()) {
 					components.push('VEVENT')
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index d1f6b9d47..ce9f48553 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -71,7 +71,7 @@ import allLocales from '@fullcalendar/core/locales-all'
 
 import AppNavigation from '../components/AppNavigation.vue'
 import { AppContent, Content } from 'nextcloud-vue'
-import { randomColor } from '../services/colorService'
+import { getRandomColor } from '../services/colorService'
 import client from '../services/caldavService.js'
 
 import debounce from 'debounce'
@@ -247,7 +247,7 @@ export default {
 					this.loadingCalendars = true
 					this.$store.dispatch('appendCalendar', {
 						displayName: t('calendars', 'Personal'),
-						color: randomColor(),
+						color: getRandomColor(),
 						order: 0
 					}).then(() => {
 						this.loadingCalendars = false
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 55742dcf0..23ad96356 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -112,7 +112,7 @@ import Repeat from '../components/Editor/Repeat/Repeat.vue'
 import EditorMixin from '../mixins/EditorMixin'
 import { getIllustrationForTitle } from '../services/illustrationProviderService.js'
 import IllustrationHeader from '../components/Editor/IllustrationHeader.vue'
-import defaultColor from '../services/defaultColor.js'
+import { getDefaultColor } from '../services/colorService.js'
 
 export default {
 	name: 'EditSidebar',
@@ -151,10 +151,10 @@ export default {
 		},
 		selectedCalendarColor() {
 			if (!this.selectedCalendar) {
-				return defaultColor()
+				return getDefaultColor()
 			}
 
-			return this.selectedCalendar.color || defaultColor()
+			return this.selectedCalendar.color || getDefaultColor()
 		}
 	}
 }