diff --git a/ts/state/selectors/message.ts b/ts/state/selectors/message.ts
index 8e10311b8..ac0779fb6 100644
--- a/ts/state/selectors/message.ts
+++ b/ts/state/selectors/message.ts
@@ -81,6 +81,7 @@ import {
   someSendStatus,
 } from '../../messages/MessageSendState';
 import * as log from '../../logging/log';
+import { getConversationColorAttributes } from '../../util/getConversationColorAttributes';
 
 const THREE_HOURS = 3 * 60 * 60 * 1000;
 
@@ -464,8 +465,8 @@ export const getPropsForQuote = createSelectorCreator(memoizeByRoot, isEqual)(
     const firstAttachment = quote.attachments && quote.attachments[0];
     const conversation = getConversation(message, conversationSelector);
 
-    const defaultConversationColor =
-      window.Events.getDefaultConversationColor();
+    const { conversationColor, customColor } =
+      getConversationColorAttributes(conversation);
 
     return {
       authorId,
@@ -474,11 +475,8 @@ export const getPropsForQuote = createSelectorCreator(memoizeByRoot, isEqual)(
       authorProfileName,
       authorTitle,
       bodyRanges: processBodyRanges(quote, { conversationSelector }),
-      conversationColor:
-        conversation.conversationColor || defaultConversationColor.color,
-      customColor:
-        conversation.customColor ||
-        defaultConversationColor.customColorData?.value,
+      conversationColor,
+      customColor,
       isFromMe,
       rawAttachment: firstAttachment
         ? processQuoteAttachment(firstAttachment)
@@ -585,8 +583,8 @@ const getShallowPropsForMessage = createSelectorCreator(memoizeByRoot, isEqual)(
     });
     const contactNameColor = contactNameColorSelector(conversationId, authorId);
 
-    const defaultConversationColor =
-      window.Events.getDefaultConversationColor();
+    const { conversationColor, customColor } =
+      getConversationColorAttributes(conversation);
 
     return {
       canDeleteForEveryone: canDeleteForEveryone(message),
@@ -594,13 +592,10 @@ const getShallowPropsForMessage = createSelectorCreator(memoizeByRoot, isEqual)(
       canReply: canReply(message, ourConversationId, conversationSelector),
       contact: getPropsForEmbeddedContact(message, regionCode, accountSelector),
       contactNameColor,
-      conversationColor:
-        conversation.conversationColor || defaultConversationColor.color,
+      conversationColor,
       conversationId,
       conversationType: isGroup ? 'group' : 'direct',
-      customColor:
-        conversation.customColor ||
-        defaultConversationColor.customColorData?.value,
+      customColor,
       deletedForEveryone: message.deletedForEveryone || false,
       direction: isIncoming(message) ? 'incoming' : 'outgoing',
       displayLimit: message.displayLimit,
diff --git a/ts/state/smart/ChatColorPicker.tsx b/ts/state/smart/ChatColorPicker.tsx
index 776c8b5e6..919d6a41d 100644
--- a/ts/state/smart/ChatColorPicker.tsx
+++ b/ts/state/smart/ChatColorPicker.tsx
@@ -11,8 +11,8 @@ import {
   getConversationSelector,
   getConversationsWithCustomColorSelector,
 } from '../selectors/conversations';
-import { getDefaultConversationColor } from '../selectors/items';
 import { getIntl } from '../selectors/user';
+import { getConversationColorAttributes } from '../../util/getConversationColorAttributes';
 
 export type SmartChatColorPickerProps = {
   conversationId?: string;
@@ -22,14 +22,10 @@ const mapStateToProps = (
   state: StateType,
   props: SmartChatColorPickerProps
 ): PropsDataType => {
-  const defaultConversationColor = getDefaultConversationColor(state);
-  const colorValues = props.conversationId
+  const conversation = props.conversationId
     ? getConversationSelector(state)(props.conversationId)
-    : {
-        conversationColor: defaultConversationColor.color,
-        customColorId: defaultConversationColor.customColorData?.id,
-        customColor: defaultConversationColor.customColorData?.value,
-      };
+    : {};
+  const colorValues = getConversationColorAttributes(conversation);
 
   const { customColors } = state.items;
 
diff --git a/ts/state/smart/ConversationDetails.tsx b/ts/state/smart/ConversationDetails.tsx
index 0fd5c3407..34e08c852 100644
--- a/ts/state/smart/ConversationDetails.tsx
+++ b/ts/state/smart/ConversationDetails.tsx
@@ -22,6 +22,7 @@ import {
 } from '../selectors/badges';
 import { assert } from '../../util/assert';
 import { SignalService as Proto } from '../../protobuf';
+import { getConversationColorAttributes } from '../../util/getConversationColorAttributes';
 
 export type SmartConversationDetailsProps = {
   addMembers: (conversationIds: ReadonlyArray<string>) => Promise<void>;
@@ -87,7 +88,10 @@ const mapStateToProps = (
     badges,
     canEditGroupInfo,
     candidateContactsToAdd,
-    conversation,
+    conversation: {
+      ...conversation,
+      ...getConversationColorAttributes(conversation),
+    },
     getPreferredBadge: getPreferredBadgeSelector(state),
     i18n: getIntl(state),
     isAdmin,
diff --git a/ts/util/getConversationColorAttributes.ts b/ts/util/getConversationColorAttributes.ts
new file mode 100644
index 000000000..eb0c231da
--- /dev/null
+++ b/ts/util/getConversationColorAttributes.ts
@@ -0,0 +1,37 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ConversationColorType, CustomColorType } from '../types/Colors';
+import type { ConversationType } from '../state/ducks/conversations';
+
+export function getConversationColorAttributes(
+  conversationColors: Pick<
+    ConversationType,
+    'conversationColor' | 'customColorId' | 'customColor'
+  >
+): {
+  conversationColor: ConversationColorType;
+  customColor: CustomColorType | undefined;
+  customColorId: string | undefined;
+} {
+  const defaultConversationColor = window.Events.getDefaultConversationColor();
+
+  const conversationColor =
+    conversationColors.conversationColor || defaultConversationColor.color;
+  const customColor =
+    conversationColor !== 'custom'
+      ? undefined
+      : conversationColors.customColor ||
+        defaultConversationColor.customColorData?.value;
+  const customColorId =
+    conversationColor !== 'custom'
+      ? undefined
+      : conversationColors.customColorId ||
+        defaultConversationColor.customColorData?.id;
+
+  return {
+    conversationColor,
+    customColor,
+    customColorId,
+  };
+}