diff --git a/components/link/__tests__/__snapshots__/index.test.tsx.snap b/components/link/__tests__/__snapshots__/index.test.tsx.snap
index b9f6c0d..5054760 100644
--- a/components/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -120,7 +120,7 @@ exports[`Link should render correctly 1`] = `
           }
 
           .link:hover {
-            background-color: #0076ff1a;
+            background-color: rgba(0, 112, 243, 0.1);
             color: #3291ff;
           }
         </style></a></div>"
diff --git a/components/link/link.tsx b/components/link/link.tsx
index 887f377..4ce1ca1 100644
--- a/components/link/link.tsx
+++ b/components/link/link.tsx
@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import useWarning from '../utils/use-warning'
 import LinkIcon from './icon'
+import { addColorAlpha } from '../utils/color'
 
 export interface Props {
   href?: string
@@ -65,7 +66,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
           }
 
           .link:hover {
-            background-color: ${block ? '#0076ff1a' : 'unset'};
+            background-color: ${block ? addColorAlpha(theme.palette.link, 0.1) : 'unset'};
             color: ${hoverColor};
           }
         `}</style>