diff --git a/packages/theme/src/theme-engine/types.ts b/packages/theme/src/theme-engine/types.ts
index ad2db18cf..a802450e9 100644
--- a/packages/theme/src/theme-engine/types.ts
+++ b/packages/theme/src/theme-engine/types.ts
@@ -186,8 +186,8 @@ export type Colors = {
    */
   paragraph: string;
   /**
-   * Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)
-   * @pattern ^#(?:[0-9a-fA-F]{3}){1,2}$
+   * Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)
+   * @pattern ^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$
    */
   background: string;
   /**
@@ -310,7 +310,12 @@ export const COLORS: readonly (keyof Colors)[] = [
   "backdrop"
 ];
 
-export const ALPHA_COLORS: readonly (keyof Colors)[] = ["hover", "backdrop"];
+export const ALPHA_COLORS: readonly (keyof Colors)[] = [
+  "hover",
+  "backdrop",
+  "background",
+  "placeholder"
+];
 
 export const Variants: readonly (keyof Variants)[] = [
   "primary",
diff --git a/packages/theme/v1.schema.json b/packages/theme/v1.schema.json
index ba3230f22..5b43dfc56 100644
--- a/packages/theme/v1.schema.json
+++ b/packages/theme/v1.schema.json
@@ -218,8 +218,8 @@
         },
         "background": {
           "type": "string",
-          "description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
-          "pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
+          "description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
+          "pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
         },
         "border": {
           "type": "string",
@@ -328,8 +328,8 @@
         },
         "background": {
           "type": "string",
-          "description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
-          "pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
+          "description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
+          "pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
         },
         "border": {
           "type": "string",