diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index 491050b1f7aaa0dd9a3a69439ac980a9831bc069..1f35de100e7b84d362e22248c3dc4f42636ca754 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -153,7 +153,7 @@ export default Vue.extend({
 
 		thumbnail(file: any): any {
 			return {
-				'background-color': file.properties.avgColor && file.properties.avgColor.length == 3 ? `rgb(${file.properties.avgColor.join(',')})` : 'transparent',
+				'background-color': file.properties.avgColor || 'transparent',
 				'background-image': `url(${file.thumbnailUrl})`
 			};
 		},
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index c074fb600fead3da11c90210b2caadec83b767b0..04f3ed9f78fcc0166e8c9c9d08712ac3143bdbea 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -55,12 +55,7 @@ export default Vue.extend({
 		},
 		icon(): any {
 			return {
-				backgroundColor: this.user.avatarColor ? this.lightmode
-					? this.user.avatarColor
-					: this.user.avatarColor.startsWith('rgb(')
-						? this.user.avatarColor
-						: null
-					: null,
+				backgroundColor: this.user.avatarColor,
 				backgroundImage: this.lightmode ? null : `url(${this.url})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue
index faa727f3b6f8573492ee8ed9eefc83380cc8a9b7..c432de17212c97e407e34442d85fcafb5ef934f6 100644
--- a/src/client/app/common/views/components/drive-file-thumbnail.vue
+++ b/src/client/app/common/views/components/drive-file-thumbnail.vue
@@ -111,9 +111,7 @@ export default Vue.extend({
 				: false;
 		},
 		background(): string {
-			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
-				? `rgb(${this.file.properties.avgColor.join(',')})`
-				: 'transparent';
+			return this.file.properties.avgColor || 'transparent';
 		}
 	},
 	mounted() {
@@ -122,10 +120,10 @@ export default Vue.extend({
 	},
 	methods: {
 		onThumbnailLoaded() {
-			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
+			if (this.file.properties.avgColor) {
 				anime({
 					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 					duration: 100,
 					easing: 'linear'
 				});
diff --git a/src/client/app/common/views/components/media-image.vue b/src/client/app/common/views/components/media-image.vue
index 3947ef5527959fca84b2a997399d172064e38c44..2559907512eaac2678f85615b0b9812d0975cf71 100644
--- a/src/client/app/common/views/components/media-image.vue
+++ b/src/client/app/common/views/components/media-image.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 			}
 
 			return {
-				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-color': this.image.properties.avgColor || 'transparent',
 				'background-image': url
 			};
 		}
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index ce76c402f314408279974fe37f0e84b6d4b633d1..256ea760b3e6e3b7eb3a337377b663797da35671 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -11,7 +11,7 @@
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
-							:style="{ backgroundColor: message.file.properties.avgColor && message.file.properties.avgColor.length == 3 ? `rgb(${message.file.properties.avgColor.join(',')})` : 'transparent' }"/>
+							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
 						<p v-else>{{ message.file.name }}</p>
 					</a>
 				</div>
diff --git a/src/client/app/common/views/components/settings/profile.vue b/src/client/app/common/views/components/settings/profile.vue
index acfc1875a66038bb497ade1d73adab20ccdcc9a5..fd08f858164e5b8f53bdec2ea01870c165f6bbf8 100644
--- a/src/client/app/common/views/components/settings/profile.vue
+++ b/src/client/app/common/views/components/settings/profile.vue
@@ -165,7 +165,7 @@ export default Vue.extend({
 		bannerStyle(): any {
 			if (this.$store.state.i.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.$store.state.i.bannerColor ? this.$store.state.i.bannerColor : null,
+				backgroundColor: this.$store.state.i.bannerColor,
 				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
 			};
 		},
diff --git a/src/client/app/common/views/deck/deck.user-column.vue b/src/client/app/common/views/deck/deck.user-column.vue
index 9e9f494b13c129c79f654aa6d9320c625501f861..e18a1111472089e86658abdda076c5c0ee418c86 100644
--- a/src/client/app/common/views/deck/deck.user-column.vue
+++ b/src/client/app/common/views/deck/deck.user-column.vue
@@ -88,7 +88,7 @@ export default Vue.extend({
 			if (this.user == null) return {};
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		},
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index f8d12a2dca64c0ab4ff3563ba38e0d6c9274f3ce..f6a11a7b4fd62dc97cf80ecc5379fed8f63c7c83 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 		bannerStyle(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		}
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 5b9ff81c0d122658945b3bef34d9d6aed2a3795b..46aae9ad2b2260d40d20032fc59e4cb38442dec7 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -139,10 +139,10 @@ export default Vue.extend({
 		},
 
 		onThumbnailLoaded() {
-			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
+			if (this.file.properties.avgColor) {
 				anime({
 					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 					duration: 100,
 					easing: 'linear'
 				});
diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue
index 61c3839c146b0584e04d62c34129404e8ce60960..e21757ccf9188ba50333a9a0f656c7272dcf1afc 100644
--- a/src/client/app/desktop/views/home/user/user.header.vue
+++ b/src/client/app/desktop/views/home/user/user.header.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 		style(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		},
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index 8f724b0f8e2fba3d60c938be7870dc4663f32970..98124354edbe7a8c0ad94f877bf32d78060861c3 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -85,8 +85,8 @@ export default Vue.extend({
 		},
 
 		style(): any {
-			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? {
-				'background-color': `rgb(${ this.file.properties.avgColor.join(',') })`
+			return this.file.properties.avgColor ? {
+				'background-color': this.file.properties.avgColor
 			} : {};
 		},
 
diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue
index 72f2998dbad8a4a56bc1909992bb905400737f3d..1376f3965758e274eea51fbd46ae5a2da1a8a2cf 100644
--- a/src/client/app/mobile/views/pages/user/index.vue
+++ b/src/client/app/mobile/views/pages/user/index.vue
@@ -114,7 +114,7 @@ export default Vue.extend({
 		style(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		}
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 45760e50dc443561b35562e3e28727463fbf76f1..16f3340ecd9dfacaf95eb0361e7154429cf12748 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -356,7 +356,7 @@ export default async function(
 
 				logger.debug(`average color is calculated: ${r}, ${g}, ${b}`);
 
-				const value = info.isOpaque ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},255)`;
+				const value = info.isOpaque ? `rgba(${r},${g},${b},0)` : `rgba(${r},${g},${b},255)`;
 
 				properties['avgColor'] = value;
 			} catch (e) { }