diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx
index 44363d12088d1..21ff0e22505bf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx
@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiHealth, EuiNotificationBadge, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiHealth,
+  EuiNotificationBadge,
+  EuiFlexItem,
+  useEuiTheme,
+} from '@elastic/eui';
 import React, { memo } from 'react';
 
 import {
@@ -31,9 +37,10 @@ export const AgentStatusBadges: React.FC<{
 
 const AgentStatusBadge: React.FC<{ status: SimplifiedAgentStatus; count: number }> = memo(
   ({ status, count }) => {
+    const { euiTheme } = useEuiTheme();
     return (
       <>
-        <EuiHealth color={getColorForAgentStatus(status)}>
+        <EuiHealth color={getColorForAgentStatus(status, euiTheme)}>
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>{getLabelForAgentStatus(status)}</EuiFlexItem>
             <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
index f4fc01204267b..429702e6b7dc6 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { EuiColorPaletteDisplay, EuiSpacer } from '@elastic/eui';
+import { EuiColorPaletteDisplay, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { AGENT_STATUSES, getColorForAgentStatus } from '../../services/agent_status';
@@ -25,16 +25,17 @@ const StyledEuiColorPaletteDisplay = styled(EuiColorPaletteDisplay)`
 export const AgentStatusBar: React.FC<{
   agentStatus: { [k in SimplifiedAgentStatus]: number };
 }> = ({ agentStatus }) => {
+  const { euiTheme } = useEuiTheme();
   const palette = useMemo(() => {
     return AGENT_STATUSES.reduce((acc, status) => {
       const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
       acc.push({
         stop: previousStop + (agentStatus[status] || 0),
-        color: getColorForAgentStatus(status),
+        color: getColorForAgentStatus(status, euiTheme),
       });
       return acc;
     }, [] as Array<{ stop: number; color: string }>);
-  }, [agentStatus]);
+  }, [agentStatus, euiTheme]);
 
   const hasNoAgent = palette[palette.length - 1].stop === 0;
 
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
index b69da08105759..6b12331d7034c 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
@@ -5,24 +5,11 @@
  * 2.0.
  */
 
-import { euiPaletteColorBlindBehindText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars } from '@kbn/ui-theme';
 
-import type { SimplifiedAgentStatus } from '../../../types';
+import type { EuiThemeComputed } from '@elastic/eui-theme-common';
 
-const visColors = euiPaletteColorBlindBehindText();
-const colorToHexMap = {
-  // using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started
-  default: euiLightVars.euiColorLightShade,
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9],
-  inactive: euiLightVars.euiColorDarkShade,
-  lightest: euiLightVars.euiColorDisabled,
-};
+import type { SimplifiedAgentStatus } from '../../../types';
 
 export const AGENT_STATUSES: SimplifiedAgentStatus[] = [
   'healthy',
@@ -33,20 +20,23 @@ export const AGENT_STATUSES: SimplifiedAgentStatus[] = [
   'unenrolled',
 ];
 
-export function getColorForAgentStatus(agentStatus: SimplifiedAgentStatus): string {
+export function getColorForAgentStatus(
+  agentStatus: SimplifiedAgentStatus,
+  euiTheme: EuiThemeComputed<{}>
+): string {
   switch (agentStatus) {
     case 'healthy':
-      return colorToHexMap.success;
+      return euiTheme.colors.backgroundFilledSuccess;
     case 'offline':
-      return colorToHexMap.default;
+      return euiTheme.colors.lightShade;
     case 'inactive':
-      return colorToHexMap.inactive;
+      return euiTheme.colors.darkShade;
     case 'unhealthy':
-      return colorToHexMap.warning;
+      return euiTheme.colors.backgroundFilledWarning;
     case 'updating':
-      return colorToHexMap.primary;
+      return euiTheme.colors.backgroundFilledPrimary;
     case 'unenrolled':
-      return colorToHexMap.lightest;
+      return euiTheme.colors.backgroundBaseDisabled;
     default:
       throw new Error(`Unsupported Agent status ${agentStatus}`);
   }