diff --git a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
index a029dd2d57..9fa88cf590 100644
--- a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
+++ b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
@@ -147,7 +147,7 @@ exports[`components/UserProfile should match snapshot, with colorization 1`] = `
       className="user-popover style--none"
       style={
         Object {
-          "color": "#000000",
+          "color": "#bbd279",
         }
       }
     >
diff --git a/webapp/channels/src/components/user_profile/user_profile.test.tsx b/webapp/channels/src/components/user_profile/user_profile.test.tsx
index 41287f0e62..69f0c985e7 100644
--- a/webapp/channels/src/components/user_profile/user_profile.test.tsx
+++ b/webapp/channels/src/components/user_profile/user_profile.test.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import {UserProfile as UserProfileType} from '@mattermost/types/users';
+import {Preferences} from 'mattermost-redux/constants';
 
 import UserProfile from './user_profile';
 
@@ -14,6 +15,7 @@ describe('components/UserProfile', () => {
         isBusy: false,
         user: {username: 'username'} as UserProfileType,
         userId: 'user_id',
+        theme: Preferences.THEMES.onyx,
     };
 
     test('should match snapshot', () => {
diff --git a/webapp/channels/src/components/user_profile/user_profile.tsx b/webapp/channels/src/components/user_profile/user_profile.tsx
index 770ca0c54d..59ea50a213 100644
--- a/webapp/channels/src/components/user_profile/user_profile.tsx
+++ b/webapp/channels/src/components/user_profile/user_profile.tsx
@@ -90,7 +90,7 @@ export default class UserProfile extends PureComponent<UserProfileProps> {
 
         const ariaName: string = typeof name === 'string' ? name.toLowerCase() : '';
 
-        let userColor = '#000000';
+        let userColor = theme?.centerChannelColor;
         if (user && theme) {
             userColor = generateColor(user.username, theme.centerChannelBg);
         }
@@ -130,7 +130,7 @@ export default class UserProfile extends PureComponent<UserProfileProps> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <OverlayTrigger
                     ref={this.setOverlaynRef}
                     trigger={['click']}
@@ -163,7 +163,7 @@ export default class UserProfile extends PureComponent<UserProfileProps> {
                 {sharedIcon}
                 {(user && user.is_bot) && <BotTag/>}
                 {(user && isGuest(user.roles)) && <GuestTag/>}
-            </React.Fragment>
+            </>
         );
     }
 }