diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 6b407ccc80..3e1b17635f 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -26,7 +26,11 @@ export default Vue.extend({
 		},
 		style(): any {
 			return {
-				backgroundColor: this.user.avatarColor && this.user.avatarColor.length == 3 ? `rgb(${ this.user.avatarColor.join(',') })` : null,
+				backgroundColor: this.lightmode
+					? `rgb(${ this.user.avatarColor.slice(0, 3).join(',') })`
+					: this.user.avatarColor && this.user.avatarColor.length == 3
+						? `rgb(${ this.user.avatarColor.join(',') })`
+						: null,
 				backgroundImage: this.lightmode ? null : `url(${ this.user.avatarUrl }?thumbnail)`,
 				borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null
 			};