Change Hubspot Dashboard colors in 2 seconds

I’m a passionated Revenue Ops and hate to loose time so I automate things for a living. Since I had the chance to be a consultant before that I also love beautiful slides.

If you want to change your chart colors in a few seconds follow these steps before taking a screenshot:

1. Go to your dashboard and right click anywhere on that page.
2. Select the last menu item “inspect”.
3. Inside this newly opened developer panel, search for the tab “console”
4. Adapt and copy paste the following code in there and hit “enter”

As you can see this will turn every color to red. Just change the target color with a color picker !

var colors = [
{
name: “orange”,
initial: “#fea58e”,
target: “#ff0000”
},
{
name: “cyan”,
initial: “#51d3d9”,
target: “#ff0000”
},
{
name: “lightgreen”,
initial: “#a4d398”,
target: “#ff0000”
},
{
name: “yellow”,
initial: “#f5c78e”,
target: “#ff0000”
},
{
name: “green”,
initial: “#6b9a5b”,
target: “#ff0000”
},
{
name: “pink”,
initial: “#b05c7d”,
target: “#ff0000”
},
{
name: “black”,
initial: “#000000”,
target: “#ff0000”
},
{
name: “darkorange”,
initial: “#c3705c”,
target: “#ff0000”
},
{
name: “teal”,
initial: “#009ca2”,
target: “#ff0000”
},
{
name: “purple”,
initial: “#bda9ea”,
target: “#ff0000”
},
{
name: “lightblue”,
initial: “#81c1fd”,
target: “#ff0000”
},
{
name: “lightpink”,
initial: “#ea90b1”,
target: “#ff0000”
}


]

function addStyle(c) {
var style = document.createElement(‘style’);
style.textContent = `
[fill=”${c.initial}”] {
fill: ${c.target} !important;
}
`;
document.head.append(style);
}

colors.forEach(c => addStyle(c))