diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
index 4cb45a99f6..667a6de460 100644
--- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
+++ b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
@@ -21,7 +21,7 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => {
       {children}
       <Spacer />
       {badges?.map((b, i) => (
-        <InvBadge key={`${b}.${i}`} colorScheme="blue">
+        <InvBadge key={`${b}.${i}`} colorScheme="invokeBlue">
           {b}
         </InvBadge>
       ))}
diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx
index 80a31b5b25..c317c3b84d 100644
--- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx
+++ b/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta<typeof InvButton> = {
 export default meta;
 type Story = StoryObj<typeof InvButton>;
 
-const colorSchemes = ['base', 'invokeYellow', 'red', 'green', 'blue'] as const;
+const colorSchemes = ['base', 'invokeYellow', 'invokeRed', 'invokeGreen', 'invokeBlue'] as const;
 const variants = ['solid', 'outline', 'ghost', 'link'] as const;
 const sizes = ['xs', 'sm', 'md', 'lg'] as const;
 
diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx
index ffd2bbca86..945e7258cf 100644
--- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx
+++ b/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx
@@ -12,7 +12,7 @@ export const InvButton = memo(
           <InvTooltip label={tooltip}>
             <Button
               ref={ref}
-              colorScheme={isChecked ? 'blue' : 'base'}
+              colorScheme={isChecked ? 'invokeBlue' : 'base'}
               {...rest}
             >
               {children}
@@ -22,7 +22,7 @@ export const InvButton = memo(
       }
 
       return (
-        <Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}>
+        <Button ref={ref} colorScheme={isChecked ? 'invokeBlue' : 'base'} {...rest}>
           {children}
         </Button>
       );
diff --git a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts b/invokeai/frontend/web/src/common/components/InvHeading/theme.ts
index abbed4b39f..73c0eecdc5 100644
--- a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvHeading/theme.ts
@@ -1,11 +1,11 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
-const blue = defineStyle(() => ({
-  color: 'blue.300',
+const invokeBlue = defineStyle(() => ({
+  color: 'invokeBlue.300',
 }));
 
 export const headingTheme = defineStyleConfig({
   variants: {
-    blue,
+    invokeBlue,
   },
 });
diff --git a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx
index 747658ee43..6bddb79e2b 100644
--- a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx
+++ b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx
@@ -11,7 +11,7 @@ export const InvIconButton = memo(
           <InvTooltip label={tooltip}>
             <IconButton
               ref={ref}
-              colorScheme={isChecked ? 'blue' : 'base'}
+              colorScheme={isChecked ? 'invokeBlue' : 'base'}
               {...rest}
             />
           </InvTooltip>
@@ -21,7 +21,7 @@ export const InvIconButton = memo(
       return (
         <IconButton
           ref={ref}
-          colorScheme={isChecked ? 'blue' : 'base'}
+          colorScheme={isChecked ? 'invokeBlue' : 'base'}
           {...rest}
         />
       );
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index ffc2eda332..7823e068ea 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -142,7 +142,7 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label={`${t('unifiedCanvas.previous')} (Left)`}
           icon={<FaArrowLeft />}
           onClick={handlePrevImage}
-          colorScheme="blue"
+          colorScheme="invokeBlue"
           isDisabled={!shouldShowStagingImage}
         />
         <InvButton
@@ -156,7 +156,7 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label={`${t('unifiedCanvas.next')} (Right)`}
           icon={<FaArrowRight />}
           onClick={handleNextImage}
-          colorScheme="blue"
+          colorScheme="invokeBlue"
           isDisabled={!shouldShowStagingImage}
         />
       </InvButtonGroup>
@@ -166,7 +166,7 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
           icon={<FaCheck />}
           onClick={handleAccept}
-          colorScheme="blue"
+          colorScheme="invokeBlue"
         />
         <InvIconButton
           tooltip={
@@ -182,7 +182,7 @@ const IAICanvasStagingAreaToolbar = () => {
           data-alert={!shouldShowStagingImage}
           icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
           onClick={handleToggleShouldShowStagingImage}
-          colorScheme="blue"
+          colorScheme="invokeBlue"
         />
         <InvIconButton
           tooltip={t('unifiedCanvas.saveToGallery')}
@@ -190,7 +190,7 @@ const IAICanvasStagingAreaToolbar = () => {
           isDisabled={!imageDTO || !imageDTO.is_intermediate}
           icon={<FaSave />}
           onClick={handleSaveToGallery}
-          colorScheme="blue"
+          colorScheme="invokeBlue"
         />
         <InvIconButton
           tooltip={t('unifiedCanvas.discardAll')}
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
index c95a1e9b23..484f484d8a 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
@@ -34,7 +34,7 @@ export const EmbeddingPopover = memo((props: EmbeddingPopoverProps) => {
         p={0}
         insetBlockStart={-1}
         shadow="dark-lg"
-        borderColor="blue.300"
+        borderColor="invokeBlue.300"
         borderWidth="2px"
         borderStyle="solid"
       >
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
index 459f0e987e..72da8b3cba 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
@@ -6,7 +6,7 @@ const AutoAddIcon = () => {
   const { t } = useTranslation();
   return (
     <Flex position="absolute" insetInlineEnd={0} top={0} p={1}>
-      <Badge variant="solid" bg="blue.500">
+      <Badge variant="solid" bg="invokeBlue.500">
         {t('common.auto')}
       </Badge>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 3feb43e9e1..610f92de0d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -218,7 +218,7 @@ const GalleryBoard = ({
                   w="full"
                   maxW="full"
                   borderBottomRadius="base"
-                  bg={isSelected ? 'blue.500' : 'base.600'}
+                  bg={isSelected ? 'invokeBlue.500' : 'base.600'}
                   color={isSelected ? 'base.50' : 'base.100'}
                   lineHeight="short"
                   fontSize="xs"
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index 00a7f66832..e0a84aa955 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -124,7 +124,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                   w="full"
                   maxW="full"
                   borderBottomRadius="base"
-                  bg={isSelected ? 'blue.500' : 'base.600'}
+                  bg={isSelected ? 'invokeBlue.500' : 'base.600'}
                   color={isSelected ? 'base.50' : 'base.100'}
                   lineHeight="short"
                   fontSize="xs"
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
index 0a1acea8b8..323c2b8039 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
@@ -143,8 +143,8 @@ const FoundModelsList = () => {
               fontWeight="semibold"
               p={2}
               borderRadius={4}
-              color="blue.100"
-              bg="blue.600"
+              color="invokeBlue.100"
+              bg="invokeBlue.600"
             >
               {t('common.installed')}
             </InvText>
@@ -184,7 +184,7 @@ const FoundModelsList = () => {
           <InvText fontWeight="semibold">
             {t('modelManager.modelsFound')}: {foundModels.length}
           </InvText>
-          <InvText fontWeight="semibold" color="blue.200">
+          <InvText fontWeight="semibold" color="invokeBlue.200">
             {t('common.notInstalled')}: {filteredModels.length}
           </InvText>
         </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index fe6a2ed709..b798fec9b4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -218,7 +218,7 @@ const AddNodePopover = () => {
         p={0}
         top={-1}
         shadow="dark-lg"
-        borderColor="blue.400"
+        borderColor="invokeBlue.400"
         borderWidth="2px"
         borderStyle="solid"
       >
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
index c2963dd530..344d36570b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
@@ -28,7 +28,7 @@ const MinimapPanel = () => {
           zoomable
           nodeBorderRadius={15}
           sx={minimapStyles}
-          nodeColor="var(--invokeai-colors-blue-600)"
+          nodeColor="var(--invokeai-colors-base-600)"
           maskColor="var(--invokeai-colors-blackAlpha-600)"
         />
       )}
diff --git a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
index bef9bb9213..fc6670ff46 100644
--- a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
@@ -22,7 +22,7 @@ const PruneQueueButton = ({ asIconButton }: Props) => {
       tooltip={t('queue.pruneTooltip', { item_count: finishedCount })}
       icon={<BsStars />}
       onClick={pruneQueue}
-      colorScheme="blue"
+      colorScheme="invokeBlue"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
index 0244534d78..165bf0496b 100644
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@@ -27,7 +27,7 @@ const ProgressBar = () => {
       }
       h={2}
       w="full"
-      colorScheme="blue"
+      colorScheme="invokeBlue"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index 372882ffa0..8bc9777613 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -40,7 +40,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
       <Flex w="full" alignItems="center" gap={2} h={12}>
         <Flex flexDir="column" flexGrow={1} h="full">
           <Flex alignItems="center" w="full" h="50%">
-            <Heading size="sm" variant={isOpen ? 'blue' : undefined}>
+            <Heading size="sm" variant={isOpen ? 'invokeBlue' : undefined}>
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
             <Spacer />
diff --git a/invokeai/frontend/web/src/theme/colors.ts b/invokeai/frontend/web/src/theme/colors.ts
index 7330e01500..e35af79a61 100644
--- a/invokeai/frontend/web/src/theme/colors.ts
+++ b/invokeai/frontend/web/src/theme/colors.ts
@@ -9,9 +9,9 @@ const WARNING = { H: 28, S: 42 };
 const OK = { H: 113, S: 42 };
 const ERROR = { H: 0, S: 42 };
 const INVOKE_YELLOW = { H: 66, S: 92 };
-const BLUE = { H: 200, S: 76 };
-const GREEN = { H: 110, S: 69 };
-const RED = { H: 16, S: 92 };
+const INVOKE_BLUE = { H: 200, S: 76 };
+const INVOKE_GREEN = { H: 110, S: 69 };
+const INVOKE_RED = { H: 16, S: 92 };
 
 export const getArbitraryBaseColor = (lightness: number) =>
   `hsl(${BASE.H} ${BASE.S}% ${lightness}%)`;
@@ -35,12 +35,12 @@ export const InvokeAIColors: InvokeAIThemeColors = {
     INVOKE_YELLOW.S,
     true
   ),
-  blue: generateColorPalette(BLUE.H, BLUE.S),
-  blueAlpha: generateColorPalette(BLUE.H, BLUE.S, true),
-  green: generateColorPalette(GREEN.H, GREEN.S),
-  greenAlpha: generateColorPalette(GREEN.H, GREEN.S, true),
-  red: generateColorPalette(RED.H, RED.S),
-  redAlpha: generateColorPalette(RED.H, RED.S, true),
+  invokeBlue: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S),
+  invokeBlueAlpha: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S, true),
+  invokeGreen: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S),
+  invokeGreenAlpha: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S, true),
+  invokeRed: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S),
+  invokeRedAlpha: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S, true),
 };
 
 export const layerStyleBody = {
diff --git a/invokeai/frontend/web/src/theme/types.ts b/invokeai/frontend/web/src/theme/types.ts
index 04c2f6b5da..87527812df 100644
--- a/invokeai/frontend/web/src/theme/types.ts
+++ b/invokeai/frontend/web/src/theme/types.ts
@@ -13,12 +13,12 @@ export type InvokeAIThemeColors = {
   errorAlpha: Partial<InvokeAIPaletteSteps>;
   invokeYellow: Partial<InvokeAIPaletteSteps>;
   invokeYellowAlpha: Partial<InvokeAIPaletteSteps>;
-  red: Partial<InvokeAIPaletteSteps>;
-  redAlpha: Partial<InvokeAIPaletteSteps>;
-  green: Partial<InvokeAIPaletteSteps>;
-  greenAlpha: Partial<InvokeAIPaletteSteps>;
-  blue: Partial<InvokeAIPaletteSteps>;
-  blueAlpha: Partial<InvokeAIPaletteSteps>;
+  invokeRed: Partial<InvokeAIPaletteSteps>;
+  invokeRedAlpha: Partial<InvokeAIPaletteSteps>;
+  invokeGreen: Partial<InvokeAIPaletteSteps>;
+  invokeGreenAlpha: Partial<InvokeAIPaletteSteps>;
+  invokeBlue: Partial<InvokeAIPaletteSteps>;
+  invokeBlueAlpha: Partial<InvokeAIPaletteSteps>;
 };
 
 export type InvokeAIPaletteSteps = {