diff --git a/projects/angular-editor-app/src/app/app.component.ts b/projects/angular-editor-app/src/app/app.component.ts
index f42001d55..925561427 100644
--- a/projects/angular-editor-app/src/app/app.component.ts
+++ b/projects/angular-editor-app/src/app/app.component.ts
@@ -1,5 +1,5 @@
+import { AngularEditorConfig } from './../../../angular-editor/src/lib/config';
 import {Component, OnInit} from '@angular/core';
-import {AngularEditorConfig} from 'angular-editor';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
@@ -47,7 +47,8 @@ export class AppComponent implements OnInit {
     toolbarHiddenButtons: [
       ['bold', 'italic'],
       ['fontSize']
-    ]
+    ],
+    defaultPickerColors: []
   };
 
   config2: AngularEditorConfig = {
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
index 6a2521f1f..b1eea9466 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html
@@ -94,24 +94,33 @@
     </ae-select>
   </div>
   <div class="angular-editor-toolbar-set">
-    <input
-      style="display: none"
+    <div style="position: relative; display: inline-block;" [hidden]="isButtonHidden('textColor')">
+      <input
+      [attr.list]="defaultPickerColors ? 'picker-colors-textColor': null"
       type="color" (change)="insertColor(fgInput.value, 'textColor')"
+      class="color-picker"
       #fgInput>
-    <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; fgInput.click()"
-            title="Text Color"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('textColor')" tabindex="-1"><span
-      class="color-label foreground"><i class="fa fa-font"></i></span>
-    </button>
-    <input
-      style="display: none"
+      <ng-container *ngTemplateOutlet="predefinedColorPickers; context:{type: 'textColor'}"></ng-container>
+      <button [id]="'foregroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; fgInput.click()"
+              title="Text Color"
+              [disabled]="htmlMode" [hidden]="isButtonHidden('textColor')" tabindex="-1"><span
+        class="color-label foreground"><i class="fa fa-font"></i></span>
+      </button>
+    </div>
+
+    <div style="position: relative; display: inline-block;" [hidden]="isButtonHidden('backgroundColor')">
+      <input
+      [attr.list]="defaultPickerColors ? 'picker-colors-backgroundColor': null"
       type="color" (change)="insertColor(bgInput.value, 'backgroundColor')"
+      class="color-picker"
       #bgInput>
-    <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; bgInput.click()"
-            title="Background Color"
-            [disabled]="htmlMode" [hidden]="isButtonHidden('backgroundColor')" tabindex="-1"><span
-      class="color-label background"><i class="fa fa-font"></i></span>
-    </button>
+      <ng-container *ngTemplateOutlet="predefinedColorPickers; context:{type: 'backgroundColor'}"></ng-container>
+      <button [id]="'backgroundColorPicker-'+id" type="button" class="angular-editor-button" (click)="focus(); ; bgInput.click()"
+              title="Background Color"
+              [disabled]="htmlMode" [hidden]="isButtonHidden('backgroundColor')" tabindex="-1"><span
+        class="color-label background"><i class="fa fa-font"></i></span>
+      </button>
+    </div>
   </div>
   <div *ngIf="_customClasses" class="angular-editor-toolbar-set">
     <ae-select class="select-custom-style" [options]="customClassList"
@@ -160,3 +169,9 @@
       class='fa fa-code'></i></button>
   </div>
 </div>
+
+<ng-template #predefinedColorPickers let-type="type">
+  <datalist id="{{'picker-colors-' + type}}">
+    <option *ngFor="let pColor of defaultPickerColors" [value]="pColor">{{pColor}}</option>
+  </datalist>
+</ng-template>
\ No newline at end of file
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss b/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss
index 131c0cbf7..9ba3cb8e3 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss
@@ -11,3 +11,15 @@
     transition: 0.2s ease;
   }
 }
+
+.color-picker {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 85%;
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
index cc8c0c5b5..71ab61ec6 100644
--- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts
@@ -154,6 +154,8 @@ export class AngularEditorToolbarComponent {
     return this.htmlMode || !Boolean(this.editorService.selectedText);
   }
 
+  @Input() defaultPickerColors: string[] = [];
+
   constructor(
     private r: Renderer2,
     private editorService: AngularEditorService,
diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html
index 5c9bc4b15..0d71620be 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.html
+++ b/projects/angular-editor/src/lib/angular-editor.component.html
@@ -15,6 +15,7 @@
           [customClasses]="config.customClasses"
           [defaultFontName]="config.defaultFontName"
           [defaultFontSize]="config.defaultFontSize"
+          [defaultPickerColors]="config.defaultPickerColors"
           [hiddenButtons]="config.toolbarHiddenButtons"
           (execute)="executeCommand($event)"
      ></angular-editor-toolbar>
diff --git a/projects/angular-editor/src/lib/config.ts b/projects/angular-editor/src/lib/config.ts
index 35dcaecb2..3c83e9207 100644
--- a/projects/angular-editor/src/lib/config.ts
+++ b/projects/angular-editor/src/lib/config.ts
@@ -37,6 +37,7 @@ export interface AngularEditorConfig {
   toolbarPosition?: 'top' | 'bottom';
   outline?: boolean;
   toolbarHiddenButtons?: string[][];
+  defaultPickerColors?: string[];
 }
 
 export const angularEditorConfig: AngularEditorConfig = {