diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss
index 56a0fbc6..685b0756 100644
--- a/tabby-core/src/theme.scss
+++ b/tabby-core/src/theme.scss
@@ -393,3 +393,15 @@ hr {
 .dropdown-menu {
     box-shadow: $dropdown-box-shadow;
 }
+
+ngx-colors-panel .opened {
+    background: $body-bg !important;
+
+    button {
+        color: $body-color;
+    }
+
+    .button svg {
+        fill: white;
+    }
+}
diff --git a/tabby-terminal/package.json b/tabby-terminal/package.json
index 81a94ddf..0b5aded8 100644
--- a/tabby-terminal/package.json
+++ b/tabby-terminal/package.json
@@ -23,6 +23,7 @@
     "cli-spinner": "^0.2.10",
     "dataurl": "0.1.0",
     "hexer": "^1.5.0",
+    "ngx-colors": "^3.0.4",
     "ps-node": "^0.1.6",
     "runes": "^0.4.2",
     "xterm": "npm:@tabby-gang/xterm@^4.17.1-beta.2",
diff --git a/tabby-terminal/src/components/colorPicker.component.pug b/tabby-terminal/src/components/colorPicker.component.pug
index 33ccec31..e29757fb 100644
--- a/tabby-terminal/src/components/colorPicker.component.pug
+++ b/tabby-terminal/src/components/colorPicker.component.pug
@@ -1,16 +1,7 @@
-ng-template(#content)
-    .preview(
-        [style.width]='"100%"',
-        [style.background]='model',
-    )
-    input.form-control(type='text', [(ngModel)]='model', (ngModelChange)='onChange()', #input)
-
 div(
-    [ngbPopover]='content',
     [style.background]='model',
-    (click)='open()',
-    autoClose='outside',
-    container='body',
-    #popover='ngbPopover',
-    [title]='hint'
+    ngx-colors-trigger,
+    [(ngModel)]='model',
+    (ngModelChange)='onChange($event)',
+    [ngbTooltip]='hint'
 ) {{ title }}
diff --git a/tabby-terminal/src/components/colorPicker.component.ts b/tabby-terminal/src/components/colorPicker.component.ts
index 6ea7eb1e..db6bcff0 100644
--- a/tabby-terminal/src/components/colorPicker.component.ts
+++ b/tabby-terminal/src/components/colorPicker.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { Component, Input, Output, EventEmitter } from '@angular/core'
 
 /** @hidden */
 @Component({
@@ -12,16 +11,10 @@ export class ColorPickerComponent {
     @Input() title: string
     @Input() hint: string
     @Output() modelChange = new EventEmitter<string>()
-    @ViewChild('popover') popover: NgbPopover
 
-    open (): void {
-        setImmediate(() => {
-            this.popover.open()
-            this.popover['_windowRef'].location.nativeElement.querySelector('input').focus()
-        })
-    }
-
-    onChange (): void {
-        this.modelChange.emit(this.model)
+    onChange (value: string): void {
+        if (value !== this.model) {
+            this.modelChange.emit(value)
+        }
     }
 }
diff --git a/tabby-terminal/src/index.ts b/tabby-terminal/src/index.ts
index 6de3d67c..eaf6ee58 100644
--- a/tabby-terminal/src/index.ts
+++ b/tabby-terminal/src/index.ts
@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
+import { NgxColorsModule } from 'ngx-colors'
 
 import TabbyCorePlugin, { ConfigProvider, HotkeyProvider, TabContextMenuItemProvider, CLIHandler } from 'tabby-core'
 import { SettingsTabProvider } from 'tabby-settings'
@@ -40,6 +41,7 @@ import { TerminalCLIHandler } from './cli'
         NgbModule,
         ToastrModule,
         TabbyCorePlugin,
+        NgxColorsModule,
     ],
     providers: [
         { provide: SettingsTabProvider, useClass: AppearanceSettingsTabProvider, multi: true },
diff --git a/tabby-terminal/yarn.lock b/tabby-terminal/yarn.lock
index 50cc54cb..10e7b98b 100644
--- a/tabby-terminal/yarn.lock
+++ b/tabby-terminal/yarn.lock
@@ -94,6 +94,13 @@ minimist@^1.1.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+ngx-colors@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/ngx-colors/-/ngx-colors-3.0.4.tgz#69b760760e6e1e92fda5da51fa9b4bea7e555d40"
+  integrity sha512-peNvVpYkm8pe3nP8/TbaFFqo/RxZevGljKrzFa2g1hPPacdx+WdfwAN4uJfcGk7qTYbqlV64SSfb3Pnx8qjzDA==
+  dependencies:
+    tslib "^2.0.0"
+
 opentype.js@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-0.8.0.tgz#acabcfa1642fbe894a3e4d759e43ba694e02bd35"
@@ -140,6 +147,11 @@ tiny-inflate@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
+tslib@^2.0.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 xtend@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"