diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { View, FlatList, Platform } from 'react-native';
 import { createSelector } from 'reselect';
+import tinycolor from 'tinycolor2';
 
 import {
   changeThreadSettingsActionTypes,
@@ -318,8 +319,8 @@
       }
     }
     if (
-      newNavThreadInfo.color !== oldNavThreadInfo.color &&
-      this.state.colorEditValue === oldNavThreadInfo.color
+      !tinycolor.equals(newNavThreadInfo.color, oldNavThreadInfo.color) &&
+      tinycolor.equals(this.state.colorEditValue, oldNavThreadInfo.color)
     ) {
       this.setState({ colorEditValue: newNavThreadInfo.color });
     }
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -195,7 +195,7 @@
       [css.darkEntry]: darkColor,
       [css.focusedEntry]: this.state.focused,
     });
-    const style = { backgroundColor: '#' + this.props.threadInfo.color };
+    const style = { backgroundColor: `#${this.props.threadInfo.color}` };
     const loadingIndicatorColor = darkColor ? 'white' : 'black';
     const canEditEntry = threadHasPermission(
       this.props.threadInfo,
diff --git a/web/loading-indicator.react.js b/web/loading-indicator.react.js
--- a/web/loading-indicator.react.js
+++ b/web/loading-indicator.react.js
@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import * as React from 'react';
+import tinycolor from 'tinycolor2';
 
 import type { LoadingStatus } from 'lib/types/loading-types';
 
@@ -29,7 +30,8 @@
         hasRendered && size === 'medium',
       [css['loading-indicator-loading-small']]: hasRendered && size === 'small',
       [css['loading-indicator-loading-large']]: hasRendered && size === 'large',
-      [css['loading-indicator-black']]: hasRendered && color === 'black',
+      [css['loading-indicator-black']]:
+        hasRendered && tinycolor.equals(color, 'black'),
     };
     if (props.loadingClassName) {
       classNameInput[props.loadingClassName] = true;
@@ -38,7 +40,7 @@
   } else if (props.status === 'error') {
     const classNameInput = {
       [css['loading-indicator-error']]: true,
-      [css['loading-indicator-error-black']]: color === 'black',
+      [css['loading-indicator-error-black']]: tinycolor.equals(color, 'black'),
     };
     if (props.errorClassName) {
       classNameInput[props.errorClassName] = true;