diff --git a/packages/main/src/ColorPalette.hbs b/packages/main/src/ColorPalette.hbs
index 8492f649183d..065dda651330 100644
--- a/packages/main/src/ColorPalette.hbs
+++ b/packages/main/src/ColorPalette.hbs
@@ -1,12 +1,13 @@
-<div class="ui5-cp-swatch-container" 
+<div class="ui5-cp-item-container" 
 	role="region"
-	aria-label="{{colorContainerLabel}}">
+	aria-label="{{colorContainerLabel}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}>
 	{{#each this.displayedColors}}
 		<slot
 			name="{{this._individualSlot}}"
-			@click={{../_onclick}}
-			@keyup={{../_onkeyup}}
-			@keydown={{../_onkeydown}}>
+		>
 		</slot>
 	{{/each}}
 </div>
\ No newline at end of file
diff --git a/packages/main/src/ColorPalette.js b/packages/main/src/ColorPalette.js
index 0d870191dfbb..01ba005fa2c6 100644
--- a/packages/main/src/ColorPalette.js
+++ b/packages/main/src/ColorPalette.js
@@ -143,7 +143,9 @@ class ColorPalette extends UI5Element {
 	}
 
 	_onclick(event) {
-		this.selectColor(event.target);
+		if(event.target.localName === "ui5-color-palette-item") {
+			this.selectColor(event.target);
+		}
 	}
 
 	_onkeyup(event) {
diff --git a/packages/main/src/ColorPaletteItem.hbs b/packages/main/src/ColorPaletteItem.hbs
index a917603dff64..604947e88a0d 100644
--- a/packages/main/src/ColorPaletteItem.hbs
+++ b/packages/main/src/ColorPaletteItem.hbs
@@ -1,5 +1,5 @@
 <div
-	class="ui5-cp-swatch"
+	class="ui5-cp-item"
 	style="background-color: {{value}}"
 	value="{{value}}"
 	tabindex="{{_tabIndex}}"
diff --git a/packages/main/src/themes/ColorPalette.css b/packages/main/src/themes/ColorPalette.css
index 8fbb524e18ed..8ddbe990657a 100644
--- a/packages/main/src/themes/ColorPalette.css
+++ b/packages/main/src/themes/ColorPalette.css
@@ -2,7 +2,7 @@
 	display: inline-block;
 }
 
-.ui5-cp-swatch-container {
+.ui5-cp-item-container {
 	display: flex;
 	max-width: var(--_ui5_color-palette-row-width);
 	flex-flow: wrap;
diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css
index 87383366c3db..88d0711d9929 100644
--- a/packages/main/src/themes/ColorPaletteItem.css
+++ b/packages/main/src/themes/ColorPaletteItem.css
@@ -1,29 +1,29 @@
-.ui5-cp-swatch {
-	height: var(--_ui5_color-palette-swatch-height);
-	width: var(--_ui5_color-palette-swatch-height);
+.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-swatch-margin);
+	margin: var(--_ui5_color-palette-item-margin);
 }
 
-.ui5-cp-swatch:focus:before {
+.ui5-cp-item:focus:before {
 	content: "";
-	width: var(--_ui5_color-palette-swatch-focus-height);
-	height: var(--_ui5_color-palette-swatch-focus-height);
+	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-swatch:focus {
+.ui5-cp-item:focus {
 	pointer-events: none;
 	outline: white solid 0.0625rem;
 	outline-offset: -3px;
 }
 
-.ui5-cp-swatch:hover {
-	height: var(--_ui5_color-palette-swatch-hover-height);
-	width: var(--_ui5_color-palette-swatch-hover-height);
-	margin: var(--_ui5_color-palette-swatch-hover-margin);
+.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
index 531dcccfba01..28bf3d097240 100644
--- a/packages/main/src/themes/base/ColorPalette-parameters.css
+++ b/packages/main/src/themes/base/ColorPalette-parameters.css
@@ -1,12 +1,12 @@
 :root {
-	--_ui5_color-palette-swatch-height: 1.75rem;
-	--_ui5_color-palette-swatch-container-sides-padding: 0.3125rem;
-	--_ui5_color-palette-swatch-container-rows-padding: 0.6875rem;
-	--_ui5_color-palette-swatch-focus-height: 1.5rem;
-	--_ui5_color-palette-swatch-container-padding: var(--_ui5_color-palette-swatch-container-sides-padding) var(--_ui5_color-palette-swatch-container-rows-padding);
-	--_ui5_color-palette-swatch-hover-height: 2.25rem;
-	--_ui5_color-palette-swatch-margin: calc(var(--_ui5_color-palette-swatch-hover-height) - var(--_ui5_color-palette-swatch-height));
-	--_ui5_color-palette-swatch-hover-margin: calc(var(--_ui5_color-palette-swatch-margin) / 2);
-	--_ui5_color-palette-row-width: 14.375rem;
+	--_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 d4878151c9bd..fdaa42a06291 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -118,12 +118,12 @@
 	--_ui5_checkbox_icon_size: .75rem;
 
 	/* ColorPalette */
-	--_ui5_color-palette-swatch-height: 1.25rem;
-	--_ui5_color-palette-swatch-focus-height: 1rem;
-	--_ui5_color-palette-swatch-container-sides-padding: 0.1875rem;
-	--_ui5_color-palette-swatch-container-rows-padding: 0.8125rem;
-	--_ui5_color-palette-swatch-hover-height: 1.65rem;
-	--_ui5_color-palette-swatch-hover-margin: 0.3125rem;
+	--_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;
 
diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js
index 3c33a03b61c3..36321e61803b 100644
--- a/packages/main/test/specs/ColorPalette.spec.js
+++ b/packages/main/test/specs/ColorPalette.spec.js
@@ -17,12 +17,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowRight");
-		swatch.keys("Space");
+		item.keys("ArrowRight");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "pink", "Check if selected value is pink");
 	});
@@ -31,12 +31,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowLeft");
-		swatch.keys("Space");
+		item.keys("ArrowLeft");
+		item.keys("Space");
 
 		colorPalette.keys("Space");
 
@@ -47,12 +47,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowUp");
-		swatch.keys("Space");
+		item.keys("ArrowUp");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "orange", "Check if selected value is orange");
 	});
@@ -61,12 +61,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[9];
+		const item = colorPaletteEntries[9];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowDown");
-		swatch.keys("Space");
+		item.keys("ArrowDown");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
 	});