diff --git a/packages/cli/src/ui/themes/color-utils.test.ts b/packages/cli/src/ui/themes/color-utils.test.ts
index 5a7b1bd0fc..0c00e5abe2 100644
--- a/packages/cli/src/ui/themes/color-utils.test.ts
+++ b/packages/cli/src/ui/themes/color-utils.test.ts
@@ -299,6 +299,15 @@ describe('Color Utils', () => {
     it('should handle colors without # prefix', () => {
       expect(getLuminance('ffffff')).toBeCloseTo(255);
     });
+
+    it('should handle 3-digit hex codes', () => {
+      // #fff -> #ffffff -> 255
+      expect(getLuminance('#fff')).toBeCloseTo(255);
+      // #000 -> #000000 -> 0
+      expect(getLuminance('#000')).toBeCloseTo(0);
+      // #f00 -> #ff0000 -> 54.213
+      expect(getLuminance('#f00')).toBeCloseTo(54.213);
+    });
   });
 
   describe('parseX11Rgb', () => {
diff --git a/packages/cli/src/ui/themes/color-utils.ts b/packages/cli/src/ui/themes/color-utils.ts
index af7977970f..3d9f007f95 100644
--- a/packages/cli/src/ui/themes/color-utils.ts
+++ b/packages/cli/src/ui/themes/color-utils.ts
@@ -298,7 +298,10 @@ export function getThemeTypeFromBackgroundColor(
  * @returns Luminance value (0-255)
  */
 export function getLuminance(backgroundColor: string): number {
-  const hex = backgroundColor.replace(/^#/, '');
+  let hex = backgroundColor.replace(/^#/, '');
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
   const r = parseInt(hex.substring(0, 2), 16);
   const g = parseInt(hex.substring(2, 4), 16);
   const b = parseInt(hex.substring(4, 6), 16);