diff --git a/packages/core/src/components/CircleProgress.test.js b/packages/core/src/components/CircleProgress.test.js
index 68e8f027c2..4975e00cb8 100644
--- a/packages/core/src/components/CircleProgress.test.js
+++ b/packages/core/src/components/CircleProgress.test.js
@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { COLORS } from '@backstage/theme';
 import { wrapInThemedTestApp } from '@backstage/test-utils';
 import CircleProgress, { getProgressColor } from './CircleProgress';
 
@@ -52,17 +51,22 @@ describe('<CircleProgress />', () => {
     getByText('10m');
   });
 
+  const ok = '#111';
+  const warning = '#222';
+  const error = '#333';
+  const palette = { status: { ok, warning, error } };
+
   it('colors the progress correctly', () => {
-    expect(getProgressColor()).toBe('#ddd');
-    expect(getProgressColor(10)).toBe(COLORS.STATUS.ERROR);
-    expect(getProgressColor(50)).toBe(COLORS.STATUS.WARNING);
-    expect(getProgressColor(90)).toBe(COLORS.STATUS.OK);
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10)).toBe(error);
+    expect(getProgressColor(palette, 50)).toBe(warning);
+    expect(getProgressColor(palette, 90)).toBe(ok);
   });
 
   it('colors the inverse progress correctly', () => {
-    expect(getProgressColor()).toBe('#ddd');
-    expect(getProgressColor(10, true)).toBe(COLORS.STATUS.OK);
-    expect(getProgressColor(50, true)).toBe(COLORS.STATUS.WARNING);
-    expect(getProgressColor(90, true)).toBe(COLORS.STATUS.ERROR);
+    expect(getProgressColor(palette)).toBe('#ddd');
+    expect(getProgressColor(palette, 10, true)).toBe(ok);
+    expect(getProgressColor(palette, 50, true)).toBe(warning);
+    expect(getProgressColor(palette, 90, true)).toBe(error);
   });
 });
diff --git a/packages/core/src/components/CircleProgress.tsx b/packages/core/src/components/CircleProgress.tsx
index d5cd191b3d..4d9c5c3340 100644
--- a/packages/core/src/components/CircleProgress.tsx
+++ b/packages/core/src/components/CircleProgress.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
-import { BackstageTheme, COLORS } from '@backstage/theme';
+import { makeStyles, useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import { Circle } from 'rc-progress';
 import React, { FC } from 'react';
 
@@ -55,7 +55,7 @@ const defaultProps = {
   max: 100,
 };
 
-export function getProgressColor(value, inverse, max) {
+export function getProgressColor(palette, value, inverse, max) {
   if (isNaN(value)) {
     return '#ddd';
   }
@@ -64,16 +64,17 @@ export function getProgressColor(value, inverse, max) {
   const actualValue = inverse ? actualMax - value : value;
 
   if (actualValue < actualMax / 3) {
-    return COLORS.STATUS.ERROR;
+    return palette.status.error;
   } else if (actualValue < actualMax * (2 / 3)) {
-    return COLORS.STATUS.WARNING;
+    return palette.status.warning;
   }
 
-  return COLORS.STATUS.OK;
+  return palette.status.ok;
 }
 
 const CircleProgress: FC<Props> = props => {
   const classes = useStyles(props);
+  const theme = useTheme();
   const { value, fractional, inverse, unit, max } = {
     ...defaultProps,
     ...props,
@@ -89,7 +90,7 @@ const CircleProgress: FC<Props> = props => {
         percent={asPercentage}
         strokeWidth={12}
         trailWidth={12}
-        strokeColor={getProgressColor(asActual, inverse, max)}
+        strokeColor={getProgressColor(theme.palette, asActual, inverse, max)}
         className={classes.circle}
       />
       <div className={classes.overlay}>
diff --git a/packages/theme/src/BackstageTheme.ts b/packages/theme/src/BackstageTheme.ts
index 202bdbc08c..f264e01861 100644
--- a/packages/theme/src/BackstageTheme.ts
+++ b/packages/theme/src/BackstageTheme.ts
@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
diff --git a/packages/theme/src/BackstageThemeDark.ts b/packages/theme/src/BackstageThemeDark.ts
index b8b89c8f0a..1f02b893ac 100644
--- a/packages/theme/src/BackstageThemeDark.ts
+++ b/packages/theme/src/BackstageThemeDark.ts
@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#282828',
   EFAULT_PAGE_THEME_COLOR: '#232323',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
diff --git a/packages/theme/src/BackstageThemeLight.ts b/packages/theme/src/BackstageThemeLight.ts
index 14bc942910..f238132f50 100644
--- a/packages/theme/src/BackstageThemeLight.ts
+++ b/packages/theme/src/BackstageThemeLight.ts
@@ -20,7 +20,7 @@ import { blue, yellow } from '@material-ui/core/colors';
 
 import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
-export const COLORS = {
+const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 136355dc37..8aa7e30ef5 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -15,4 +15,4 @@
  */
 export { default as BackstageThemeLight } from './BackstageThemeLight';
 export { default as BackstageThemeDark } from './BackstageThemeDark';
-export { default as BackstageTheme, COLORS } from './BackstageTheme';
+export { default as BackstageTheme } from './BackstageTheme';
diff --git a/plugins/lighthouse/src/components/CategoryTrendline/index.tsx b/plugins/lighthouse/src/components/CategoryTrendline/index.tsx
index 95622ed918..a46aff52e5 100644
--- a/plugins/lighthouse/src/components/CategoryTrendline/index.tsx
+++ b/plugins/lighthouse/src/components/CategoryTrendline/index.tsx
@@ -15,22 +15,28 @@
  */
 import React, { FC } from 'react';
 import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
-import { COLORS } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 
-function color(data: number[]): string | undefined {
+function color(
+  data: number[],
+  theme: typeof BackstageTheme,
+): string | undefined {
   const lastNum = data[data.length - 1];
   if (!lastNum) return undefined;
-  if (lastNum >= 0.9) return COLORS.STATUS.OK;
-  if (lastNum >= 0.5) return COLORS.STATUS.WARNING;
-  return COLORS.STATUS.ERROR;
+  if (lastNum >= 0.9) return theme.palette.status.ok;
+  if (lastNum >= 0.5) return theme.palette.status.warning;
+  return theme.palette.status.error;
 }
 
 const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
+  const theme = useTheme<typeof BackstageTheme>();
+
   if (!props.data) return null;
   return (
     <Sparklines width={120} height={30} min={0} max={1} {...props}>
       {props.title && <title>{props.title}</title>}
-      <SparklinesLine color={color(props.data)} />
+      <SparklinesLine color={color(props.data, theme)} />
     </Sparklines>
   );
 };