Change properties of input color element type

Question

i want to change one property of <input type="color"/> I try to do this by javascript but at the moment i can´t find a way/attribute to change the property, the property is marked by red circle in the image below, example put the value with 120.

.

Answer 1

Since <input type="color"> accepts a value in HEX (i.e: #ffffff),
Create a function that accepts the Windows HSL color ranges

• Hue 0 - 239
• Saturation 0 - 240
• Luminance 0 - 240

For simplicity sake, use an in-memory canvas to get the respective RGBA value from a hsl() color unit.
Than from a pixel data extract the R,G,B - and it's just matter of converting every 0-255 range to .toString(16) to get a HEX value:

// Convert Windows Color Picker HSLu 239,240,240 to HEX
function winHSL2HEX(H, S, L) {
  const X = n => (n).toString(16).padStart(2,'0');
  const ctx = document.createElement('canvas').getContext('2d');
  const HSL = `hsl(${~~(H/239*360)},${~~(S/240*100)}%,${~~(L/240*100)}%)`;
  ctx.fillStyle = HSL; ctx.fillRect(0,0,1,1);
  const d = [...ctx.getImageData(0,0,1,1).data];
  return "#"+ X(d[0]) + X(d[1]) + X(d[2]);
}

// Demo time
document.querySelector("#color_1").value = winHSL2HEX(160, 0, 120);
document.querySelector("#color_2").value = winHSL2HEX(67, 70, 120);
document.querySelector("#color_3").value = winHSL2HEX(239, 240, 120);

<input id="color_1" type="color">
<input id="color_2" type="color">
<input id="color_3" type="color">

Now you can pass the desired 120 Lum value.

• https://stackoverflow.com/a/60689673/383904
• https://devblogs.microsoft.com/oldnewthing/20151013-00/?p=91371
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API