diff --git a/src/renderer/hooks/index.ts b/src/renderer/hooks/index.ts
index 131e3819..d4370c64 100644
--- a/src/renderer/hooks/index.ts
+++ b/src/renderer/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './use-theme';
 export * from './use-is-mounted';
 export * from './use-should-pad-titlebar';
 export * from './use-container-query';
+export * from './use-fast-average-color';
diff --git a/src/renderer/hooks/use-fast-average-color.tsx b/src/renderer/hooks/use-fast-average-color.tsx
new file mode 100644
index 00000000..ecbd121f
--- /dev/null
+++ b/src/renderer/hooks/use-fast-average-color.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { FastAverageColor } from 'fast-average-color';
+
+export const useFastAverageColor = (
+  src?: string | null,
+  aglorithm?: 'dominant' | 'simple' | 'sqrt',
+) => {
+  const [color, setColor] = useState('rgba(0, 0, 0, 0)');
+
+  useEffect(() => {
+    const fac = new FastAverageColor();
+
+    if (src) {
+      fac
+        .getColorAsync(src, {
+          algorithm: aglorithm || 'dominant',
+          ignoredColor: [
+            [255, 255, 255, 255], // White
+            [0, 0, 0, 255], // Black
+          ],
+          mode: 'precision',
+        })
+        .then((color) => {
+          return setColor(color.rgb);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+
+    return () => {
+      fac.destroy();
+    };
+  }, [aglorithm, src]);
+
+  return color;
+};