diff --git a/package-lock.json b/package-lock.json
index edee489..2baed99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
     "@types/debounce-promise": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@types/debounce-promise/-/debounce-promise-3.1.1.tgz",
@@ -78,17 +83,6 @@
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
       "integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
     },
-    "ajv": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-      "requires": {
-        "co": "^4.6.0",
-        "fast-deep-equal": "^1.0.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.3.0"
-      }
-    },
     "ajv-keywords": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
@@ -3302,6 +3296,17 @@
         "text-table": "~0.2.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
@@ -3330,6 +3335,11 @@
           "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
           "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
         },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
         "js-yaml": {
           "version": "3.13.1",
           "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
@@ -3339,6 +3349,11 @@
             "esprima": "^4.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3774,11 +3789,6 @@
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
-    "fast-deep-equal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
-    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -5967,11 +5977,6 @@
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
       "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
-    "json-schema-traverse": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
-    },
     "json-stable-stringify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
@@ -6311,6 +6316,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.22",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz",
@@ -8537,6 +8547,19 @@
       "resolved": "https://registry.npmjs.org/react-async-hook/-/react-async-hook-3.6.1.tgz",
       "integrity": "sha512-YWBB2feVQF79t5u2raMPHlZ8975Jds+guCvkWVC4kRLDlSCouLsYpQm4DGSqPeHvoHYVVcDfqNayLZAXQmnxnw=="
     },
+    "react-color": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",
+      "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-dev-utils": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.3.tgz",
@@ -8643,6 +8666,14 @@
         "whatwg-fetch": "2.0.3"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -9373,6 +9404,29 @@
       "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
       "requires": {
         "ajv": "^5.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        }
       }
     },
     "select-hose": {
@@ -10189,6 +10243,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10762,6 +10821,17 @@
         "yargs": "^8.0.2"
       },
       "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
         "ajv-keywords": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
@@ -10772,11 +10842,21 @@
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
           "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
         },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
           "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
         },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        },
         "load-json-file": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
diff --git a/package.json b/package.json
index 13e5fc7..6f7702f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "ramda": "^0.27.0",
     "react": "^16.2.0",
     "react-async-hook": "^3.6.1",
+    "react-color": "^2.18.1",
     "react-dom": "^16.2.0",
     "react-icons": "^3.10.0",
     "react-scripts": "1.1.1",
diff --git a/src/text-editor/plugins/color-picker/ColorPicker.css b/src/text-editor/plugins/color-picker/ColorPicker.css
new file mode 100644
index 0000000..ba9939d
--- /dev/null
+++ b/src/text-editor/plugins/color-picker/ColorPicker.css
@@ -0,0 +1,22 @@
+.color-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.color-picker__button {
+  background-color: transparent;
+  border: none;
+  padding: 5px 5px;
+}
+
+.color-picker__button:hover {
+  background-color: lightgrey;
+}
+
+.color-picker__content {
+  position: absolute;
+  top: 35px;
+  left: -8px;
+  z-index: 2;
+}
+
diff --git a/src/text-editor/plugins/color-picker/ColorPicker.js b/src/text-editor/plugins/color-picker/ColorPicker.js
new file mode 100644
index 0000000..f0416c7
--- /dev/null
+++ b/src/text-editor/plugins/color-picker/ColorPicker.js
@@ -0,0 +1,44 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { GithubPicker } from 'react-color';
+import { FaPalette } from 'react-icons/fa';
+import './ColorPicker.css';
+import { EditorSelectionContext } from '../../TextEditor';
+import useConstant from 'use-constant';
+
+function ColorPicker() {
+  const [opened, setOpened] = useState(false);
+  const [color, setColor] = useState(null);
+  const editorSelectionContext = useContext(EditorSelectionContext);
+
+  const selectionChangeListener = useConstant(() => () => setColor(document.queryCommandValue('foreColor')));
+
+  useEffect(
+    () => editorSelectionContext.registerSelectionChangeListener(selectionChangeListener),
+    []
+  );
+
+  const onColorSelected = (color) => {
+    document.execCommand('styleWithCSS', true);
+    document.execCommand('foreColor', true, color.hex);
+    document.execCommand('styleWithCSS', false);
+    setOpened(false);
+  }
+  return (
+    <div className="color-picker">
+      <button
+        type="button"
+        className="color-picker__button"
+        onClick={() => setOpened(!opened)}
+      >
+        <FaPalette color={color}/>
+      </button>
+      {opened && (
+        <div className="color-picker__content" onMouseDown={e => e.preventDefault()}>
+          <GithubPicker onChangeComplete={onColorSelected}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ColorPicker;
diff --git a/src/text-editor/plugins/color-picker/index.js b/src/text-editor/plugins/color-picker/index.js
new file mode 100644
index 0000000..213f14e
--- /dev/null
+++ b/src/text-editor/plugins/color-picker/index.js
@@ -0,0 +1,5 @@
+import ColorPicker from './ColorPicker';
+
+export const COLOR_PICKER_PLUGIN_CONFIG = [{
+  component: ColorPicker
+}];
diff --git a/src/text-editor/plugins/index.js b/src/text-editor/plugins/index.js
index b9b1769..c369094 100644
--- a/src/text-editor/plugins/index.js
+++ b/src/text-editor/plugins/index.js
@@ -1,9 +1,11 @@
 import { SIMPLE_ACTION_PLUGIN_CONFIG } from './simple-action';
 import { SYNONYMS_ACTION_PLUGIN_CONFIG } from './synonyms';
+import { COLOR_PICKER_PLUGIN_CONFIG } from './color-picker';
 
 const PLUGINS = [
   ...SIMPLE_ACTION_PLUGIN_CONFIG,
-  ...SYNONYMS_ACTION_PLUGIN_CONFIG
+  ...SYNONYMS_ACTION_PLUGIN_CONFIG,
+  ...COLOR_PICKER_PLUGIN_CONFIG
 ];
 
 export default PLUGINS;