diff --git a/lib/catalog/element.test.ts b/lib/catalog/element.test.ts
index fe01fdb..4475c1d 100644
--- a/lib/catalog/element.test.ts
+++ b/lib/catalog/element.test.ts
@@ -3,19 +3,19 @@ import { describe, expect, it } from "vitest";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 
 describe("catalog element backgrounds", () => {
-  it("maps every character element to its 80% opacity color", () => {
-    expect(elementBackgroundColor("Pyro")).toBe("#EF7938CC");
-    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1CC");
-    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8CC");
-    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1CC");
-    expect(elementBackgroundColor("Dendro")).toBe("#A5C83BCC");
-    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3CC");
-    expect(elementBackgroundColor("Geo")).toBe("#FAB632CC");
+  it("maps every character element to its 20% opacity color", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#12000033");
+    expect(elementBackgroundColor("Hydro")).toBe("#00051233");
+    expect(elementBackgroundColor("Anemo")).toBe("#06141533");
+    expect(elementBackgroundColor("Electro")).toBe("#0D000F33");
+    expect(elementBackgroundColor("Dendro")).toBe("#000F0433");
+    expect(elementBackgroundColor("Cryo")).toBe("#03202133");
+    expect(elementBackgroundColor("Geo")).toBe("#0F0D0033");
   });
 
   it("uses the neutral character background when the element is unavailable", () => {
-    expect(elementBackgroundColor(null)).toBe("#17383dcc");
-    expect(elementBackgroundColor(undefined)).toBe("#17383dcc");
-    expect(elementBackgroundColor("Unknown")).toBe("#17383dcc");
+    expect(elementBackgroundColor(null)).toBe("#17383d33");
+    expect(elementBackgroundColor(undefined)).toBe("#17383d33");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383d33");
   });
 });
diff --git a/lib/catalog/element.ts b/lib/catalog/element.ts
index d5c6c55..e35057f 100644
--- a/lib/catalog/element.ts
+++ b/lib/catalog/element.ts
@@ -1,13 +1,13 @@
 const elementBackgroundColors: Record<string, string> = {
-  Pyro: "#EF7938CC",
-  Hydro: "#4CC2F1CC",
-  Anemo: "#74C2A8CC",
-  Electro: "#AF8EC1CC",
-  Dendro: "#A5C83BCC",
-  Cryo: "#9FD6E3CC",
-  Geo: "#FAB632CC",
+  Pyro: "#12000033",
+  Hydro: "#00051233",
+  Anemo: "#06141533",
+  Electro: "#0D000F33",
+  Dendro: "#000F0433",
+  Cryo: "#03202133",
+  Geo: "#0F0D0033",
 };
 
 export function elementBackgroundColor(element: string | null | undefined): string {
-  return (element && elementBackgroundColors[element]) || "#17383dcc";
+  return (element && elementBackgroundColors[element]) || "#17383d33";
 }