diff --git a/common/changes/users-jechayav-4_3_2017-04-05-17-55.json b/common/changes/users-jechayav-4_3_2017-04-05-17-55.json
new file mode 100644
index 00000000000000..43fe9b9caeb2b6
--- /dev/null
+++ b/common/changes/users-jechayav-4_3_2017-04-05-17-55.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Callout: Allow Callout to specify background color.",
+      "type": "minor"
+    }
+  ],
+  "email": "jechayav@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
index 25f52fff714a76..0d9c7b1f4ae9f2 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
@@ -43,6 +43,12 @@ export interface ICalloutProps extends React.Props<Callout | CalloutContent> {
    */
   beakWidth?: number;
 
+  /**
+   * The background color of the Callout in hex format ie. #ffffff.
+   * @default $ms-color-white
+   */
+  backgroundColor?: string;
+
   /**
    * The bounding rectangle for which  the contextual menu can appear in.
    */
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index 743d87bd2a442b..bbeef4834b6c91 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -98,7 +98,8 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
       isBeakVisible,
       beakStyle,
       children,
-      beakWidth } = this.props;
+      beakWidth,
+      backgroundColor } = this.props;
     let { positions } = this.state;
     let beakStyleWidth = beakWidth;
 
@@ -112,7 +113,8 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
       top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top,
       left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left,
       height: beakStyleWidth,
-      width: beakStyleWidth
+      width: beakStyleWidth,
+      backgroundColor: backgroundColor,
     };
 
     let directionalClassName = positions && positions.directionalClassName ? `ms-u-${positions.directionalClassName}` : '';
@@ -145,7 +147,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
             className={ css('ms-Callout-main', styles.main) }
             onDismiss={ this.dismiss }
             shouldRestoreFocus={ true }
-            style={ { maxHeight: contentMaxHeight } }>
+            style={ { maxHeight: contentMaxHeight, backgroundColor: backgroundColor } }>
             { children }
           </Popup>
         </div>