diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md
index dc6cb4f1b947..47e2286e9ccf 100644
--- a/docs/Public Module Imports.md	
+++ b/docs/Public Module Imports.md	
@@ -30,6 +30,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Card                     | `ui5-card`           | `import "@ui5/webcomponents/dist/Card.js";`                |
 | Carousel                 | `ui5-carousel`       | `import "@ui5/webcomponents/dist/Carousel.js";`            |
 | Checkbox                 | `ui5-checkbox`       | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
+| Color Palette            | `ui5-color-palette`  | `import "@ui5/webcomponents/dist/ColorPalette.js";`        |
+| Color Palette Item       | `ui5-color-palette-item`  | comes with `ui5-color-palette`                        |
 | ComboBox                 | `ui5-combobox`       | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`        | comes with `ui5-combobox`                                  |
 | Date Picker              | `ui5-date-picker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`         |
diff --git a/packages/base/src/types/CSSColor.js b/packages/base/src/types/CSSColor.js
new file mode 100644
index 000000000000..6d01156f8021
--- /dev/null
+++ b/packages/base/src/types/CSSColor.js
@@ -0,0 +1,9 @@
+import DataType from "./DataType.js";
+
+class CSSColor extends DataType {
+	static isValid(value) {
+		return /^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})|rgb\(\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*(,\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|rgba\((\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){3}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|hsl\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*(,\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|hsla\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*,(\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){2}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silverskyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|transparent|inherit|)$/.test(value ); // eslint-disable-line
+	}
+}
+
+export default CSSColor;
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index daa293de2cc5..a98f4d311b4c 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -47,6 +47,8 @@ import Button from "./dist/Button.js";
 import Card from "./dist/Card.js";
 import Carousel from "./dist/Carousel.js";
 import CheckBox from "./dist/CheckBox.js";
+import ColorPalette from "./dist/ColorPalette.js";
+import ColorPaletteItem from "./dist/ColorPaletteItem.js";
 import ComboBox from "./dist/ComboBox.js";
 import DatePicker from "./dist/DatePicker.js";
 import DateRangePicker from "./dist/DateRangePicker.js";
diff --git a/packages/main/src/ColorPalette.hbs b/packages/main/src/ColorPalette.hbs
new file mode 100644
index 000000000000..065dda651330
--- /dev/null
+++ b/packages/main/src/ColorPalette.hbs
@@ -0,0 +1,13 @@
+<div class="ui5-cp-item-container" 
+	role="region"
+	aria-label="{{colorContainerLabel}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}>
+	{{#each this.displayedColors}}
+		<slot
+			name="{{this._individualSlot}}"
+		>
+		</slot>
+	{{/each}}
+</div>
\ No newline at end of file
diff --git a/packages/main/src/ColorPalette.js b/packages/main/src/ColorPalette.js
new file mode 100644
index 000000000000..25b81568f4d4
--- /dev/null
+++ b/packages/main/src/ColorPalette.js
@@ -0,0 +1,175 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import {
+	isSpace,
+	isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
+import ColorPaletteItem from "./ColorPaletteItem.js";
+import {
+	COLORPALETTE_CONTAINER_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-color-palette",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 *
+		 * The selected color.
+		 * @type {CSSColor}
+		 * @public
+		 */
+		value: {
+			type: CSSColor,
+		 },
+	},
+	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * Defines the <code>ui5-color-palette-item</code> items.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "colors",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
+			individualSlots: true,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * Fired when the user selects a color.
+		 *
+		 * @event
+		 * @public
+		 * @param {String} color the selected color
+		 */
+		change: {
+			details: {
+				color: {
+					type: "String",
+				},
+			},
+		 },
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The ColorPalette provides the users with a range of predefined colors.
+ * You can set them by using the ColorPaletteItem items as slots.
+ *
+ * <h3>Usage</h3>
+ * The palette is intended for users, who don't want to check and remember the different values of the colors .
+ *
+ * For the <code>ui5-color-palette</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/ColorPalette.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPalette
+ * @extends UI5Element
+ * @tagname ui5-color-palette
+ * @since 1.0.0-rc.12
+ * @appenddocs ColorPaletteItem
+ * @public
+ */
+class ColorPalette extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ColorPaletteCss;
+	}
+
+	static get template() {
+		return ColorPaletteTemplate;
+	}
+
+	static get dependencies() {
+		return [ColorPaletteItem];
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.displayedColors,
+			rowSize: 5,
+			behavior: ItemNavigationBehavior.Cyclic,
+		});
+	}
+
+	onBeforeRendering() {
+		this.displayedColors.forEach((item, index) => {
+			item.index = index + 1;
+		});
+	}
+
+	selectColor(item) {
+		item.focus();
+		this._itemNavigation.update(item);
+
+		this.value = item.value;
+
+		this.fireEvent("change", {
+			color: this.value,
+		});
+	}
+
+	_onclick(event) {
+		if (event.target.localName === "ui5-color-palette-item") {
+			this.selectColor(event.target);
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.selectColor(event.target);
+		}
+	}
+
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this.selectColor(event.target);
+		}
+	}
+
+	get displayedColors() {
+		return this.colors.filter(item => item.value).slice(0, 15);
+	}
+
+	get colorContainerLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+	}
+}
+
+ColorPalette.define();
+
+export default ColorPalette;
diff --git a/packages/main/src/ColorPaletteItem.hbs b/packages/main/src/ColorPaletteItem.hbs
new file mode 100644
index 000000000000..604947e88a0d
--- /dev/null
+++ b/packages/main/src/ColorPaletteItem.hbs
@@ -0,0 +1,10 @@
+<div
+	class="ui5-cp-item"
+	style="background-color: {{value}}"
+	value="{{value}}"
+	tabindex="{{_tabIndex}}"
+	role="button"
+	aria-label="{{colorLabel}} - {{index}}: {{this.value}}"
+	title="{{colorLabel}} - {{index}}: {{this.value}}"
+>
+</div>
\ No newline at end of file
diff --git a/packages/main/src/ColorPaletteItem.js b/packages/main/src/ColorPaletteItem.js
new file mode 100644
index 000000000000..7bd781aeac92
--- /dev/null
+++ b/packages/main/src/ColorPaletteItem.js
@@ -0,0 +1,110 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
+import {
+	COLORPALETTE_COLOR_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-color-palette-item",
+	managedSlots: true,
+	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
+		/**
+		 * Defines the value of the <code>ui5-color-palette-item</code> color.
+		 * <br><br>
+		 * <b>Note:</b> The value should be a valid CSS color.
+		 *
+		 * @type {CSSColor}
+		 * @public
+		 */
+		value: {
+			type: CSSColor,
+		},
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 */
+		stableDomRef: {
+			type: String,
+		},
+		/**
+		 * Defines the tab-index of the element, helper information for the ItemNavigation.
+		 * @private
+		 */
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+			noAttribute: true,
+		},
+		/**
+		 * Defines the index of the item inside of the ColorPalette.
+		 * @private
+		 * @type {String}
+		 */
+		index: {
+			type: String,
+		},
+	},
+	slots: {
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPaletteItem
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-color-palette-item
+ * @since 1.0.0-rc.12
+ * @public
+ */
+class ColorPaletteItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ColorPaletteItemCss;
+	}
+
+	static get template() {
+		return ColorPaletteItemTemplate;
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	get colorLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+}
+
+ColorPaletteItem.define();
+
+export default ColorPaletteItem;
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 3cb7c9448004..17c44114a21f 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -43,6 +43,12 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
+#XFLD: Label of the container holding the colors
+COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
+
+#XFLD: Label of the color box
+COLORPALETTE_COLOR_LABEL=Color
+
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 
diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css
new file mode 100644
index 000000000000..8ddbe990657a
--- /dev/null
+++ b/packages/main/src/themes/ColorPalette.css
@@ -0,0 +1,11 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-cp-item-container {
+	display: flex;
+	max-width: var(--_ui5_color-palette-row-width);
+	flex-flow: wrap;
+	max-height: var(--_ui5_color-palette-row-height);
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css
new file mode 100644
index 000000000000..88d0711d9929
--- /dev/null
+++ b/packages/main/src/themes/ColorPaletteItem.css
@@ -0,0 +1,29 @@
+.ui5-cp-item {
+	height: var(--_ui5_color-palette-item-height);
+	width: var(--_ui5_color-palette-item-height);
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
+	border-radius: 0.25rem;
+	display: inline-block;
+	margin: var(--_ui5_color-palette-item-margin);
+}
+
+.ui5-cp-item:focus:before {
+	content: "";
+	width: var(--_ui5_color-palette-item-focus-height);
+	height: var(--_ui5_color-palette-item-focus-height);
+	margin: 2px;
+	position: absolute;
+	outline: rgb(0, 0, 0) dotted 0.0625rem;
+}
+
+.ui5-cp-item:focus {
+	pointer-events: none;
+	outline: white solid 0.0625rem;
+	outline-offset: -3px;
+}
+
+.ui5-cp-item:hover {
+	height: var(--_ui5_color-palette-item-hover-height);
+	width: var(--_ui5_color-palette-item-hover-height);
+	margin: var(--_ui5_color-palette-item-hover-margin);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css
new file mode 100644
index 000000000000..28bf3d097240
--- /dev/null
+++ b/packages/main/src/themes/base/ColorPalette-parameters.css
@@ -0,0 +1,12 @@
+:root {
+	--_ui5_color-palette-item-height: 1.75rem;
+	--_ui5_color-palette-item-container-sides-padding: 0.3125rem;
+	--_ui5_color-palette-item-container-rows-padding: 0.6875rem;
+	--_ui5_color-palette-item-focus-height: 1.5rem;
+	--_ui5_color-palette-item-container-padding: var(--_ui5_color-palette-item-container-sides-padding) var(--_ui5_color-palette-item-container-rows-padding);
+	--_ui5_color-palette-item-hover-height: 2.25rem;
+	--_ui5_color-palette-item-margin: calc(var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height));
+	--_ui5_color-palette-item-hover-margin: calc(var(--_ui5_color-palette-item-margin) / 2);
+	--_ui5_color-palette-row-width: 14.5rem;
+	--_ui5_color-palette-row-height: 9.5rem;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index ab37bc0d340d..fdaa42a06291 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -117,6 +117,15 @@
 	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
 	--_ui5_checkbox_icon_size: .75rem;
 
+	/* ColorPalette */
+	--_ui5_color-palette-item-height: 1.25rem;
+	--_ui5_color-palette-item-focus-height: 1rem;
+	--_ui5_color-palette-item-container-sides-padding: 0.1875rem;
+	--_ui5_color-palette-item-container-rows-padding: 0.8125rem;
+	--_ui5_color-palette-item-hover-height: 1.65rem;
+	--_ui5_color-palette-item-hover-margin: 0.3125rem;
+	--_ui5_color-palette-row-width: 12rem;
+	--_ui5_color-palette-row-height: 7.25rem;
 
 	/* Custom List Item */
 	--_ui5_custom_list_item_height: 2rem;
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index 56f074e0579b..4f4e9cb3c985 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -9,6 +9,7 @@
 @import "./Carousel-parameters.css";
 @import "../base/Card-parameters.css";
 @import "../base/CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 1103d5db87aa..ca91e264e887 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index 8830d2d840a6..359d241bdddd 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index 686a6ef4fe1c..4e0b602d3103 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -5,6 +5,7 @@
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 95417fa239ac..5fec1b500d13 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -5,6 +5,7 @@
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index c2cf0e054673..312a70cb3b61 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index c2cf0e054673..312a70cb3b61 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html
new file mode 100644
index 000000000000..a0fe4a55d192
--- /dev/null
+++ b/packages/main/test/pages/ColorPalette.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Color Palette</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+	<style>
+		body, html {
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			margin: 0;
+		}
+
+		.popover-content {
+			margin-top: 1rem;
+		}
+
+		.shellbar-example {
+			margin-top: 1px;
+		}
+	</style>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);">
+
+</body>
+	<ui5-color-palette id="cp1">
+		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+		<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+		<ui5-color-palette-item value="green"></ui5-color-palette-item>
+		<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+		<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+		<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+	</ui5-color-palette>
+	<br>
+	<ui5-input id="changeResult" value="Nothing selected"></ui5-input>
+	<br>
+	<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
+	<ui5-responsive-popover id="respPopover" with-padding>
+		<div id="respPopoverHeader" slot="header">
+			<ui5-title>Color Palette Popover</ui5-title>
+		</div>
+
+		<ui5-color-palette id="cp2">
+			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+			<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+			<ui5-color-palette-item value="green"></ui5-color-palette-item>
+			<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+			<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+			<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+			<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+			<ui5-color-palette-item value="invalidColor"></ui5-color-palette-item>
+			<ui5-color-palette-item value="gray"></ui5-color-palette-item>
+			<ui5-color-palette-item value="white"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		</ui5-color-palette>
+
+		<div slot="footer" class="popover-footer">
+			<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
+		</div>
+	</ui5-responsive-popover>
+	<script>
+		cp1.addEventListener("change", function(event) {
+			changeResult.value = event.detail.color;
+		});
+		colorPaletteBtn.addEventListener("click", function(event) {
+			respPopover.open(colorPaletteBtn);
+		});
+		btnClose.addEventListener("click", function(event) {
+			respPopover.close();
+		});
+	</script>
+</html>
diff --git a/packages/main/test/samples/ColorPalette.sample.html b/packages/main/test/samples/ColorPalette.sample.html
new file mode 100644
index 000000000000..8903aa0beeb7
--- /dev/null
+++ b/packages/main/test/samples/ColorPalette.sample.html
@@ -0,0 +1,127 @@
+<header>
+	<h2 class="control-header">ColorPalette</h2>
+</header>
+
+<div class="component-package">@ui5/webcomponents</div>
+
+<div class="control-tag">&lt;ui5-color-palette&gt;</div>
+
+<section>
+	<h3>ColorPalette</h3>
+	<div class="snippet">
+		<ui5-color-palette>
+			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+			<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+			<ui5-color-palette-item value="green"></ui5-color-palette-item>
+			<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+			<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+			<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+			<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+		</ui5-color-palette>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-color-palette>
+	<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+	<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+	<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+	<ui5-color-palette-item value="green"></ui5-color-palette-item>
+	<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+	<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+	<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+	<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+	<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+	<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+</ui5-color-palette>
+</xmp></pre>
+</section>
+<section>
+	<h3>ColorPalette in Popover</h3>
+	<div class="snippet">
+		<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
+		<ui5-responsive-popover id="respPopover">
+		<div id="respPopoverHeader" slot="header" with-padding>
+			<ui5-title>Color Palette Popover</ui5-title>
+		</div>
+
+		<ui5-color-palette>
+			<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+			<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+			<ui5-color-palette-item value="green"></ui5-color-palette-item>
+			<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+			<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+			<ui5-color-palette-item value="lightblue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+			<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+			<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+			<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+			<ui5-color-palette-item value="gray"></ui5-color-palette-item>
+			<ui5-color-palette-item value="white"></ui5-color-palette-item>
+			<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		</ui5-color-palette>
+
+		<div slot="footer" class="popover-footer">
+			<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
+		</div>
+	</ui5-responsive-popover>
+	<script>
+		colorPaletteBtn.addEventListener("click", function(event) {
+			respPopover.open(colorPaletteBtn);
+		});
+		btnClose.addEventListener("click", function(event) {
+			respPopover.close();
+		});
+	</script>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
+<ui5-responsive-popover id="respPopover" with-padding>
+	<div id="respPopoverHeader" slot="header">
+		<ui5-title>Color Palette Popover</ui5-title>
+	</div>
+
+	<ui5-color-palette>
+		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+		<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+		<ui5-color-palette-item value="green"></ui5-color-palette-item>
+		<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+		<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+		<ui5-color-palette-item value="lightblue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+		<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="gray"></ui5-color-palette-item>
+		<ui5-color-palette-item value="white"></ui5-color-palette-item>
+		<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+	</ui5-color-palette>
+
+	<div slot="footer" class="popover-footer">
+		<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
+	</div>
+</ui5-responsive-popover>
+<script>
+	colorPaletteBtn.addEventListener("click", function(event) {
+		respPopover.open(colorPaletteBtn);
+	});
+	btnClose.addEventListener("click", function(event) {
+		respPopover.close();
+	});
+</script>
+</xmp></pre>
+</section>
+
+
+<!-- JSDoc marker -->
diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js
new file mode 100644
index 000000000000..36321e61803b
--- /dev/null
+++ b/packages/main/test/specs/ColorPalette.spec.js
@@ -0,0 +1,73 @@
+const assert = require("chai").assert;
+
+describe("ColorPalette interactions", () => {
+	browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+
+	it("Test if selecting element works", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+		const colorPalette = browser.$("#cp1");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+
+		colorPaletteEntries[0].click();
+
+		assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+		const colorPalette = browser.$("#cp1");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+		const item = colorPaletteEntries[0];
+
+		item.click();
+
+		item.keys("ArrowRight");
+		item.keys("Space");
+
+		assert.strictEqual(colorPalette.getProperty("value"), "pink", "Check if selected value is pink");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+		const colorPalette = browser.$("#cp1");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+		const item = colorPaletteEntries[0];
+
+		item.click();
+
+		item.keys("ArrowLeft");
+		item.keys("Space");
+
+		colorPalette.keys("Space");
+
+		assert.strictEqual(colorPalette.getProperty("value"), "#ff6699", "Check if selected value is #ff6699");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+		const colorPalette = browser.$("#cp1");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+		const item = colorPaletteEntries[0];
+
+		item.click();
+
+		item.keys("ArrowUp");
+		item.keys("Space");
+
+		assert.strictEqual(colorPalette.getProperty("value"), "orange", "Check if selected value is orange");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
+		const colorPalette = browser.$("#cp1");
+		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
+		const item = colorPaletteEntries[9];
+
+		item.click();
+
+		item.keys("ArrowDown");
+		item.keys("Space");
+
+		assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
+	});
+});
\ No newline at end of file
diff --git a/packages/playground/build-scripts/samples-prepare.js b/packages/playground/build-scripts/samples-prepare.js
index 0fff11eb2a4c..ae5915c71cab 100644
--- a/packages/playground/build-scripts/samples-prepare.js
+++ b/packages/playground/build-scripts/samples-prepare.js
@@ -14,6 +14,7 @@ const components = [];
 const newComponents = [
 	"Bar",
 	"Calendar",
+	"ColorPalette",
 	"Page",
 	"RangeSlider",
 	"Slider",