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

@@ -358,33 +358,41 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	_handleColorInputChange(e: Event) {
 		const target = e.target as Input;
 		const targetValue = parseInt(target.value) || 0;
+		let normalizedValue = targetValue;
 
 		switch (target.id) {
 		case "red":
 			this._colorValue.R = targetValue;
+			normalizedValue = this._colorValue.R;
 			break;
 
 		case "green":
 			this._colorValue.G = targetValue;
+			normalizedValue = this._colorValue.G;
 			break;
 
 		case "blue":
 			this._colorValue.B = targetValue;
+			normalizedValue = this._colorValue.B;
 			break;
 
 		case "hue":
 			this._colorValue.H = targetValue;
+			normalizedValue = this._colorValue.H;
 			break;
 
 		case "saturation":
 			this._colorValue.S = targetValue;
+			normalizedValue = this._colorValue.S;
 			break;
 
 		case "light":
 			this._colorValue.L = targetValue;
+			normalizedValue = this._colorValue.L;
 			break;
 		}
 
+		target.value = String(normalizedValue);
 		const color = this._colorValue.toRGBString();
 		this._setValue(color);
 		this._updateColorGrid();

packages/main/src/colorpicker-utils/ColorValue.ts

@@ -94,33 +94,39 @@ class ColorValue {
 	}
 
 	set H(value: number) {
-		this.validateHValue(value);
-		this._updateHSL({ h: value, s: this.S, l: this.L });
+		const normalizedValue = this.normalizeHValue(value);
+		this._valid = true;
+		this._updateHSL({ h: normalizedValue, s: this.S, l: this.L });
 	}
 
 	set S(value: number) {
-		this.validateSLValue(value);
-		this._updateHSL({ h: this.H, s: value, l: this.L });
+		const normalizedValue = this.normalizeSLValue(value);
+		this._valid = true;
+		this._updateHSL({ h: this.H, s: normalizedValue, l: this.L });
 	}
 
 	set L(value: number) {
-		this.validateSLValue(value);
-		this._updateHSL({ h: this.H, s: this.S, l: value });
+		const normalizedValue = this.normalizeSLValue(value);
+		this._valid = true;
+		this._updateHSL({ h: this.H, s: this.S, l: normalizedValue });
 	}
 
 	set R(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB({ r: value, g: this.G, b: this.B });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: normalizedValue, g: this.G, b: this.B });
 	}
 
 	set G(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB(this.RGB = { r: this.R, g: value, b: this.B });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: this.R, g: normalizedValue, b: this.B });
 	}
 
 	set B(value: number) {
-		this.validateRGBValue(value);
-		this._updateRGB({ r: this.R, g: this.G, b: value });
+		const normalizedValue = this.normalizeRGBValue(value);
+		this._valid = true;
+		this._updateRGB({ r: this.R, g: this.G, b: normalizedValue });
 	}
 
 	set Alpha(value: number) {
@@ -135,6 +141,13 @@ class ColorValue {
 		this._valid = this._isValidRGBValue(value);
 	}
 
+	normalizeRGBValue(value: number): number {
+		if (this._isValidRGBValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 255;
+	}
+
 	validateRGBColor(color: ColorRGB) {
 		this._valid = this._isValidRGBValue(color.r) && this._isValidRGBValue(color.g) && this._isValidRGBValue(color.b);
 	}
@@ -147,10 +160,24 @@ class ColorValue {
 		this._valid = this._isValidHValue(value);
 	}
 
+	normalizeHValue(value: number): number {
+		if (this._isValidHValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 360;
+	}
+
 	validateSLValue(value: number) {
 		this._valid = this._isValidSLValue(value);
 	}
 
+	normalizeSLValue(value: number): number {
+		if (this._isValidSLValue(value)) {
+			return value;
+		}
+		return value < 0 ? 0 : 100;
+	}
+
 	validateHEX(value: string) {
 		const hexRegex = new RegExp("^[<0-9 abcdef]+$");
 		this._valid = value.length === 6 && hexRegex.test(value);