diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss
new file mode 100644
index 00000000..0d937390
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/colourpicker.scss
@@ -0,0 +1,50 @@
+.bd-form-colourpicker .bd-title {
+ display: flex;
+}
+
+.bd-form-colourpicker .bd-title h3 {
+ font-weight: 500;
+ color: #f6f6f7;
+ flex: 1;
+ line-height: 24px;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+.bd-colourpicker-swatch {
+ width: 50px;
+ height: 30px;
+ border-radius: 3px;
+ border: 1px solid hsla(0,0%,100%,.1);
+}
+
+.bd-form-colourpicker {
+ position: relative;
+
+ .vc-chrome {
+ position: absolute;
+ right: 10px;
+ top: 35px;
+ border-radius: 3px;
+
+ .vc-chrome-body {
+ background: #36393e;
+
+ .vc-chrome-fields-wrap {
+ .vc-input__input {
+ background: #1e2124;
+ color: #FFF;
+ box-shadow: inset 0 0 0 1px #000;
+ }
+
+ .vc-chrome-toggle-icon-highlight {
+ background: #1e2124;
+ }
+
+ .vc-chrome-toggle-btn svg path {
+ fill: #FFF;
+ }
+ }
+ }
+ }
+}
diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss
index 92671d26..e1154656 100644
--- a/client/src/styles/partials/generic/forms/index.scss
+++ b/client/src/styles/partials/generic/forms/index.scss
@@ -6,3 +6,4 @@
@import './sliders.scss';
@import './switches.scss';
@import './arrays.scss';
+@import './colourpicker.scss';
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
new file mode 100644
index 00000000..7a7c5abd
--- /dev/null
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -0,0 +1,70 @@
+/**
+ * BetterDiscord Colour Setting Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+
+ {{setting.text}}
+