diff --git a/src/app/components/HexColorPickerPopOut.tsx b/src/app/components/HexColorPickerPopOut.tsx
index ee35665f2e..77d183a3f8 100644
--- a/src/app/components/HexColorPickerPopOut.tsx
+++ b/src/app/components/HexColorPickerPopOut.tsx
@@ -1,18 +1,32 @@
 import FocusTrap from 'focus-trap-react';
 import type { RectCords } from 'folds';
 import { Box, Button, config, Menu, Text } from 'folds';
+import { HexColorPicker } from 'react-colorful';
 import { PopOut } from '$components/overlay-stack';
 import type { MouseEventHandler, ReactNode } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { stopPropagation } from '$utils/keyboard';
 
 type HexColorPickerPopOutProps = {
   children: (onOpen: MouseEventHandler<HTMLElement>, opened: boolean) => ReactNode;
-  picker: ReactNode;
+  color: string;
+  onChange: (color: string) => void;
   onRemove?: () => void;
 };
-export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPickerPopOutProps) {
+const isValidHexColor = (color: string) => /^#[0-9A-F]{6}$/i.test(color);
+
+export function HexColorPickerPopOut({
+  color,
+  onChange,
+  onRemove,
+  children,
+}: HexColorPickerPopOutProps) {
   const [cords, setCords] = useState<RectCords>();
+  const [pickerColor, setPickerColor] = useState(isValidHexColor(color) ? color : '#FFFFFF');
+
+  useEffect(() => {
+    if (isValidHexColor(color)) setPickerColor(color);
+  }, [color]);
 
   const handleOpen: MouseEventHandler<HTMLElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
@@ -39,7 +53,13 @@ export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPic
             }}
           >
             <Box direction="Column" gap="200">
-              {picker}
+              <HexColorPicker
+                color={pickerColor}
+                onChange={(newColor) => {
+                  setPickerColor(newColor);
+                  onChange(newColor);
+                }}
+              />
               {onRemove && (
                 <Button
                   size="300"
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index 116626bb44..908b4e948d 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -26,7 +26,6 @@ import {
   Trash,
   X,
 } from '$components/icons/phosphor';
-import { HexColorPicker } from 'react-colorful';
 import { useAtomValue } from 'jotai';
 import { Page, PageContent, PageHeader } from '$components/page';
 import type { IPowerLevels } from '$hooks/usePowerLevels';
@@ -134,7 +133,8 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: Readonly<EditPower
             <Text size="L400">Color</Text>
             <Box gap="200" alignItems="Center">
               <HexColorPickerPopOut
-                picker={<HexColorPicker color={tagColor} onChange={handleUpdateColor} />}
+                color={tagColor}
+                onChange={handleUpdateColor}
                 onRemove={() => setTagColor('#FFFFFF')}
               >
                 {(openPicker, opened) => (
diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx
index bfd6557f28..47ed6b4169 100644
--- a/src/app/features/settings/account/NameColorEditor.tsx
+++ b/src/app/features/settings/account/NameColorEditor.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Box, Button, config, color, Text, Input, IconButton } from 'folds';
 import { menuIcon, X } from '$components/icons/phosphor';
-import { HexColorPicker } from 'react-colorful';
 import { SettingTile } from '$components/setting-tile';
 import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut';
 import { isValidHex } from '$hooks/useUserProfile';
@@ -116,9 +115,7 @@ export function NameColorEditor({
                   <Text size="B300">Save</Text>
                 </Button>
               )}
-              <HexColorPickerPopOut
-                picker={<HexColorPicker color={tempColor ?? '#FFFFFF'} onChange={handleUpdate} />}
-              >
+              <HexColorPickerPopOut color={tempColor ?? '#FFFFFF'} onChange={handleUpdate}>
                 {(onOpen, opened) => (
                   <Button
                     onClick={onOpen}