diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index ae28631c..73ec6e5f 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -23,6 +23,7 @@ import { Flex } from "@components/Flex";
 import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
 import { debounce } from "@shared/debounce";
 import { openImageModal } from "@utils/discord";
+import { Logger } from "@utils/Logger";
 import { classes, copyWithToast } from "@utils/misc";
 import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
 
@@ -340,6 +341,25 @@ function Info({ track }: { track: Track; }) {
     );
 }
 
+async function getDominantColor(imageUrl: any) {
+    if (imageUrl) {
+        const ctx = await document.createElement("canvas").getContext("2d", { willReadFrequently: true })!;
+        const src = imageUrl;
+        imageUrl = new Image();
+        imageUrl.crossOrigin = "";
+        imageUrl.src = src;
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(imageUrl, 0, 0, 1, 1);
+        return ctx.getImageData(0, 0, 1, 1).data.slice(0, 3);
+    } else {
+        return [0, 0, 0];
+    }
+}
+
+function rgbToHex(r: number, g: number, b: number) {
+    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
+}
+
 export function Player() {
     const track = useStateFromStores(
         [SpotifyStore],
@@ -371,8 +391,15 @@ export function Player() {
     if (!track || !device?.is_active || shouldHide)
         return null;
 
-    const exportTrackImageStyle = {
+
+    const rgbColors = getDominantColor(track?.album?.image?.url);
+    const dominantColor = rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);
+    new Logger("SpotifyControls", "#1db954").log(dominantColor);
+    // console.log(typeof rgbColors, rgbColors, rgbColors[0], rgbColors[1], rgbColors[2]);
+
+    const exportTrackVariables = {
         "--vc-spotify-track-image": `url(${track?.album?.image?.url || ""})`,
+        "--vc-spotify-dominant-color": `${(dominantColor !== "#000000") ? dominantColor : "var(--brand-experiment)"}`
     } as React.CSSProperties;
 
     return (
@@ -382,7 +409,7 @@ export function Player() {
                 <p >Check the console for errors</p>
             </div>
         )}>
-            <div id={cl("player")} style={exportTrackImageStyle}>
+            <div id={cl("player")} style={exportTrackVariables}>
                 <Info track={track} />
                 <SeekBar />
                 <Controls />