diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.jsx
index beda720f6a..1fec162adb 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.jsx
@@ -30,24 +30,24 @@ const HostStatusBar = ({ i18n, counts = {} }) => {
   const noData = Object.keys(counts).length === 0;
   const hostStatus = {
     ok: {
-      color: '#92D400',
+      color: '#4CB140',
       label: i18n._(t`OK`),
     },
-    dark: {
-      color: '#470000',
-      label: i18n._(t`Unreachable`),
-    },
-    failures: {
-      color: '#C9190B',
-      label: i18n._(t`Failed`),
+    skipped: {
+      color: '#73BCF7',
+      label: i18n._(t`Skipped`),
     },
     changed: {
       color: '#F0AB00',
       label: i18n._(t`Changed`),
     },
-    skipped: {
-      color: '#73BCF7',
-      label: i18n._(t`Skipped`),
+    failures: {
+      color: '#C9190B',
+      label: i18n._(t`Failed`),
+    },
+    dark: {
+      color: '#8B8D8F',
+      label: i18n._(t`Unreachable`),
     },
   };
 
diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.test.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.test.jsx
index d7629c6041..c1fae8c6a0 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/HostStatusBar.test.jsx
@@ -29,10 +29,10 @@ describe('<HostStatusBar />', () => {
     const tooltips = wrapper.find('TooltipContent');
     const expectedContent = [
       { label: 'OK', count: 5 },
-      { label: 'Unreachable', count: 0 },
-      { label: 'Failed', count: 0 },
-      { label: 'Changed', count: 0 },
       { label: 'Skipped', count: 1 },
+      { label: 'Changed', count: 0 },
+      { label: 'Failed', count: 0 },
+      { label: 'Unreachable', count: 0 },
     ];
 
     tooltips.forEach((tooltip, index) => {