diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index eab0963cb28..7ae6fd6fac1 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -117,17 +117,20 @@ function getCellStyle(
   // Setup color variables
   let textColor: string | undefined = undefined;
   let bgColor: string | undefined = undefined;
+  let bgHoverColor: string | undefined = undefined;
 
   // Get colors
   const colors = getCellColors(tableStyles, cellOptions, displayValue);
   textColor = colors.textColor;
   bgColor = colors.bgColor;
+  bgHoverColor = colors.bgHoverColor;
 
   // If we have definied colors return those styles
   // Otherwise we return default styles
   return tableStyles.buildCellContainerStyle(
     textColor,
     bgColor,
+    bgHoverColor,
     !disableOverflowOnHover,
     isStringValue,
     shouldWrapText,
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index e4f7e20f0c6..9ef525ac005 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -14,6 +14,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
   const buildCellContainerStyle = (
     color?: string,
     background?: string,
+    backgroundHover?: string,
     overflowOnHover?: boolean,
     asCellText?: boolean,
     textShouldWrap?: boolean,
@@ -56,7 +57,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
         wordBreak: textShouldWrap ? 'break-word' : undefined,
         whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap',
         boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
-        background: rowStyled ? 'inherit' : background ?? theme.colors.background.primary,
+        background: rowStyled ? 'inherit' : backgroundHover ?? theme.colors.background.primary,
         zIndex: 1,
         '.cellActions': {
           color: '#FFF',
@@ -165,11 +166,11 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
         color: theme.colors.text.link,
       },
     }),
-    cellContainerText: buildCellContainerStyle(undefined, undefined, true, true),
-    cellContainerTextNoOverflow: buildCellContainerStyle(undefined, undefined, false, true),
+    cellContainerText: buildCellContainerStyle(undefined, undefined, undefined, true, true),
+    cellContainerTextNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, true),
 
-    cellContainer: buildCellContainerStyle(undefined, undefined, true, false),
-    cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, false, false),
+    cellContainer: buildCellContainerStyle(undefined, undefined, undefined, true, false),
+    cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, false),
     cellText: css({
       overflow: 'hidden',
       textOverflow: 'ellipsis',
diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts
index 160edbc2742..47801e3acdd 100644
--- a/packages/grafana-ui/src/components/Table/types.ts
+++ b/packages/grafana-ui/src/components/Table/types.ts
@@ -146,4 +146,5 @@ export type TableFieldOptions = Omit<schema.TableFieldOptions, 'cellOptions'> &
 export interface CellColors {
   textColor?: string;
   bgColor?: string;
+  bgHoverColor?: string;
 }
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index 5605e3c6175..d603c86a530 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@@ -609,6 +609,7 @@ export function getCellColors(
   // Setup color variables
   let textColor: string | undefined = undefined;
   let bgColor: string | undefined = undefined;
+  let bgHoverColor: string | undefined = undefined;
 
   if (cellOptions.type === TableCellDisplayMode.ColorText) {
     textColor = displayValue.color;
@@ -617,15 +618,18 @@ export function getCellColors(
 
     if (mode === TableCellBackgroundDisplayMode.Basic) {
       textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
-      bgColor = tinycolor(displayValue.color).setAlpha(0.9).toRgbString();
+      bgColor = tinycolor(displayValue.color).toRgbString();
+      bgHoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
     } else if (mode === TableCellBackgroundDisplayMode.Gradient) {
+      const hoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
       const bgColor2 = tinycolor(displayValue.color)
         .darken(10 * darkeningFactor)
         .spin(5);
       textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
       bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;
+      bgHoverColor = `linear-gradient(120deg, ${bgColor2.setAlpha(1).toRgbString()}, ${hoverColor})`;
     }
   }
 
-  return { textColor, bgColor };
+  return { textColor, bgColor, bgHoverColor };
 }