fix(ui5-color-picker): ensure RGB and HSL values are within limits

packages/main/cypress/specs/ColorPicker.cy.tsx

@@ -221,6 +221,43 @@ describe("Color Picker general interaction tests", () => {
 			.should("have.value", "rgba(70, 64, 191, 0.5)");
 	});
 
+	it("should normalize RGB values above 255 to 255", () => {
+		cy.mount(<ColorPicker value="rgba(100, 100, 100, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		// Test red input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "300");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#red", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 100, 100, 1)");
+
+		// Test green input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#green", "400");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#green", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 255, 100, 1)");
+
+		// Test blue input normalization
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#blue", "500");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#blue", "255");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(255, 255, 255, 1)");
+	});
+
 	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
 		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
 

packages/main/src/ColorPicker.ts

@@ -41,6 +41,15 @@ import {
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
 
+enum COLOR_CHANNEL {
+	Red = "red",
+	Green = "green",
+	Blue = "blue",
+	Hue = "hue",
+	Saturation = "saturation",
+	Light = "light",
+}
+
 const PICKER_POINTER_WIDTH = 6.5;
 
 type ColorCoordinates = {
@@ -56,6 +65,13 @@ type ColorChannelInput = {
 	showPercentSymbol?: boolean,
 }
 
+type MinMaxValues = {
+	min: number,
+	max: number,
+}
+
+type HSLandRGBValueLimits = Record<COLOR_CHANNEL, MinMaxValues>;
+
 /**
  * @class
  *
@@ -355,9 +371,31 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		this._displayHSL = !this._displayHSL;
 	}
 
+	_normalizeInputValue(stringValue: string, inputId: string): number {
+		const value = Number(stringValue);
+
+		const limits: HSLandRGBValueLimits = {
+			red: { min: 0, max: 255 },
+			green: { min: 0, max: 255 },
+			blue: { min: 0, max: 255 },
+			hue: { min: 0, max: 360 },
+			saturation: { min: 0, max: 100 },
+			light: { min: 0, max: 100 },
+		};
+
+		const limit = limits[inputId as keyof HSLandRGBValueLimits];
+		if (!limit) {
+			return value || 0;
+		}
+
+		// Return the value normalized to the limits
+		return Math.max(limit.min, Math.min(limit.max, value));
+	}
+
 	_handleColorInputChange(e: Event) {
 		const target = e.target as Input;
-		const targetValue = parseInt(target.value) || 0;
+		const targetValue = this._normalizeInputValue(target.value, target.id);
+		target.value = String(targetValue);
 
 		switch (target.id) {
 		case "red":