保持亮度的方式从一种颜色移动到另一种颜色

Question

我正在尝试在javascript中开发一个模块，它允许加载图像并更改所选部分的颜色。我几乎成功了（我认为），因为我可以根据饱和度和亮度对大多数颜色进行颜色更改，所以阴影和光线（我使用HSL和RGB）。 然后是我的问题：如果亮度太高，结果就是médiodre，特别是如果我用蓝色作为颜色来获得。

这里我用来转换像素的函数 我使用三种颜色作为我的功能（每种颜色两个变量，一个用于hsl，一个用于rgb） 用户首先选择的一种参考颜色（hslOrigin或OriginColor） 转换像素的一种颜色（hsl） 和一种代表目标颜色的颜色（hslDestination或DestionationColor）

function recolorPants(OriginColor, DestinationColor, img) {
	var canvas = document.getElementById("resultCanvas");
	var ctx = canvas.getContext("2d");

	ctx.drawImage(img, 0, 0);
	
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imgData.data;

	var maskdata = window.initMask(mask); //function to initiate the part of image i want to change

	var hslOrigin = rgbToHsl(OriginColor.r, OriginColor.g, OriginColor.b);
	var hslDestination = rgbToHsl(DestinationColor.r, DestinationColor.g, DestinationColor.b);
	 
	
    for (var i = 0; i < data.length; i += 4) {
		
		if(((maskdata[i + 0])== 128) && ((maskdata[i + 1])== 128) && ((maskdata[i + 2])== 128))
		{
			red = data[i + 0];
			green = data[i + 1];
			blue = data[i + 2];
			alpha = data[i + 3];
			
			var hsl = rgbToHsl(red, green, blue); //hsl from image source
			
			
			if((Math.abs(hslOrigin.h - hsl.h) <= 0.15)  ){
				if((hslOrigin.l < 0.7)){
                  
				var newRgb = hslToRgb(((hsl.h/hslOrigin.h ) *hslDestination.h) , ((hsl.s/hslOrigin.s) *hslDestination.s), ((hsl.l / hslOrigin.l) *hslDestination.l));
				data[i + 0] = newRgb.r;
				data[i + 1] = newRgb.g;
				data[i + 2] = newRgb.b;
				}else{
					var newRgb = hslToRgb(((hsl.h/hslOrigin.h ) *hslDestination.h) , ((hsl.s/hslOrigin.s) *hslDestination.s), hsl.l);
					
					data[i + 0] = newRgb.r;
					data[i + 1] = newRgb.g;
					data[i + 2] = newRgb.b;
				}
			}
		}
    }
	
	var canvas2 = document.getElementById("TheCanvas");
	var ctx2 = canvas2.getContext("2d");
	
	ctx2.putImageData(imgData, 0, 0);
}

我可能不清楚，如果需要我会添加更多解释。 谢谢你的帮助。