diff --git a/src/common/color/convert-color.ts b/src/common/color/convert-color.ts
index 2253b0fe24..f325aef1fd 100644
--- a/src/common/color/convert-color.ts
+++ b/src/common/color/convert-color.ts
@@ -132,6 +132,15 @@ export const hs2rgb = (hs: [number, number]): [number, number, number] =>
 
 export function theme2hex(themeColor: string): string {
   if (themeColor.startsWith("#")) {
+    if (themeColor.length === 4 || themeColor.length === 5) {
+      const c = themeColor;
+      // Convert short-form hex (#abc) to 6 digit (#aabbcc). Ignore alpha channel.
+      return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
+    }
+    if (themeColor.length === 9) {
+      // Ignore alpha channel.
+      return themeColor.substring(0, 7);
+    }
     return themeColor;
   }
 
diff --git a/test/common/color/convert-color.test.ts b/test/common/color/convert-color.test.ts
index f3cc873109..57907f764b 100644
--- a/test/common/color/convert-color.test.ts
+++ b/test/common/color/convert-color.test.ts
@@ -46,10 +46,13 @@ describe("Color Conversion Tests", () => {
     expect(hs2rgb(hs)).toEqual([255, 0, 0]);
   });
 
-  it("should convert theme color to hex", () => {
+  it("should convert theme color to hex (ignoring alpha)", () => {
     expect(theme2hex("red")).toBe("#ff0000");
     expect(theme2hex("#ff0000")).toBe("#ff0000");
     expect(theme2hex("unicorn")).toBe("unicorn");
+    expect(theme2hex("#abc")).toBe("#aabbcc");
+    expect(theme2hex("#abcd")).toBe("#aabbcc");
+    expect(theme2hex("#aabbccdd")).toBe("#aabbcc");
   });
 
   it("should convert rgb theme color to hex", () => {