diff --git a/.travis.yml b/.travis.yml
index f7a64e2..7a88d81 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -13,7 +13,6 @@ node_js:
   - '4'
 
 before_install:
-  - npm install -g npm
   - npm --version
 
 after_success:
diff --git a/README.md b/README.md
index 1c57551..03c93bd 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,18 @@ console.log(this.toggleSwitch.checked);
       <td>'lg'</td>
       <td></td>
     </tr>
+    <tr>
+      <td>onColor</td>
+      <td>string / hex</td>
+      <td>'#ff0000'</td>
+      <td>Color when state is ON</td>
+    </tr>
+    <tr>
+      <td>offColor</td>
+      <td>string / hex</td>
+      <td>'#009000'</td>
+      <td>Color when state is OFF</td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/examples/index.jsx b/examples/index.jsx
index 7960367..98d8f64 100644
--- a/examples/index.jsx
+++ b/examples/index.jsx
@@ -102,6 +102,59 @@ class App extends React.Component {
                         </div>
                     </div>
                 </div>
+                <div className="row">
+                    <div className="col-sm-6">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                <div className="panel-title">
+                                    Colored
+                                </div>
+                            </div>
+                            <div className="panel-body">
+                                <div className="container-fluid">
+                                    <div className="row">
+                                        <div className="col-sm-6" style={{ minHeight: 40, padding: '8px 0' }}>
+                                            <ToggleSwitch
+                                                onColor="green"
+                                                checked
+                                                size="lg"
+                                            />
+                                            ON Green
+                                        </div>
+                                        <div className="col-sm-6" style={{ minHeight: 40, padding: '8px 0' }}>
+                                            <ToggleSwitch
+                                                onColor="green"
+                                                disabled
+                                                checked
+                                                size="lg"
+                                            />
+                                            ON Green (Disabled)
+                                        </div>
+                                    </div>
+                                    <div className="row">
+                                        <div className="col-sm-6" style={{ minHeight: 40, padding: '8px 0' }}>
+                                            <ToggleSwitch
+                                                offColor="red"
+                                                checked={false}
+                                                size="lg"
+                                            />
+                                            OFF Red
+                                        </div>
+                                        <div className="col-sm-6" style={{ minHeight: 40, padding: '8px 0' }}>
+                                            <ToggleSwitch
+                                                onColor="green"
+                                                offColor="red"
+                                                checked
+                                                size="lg"
+                                            />
+                                            ON / OFF (Red / Green)
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         );
     }
diff --git a/package.json b/package.json
index 21ad89e..b92c760 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-toggle-switch",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Trend Micro Components: React Toggle Switch",
   "main": "lib/index.js",
   "files": [
diff --git a/src/ToggleSwitch.jsx b/src/ToggleSwitch.jsx
index 1222483..5e9d842 100644
--- a/src/ToggleSwitch.jsx
+++ b/src/ToggleSwitch.jsx
@@ -55,12 +55,16 @@ class ToggleSwitch extends PureComponent {
             className,
             disabled,
             size,
+            onColor,
+            offColor,
             ...props
         } = this.props;
 
         delete props.checked;
         delete props.onChange;
 
+        const color = this.state.checked ? onColor : offColor;
+
         return (
             <Anchor
                 {...props}
@@ -79,6 +83,7 @@ class ToggleSwitch extends PureComponent {
                         styles.round,
                         { [styles.disabled]: disabled }
                     )}
+                    style={{ backgroundColor: color, borderColor: color }}
                 />
             </Anchor>
         );