diff --git a/package.json b/package.json
index e4f0543463..958b782ac3 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,6 @@
     "slate-react": "^0.18.10",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
-    "vanilla-picker": "^2.10.0",
     "velocity-animate": "^1.5.2",
     "whatwg-fetch": "^1.1.1",
     "zxcvbn": "^4.4.2"
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 5ac4e84e54..6d54df0b31 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -39,8 +39,6 @@ import IdentityAuthClient from "../../../../../IdentityAuthClient";
 import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
 
-import Picker from 'vanilla-picker';
-
 export default class GeneralUserSettingsTab extends React.Component {
     static propTypes = {
         closeSettingsFn: PropTypes.func.isRequired,
@@ -399,34 +397,34 @@ export default class GeneralUserSettingsTab extends React.Component {
 }
 
 class CustomThemeColorField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {color: ""};
+    }
+
     componentDidMount() {
         setTimeout(() => {
-            this.value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`);
-            this._buttonRef.style.background = this.value;
+            const value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`).trim();
+            this.setState({color: value});
         }, 3000);
     }
 
-    _onClick = (event) => {
-        const button = event.target;
-        if (button.tagName !== "BUTTON") {
-            console.log("target is", button);
-            return;
-        }
-        console.log("clicked color " + this.props.name);
-        const picker = new Picker({parent: button, alpha: false, color: this.value});
-        picker.onChange = color => this._onColorChanged(color);
-    }
-
-    _onColorChanged(color) {
-        const hex = color.hex.substr(0, 7);
+    _onColorChanged = (event) => {
+        const hex = event.target.value;
         document.body.style.setProperty(`--${this.props.name}`, hex);
         document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00");
         document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F");
-        this._buttonRef.style.background = hex;
-        this.value = hex;
+        this.setState({color: hex});
     }
 
     render() {
-        return (<button ref={ref => this._buttonRef = ref} onClick={this._onClick}>{this.props.label}</button>);
+        const id = `color-picker-${this.props.name}`;
+        return (<div>
+            <input type="color" value={this.state.color}
+                onChange={this._onColorChanged}
+                onInput={this._onColorChanged}
+                id={id} />
+            <label htmlFor={id}>{this.props.label}</label>
+        </div>);
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 78b32ad03b..ac1adf1d20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -211,11 +211,6 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
   integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
 
-"@sphinxxxx/color-conversion@^2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
-  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
-
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -8103,13 +8098,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vanilla-picker@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.10.0.tgz#36676631b9346daa6b93aa4f80c541f113e38c50"
-  integrity sha512-s1K+oa/JrT5blJFbLLw1O+PMncJM1qCF8DVXKNPaTVxXgTteSCjSr4rvf8TpcqEcQQ+S4RV/nvPBZanrlJE82w==
-  dependencies:
-    "@sphinxxxx/color-conversion" "^2.2.2"
-
 velocity-animate@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"