diff --git a/src/Switch/Switch-styled.js b/src/Switch/Switch-styled.js
index b3825f0e..b232fa65 100644
--- a/src/Switch/Switch-styled.js
+++ b/src/Switch/Switch-styled.js
@@ -26,7 +26,7 @@ import { StyledFormControlLabel } from '../Form/Form-styled';
 // Icons
 
 // Third party libraries
-import { transparentize } from 'polished';
+import { transparentize, lighten, darken } from 'polished';
 
 const switchProps = {
   switchWidth: '36px',
@@ -257,6 +257,49 @@ const StyledSwitchTrack = styled.span`
       }
     `};
 
+  ${props =>
+    props.color &&
+    css`
+      input:hover + &:after {
+        border-color: ${lighten(0.2, props.color)};
+      }
+
+      input:active + &:after {
+        border-color: ${lighten(0.2, props.color)};
+      }
+
+      input:checked:active + & {
+        box-shadow: 0 0 4px 2px
+          ${transparentize(0.6, lighten(0.2, props.color))};
+
+        &:after {
+          border-color: ${lighten(0.2, props.color)};
+        }
+      }
+
+      input:checked + & {
+        background-color: ${props.color};
+        border-color: ${darken(0.2, props.color)};
+
+        &:after {
+          border-color: ${darken(0.2, props.color)};
+        }
+      }
+
+      input:focus + &:after {
+        border-color: ${lighten(0.2, props.color)};
+      }
+
+      input:checked:focus + & {
+        box-shadow: 0 0 4px 2px
+          ${transparentize(0.6, lighten(0.2, props.color))};
+
+        &:after {
+          border-color: ${lighten(0.2, props.color)};
+        }
+      }
+    `};
+
   // alignment fixes for edge
   @supports (-ms-ime-align: auto) {
     & {
diff --git a/src/Switch/Switch.js b/src/Switch/Switch.js
index a9e016a7..31a1534f 100644
--- a/src/Switch/Switch.js
+++ b/src/Switch/Switch.js
@@ -24,6 +24,7 @@ const Switch = ({
   labelPosition,
   fullWidth,
   destructive,
+  color,
   checked,
   field,
   form,
@@ -98,7 +99,7 @@ const Switch = ({
         {...other}
         type="checkbox"
       />
-      <StyledSwitchTrack destructive={destructive} />
+      <StyledSwitchTrack destructive={destructive} color={color} />
       {labelPosition === 'after' ? getSwitchLabel(children) : null}
     </StyledSwitch>
   );
@@ -115,6 +116,8 @@ Switch.propTypes = {
   onChange: PropTypes.func,
   /** Should use a red highlight color. */
   destructive: PropTypes.bool,
+  /** The color of the Switch. 'green' | 'rgb(0, 255, 255)' | '#fefefe'  */
+  color: PropTypes.string,
   /** Position of the label text in relation to the input. */
   labelPosition: PropTypes.oneOf(['before', 'after']),
   /** Switch and label will take up the full width of the container */
diff --git a/src/Switch/doc/Switch.mdx b/src/Switch/doc/Switch.mdx
index 61fb4640..b622423f 100644
--- a/src/Switch/doc/Switch.mdx
+++ b/src/Switch/doc/Switch.mdx
@@ -18,7 +18,7 @@ A skin on a checkbox.
 #### Import Syntax
 
 ```js
-import Switch from 'calcite-react/Switch'
+import Switch from 'calcite-react/Switch';
 ```
 
 ## Basic Usage
@@ -40,6 +40,31 @@ import Switch from 'calcite-react/Switch'
   </GuideExample>
 </Playground>
 
+## Alternate Colors
+
+<Playground>
+  <GuideExample label="color">
+    <Switch checked color="green">
+      green
+    </Switch>
+    <Switch checked color="#64DAA1">
+      #64DAA1
+    </Switch>
+    <Switch checked color="#060080">
+      #060080
+    </Switch>
+    <Switch checked color="rgb(127,255,0)">
+      rgb(127,255,0)
+    </Switch>
+    <Switch checked color="rgb(32,178,170)">
+      rgb(32,178,170)
+    </Switch>
+    <Switch checked color="rgb(165,42,42)">
+      rgb(165,42,42)
+    </Switch>
+  </GuideExample>
+</Playground>
+
 ## fullWidth
 
 <Playground>
@@ -47,7 +72,9 @@ import Switch from 'calcite-react/Switch'
     <Switch fullWidth>Enable Two-Factor Authentication</Switch>
   </GuideExample>
   <GuideExample>
-    <Switch fullWidth labelPosition="before">Enable Two-Factor Authentication</Switch>
+    <Switch fullWidth labelPosition="before">
+      Enable Two-Factor Authentication
+    </Switch>
   </GuideExample>
 </Playground>