Je veux changer une propriété de <input type="color"/> J'essaie de le faire par javascript mais pour le moment je ne trouve pas de moyen / attribut pour changer la propriété, la propriété est marquée par un cercle rouge dans l'image ci-dessous, par exemple mettez la valeur avec 120.

entrez la description de l'image ici.

5
Erased 6 avril 2020 à 22:28

6 réponses

Meilleure réponse

Ces paramètres sont généralement appelés valeurs de couleur HSL. Ils sont spécifiés avec hsl(hue, saturation, lightness) dans le CSS.

Le paramètre CSS peut être utilisé immédiatement comme une chaîne pour modifier la couleur nécessaire.

Si vous souhaitez modifier l'arrière-plan, les informations ci-dessous vous aideront:

document.getElementById('text').style.backgroundColor = "hsl(0, 0%, 100%)";

Si vous souhaitez définir une couleur de police, utilisez la méthode ci-dessous:

document.getElementById('text').style.color = "hsl(180, 50%, 50%)";

Vous pouvez modifier l'attribut de style en fonction de vos besoins.

J'espère que cela pourra aider!

1
gsthina 6 avril 2020 à 19:48

Vous utilisez le type de couleur hsl (teinte, saturation, luminosité). c'est un convertisseur hex en hsl. alors vous pouvez le changer pendant qu'il est en hsl. Vous pouvez consulter https://gist.github.com/xenozauros/f6e185c8de2a04cdfecf

   function hexToHSL(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    r = parseInt(result[1], 16);
    g = parseInt(result[2], 16);
    b = parseInt(result[3], 16);
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;
    if(max == min){
      h = s = 0; // achromatic
    }else{
      var d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch(max){
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }
  var HSL = new Object();
  HSL['h']=h;
  HSL['s']=s;
  HSL['l']=l;
  return HSL;
}
0
Çağrı 6 avril 2020 à 19:45

La valeur de couleur HEX correspondante pour définir le "LUM" sur 120 est #7F7F7F (parce que vous travaillez ici avec des couleurs HSL, et non RVB. Nous devons donc le convertir en HSL).

Utilisez ensuite l'attribut value dans l'élément <input/> pour modifier la "propriété".

Exemple:

<input type="color" value="#7F7F7F"/>

Mais le "Hue" sera automatiquement réglé sur 160, et le R, G et B sur 127.

0
MARSHMALLOW 6 avril 2020 à 19:45

Vous pouvez utiliser l'argument 'value':

<input type="color" value="#fa0a00">

Si vous avez la couleur dans un autre format, vous devez convertir l'int en hexadécimal.

0
B. Sebastiano 6 avril 2020 à 19:33

Étant donné que <input type="color"> accepte une valeur en HEX (c'est-à-dire: #ffffff),
Créer une fonction qui accepte les plages de couleurs Windows HSL

  • Teinte 0-239
  • Saturation 0-240
  • Luminance 0-240

Par souci de simplicité, utilisez un canevas en mémoire pour obtenir la valeur RGBA respective à partir d'une unité de couleur hsl().
À partir d'une donnée de pixel, extrayez le R, G, B - et il suffit de convertir chaque plage de 0 à 255 en .toString(16) pour obtenir une valeur HEX:

// 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);

document.querySelector("#color_3").onchange = function(){
  document.body.style.background = document.querySelector("#color_3").value;
}
<input id="color_1" type="color">
<input id="color_2" type="color">
<input id="color_3" type="color">

Vous pouvez maintenant passer la valeur de 120 Lum souhaitée.

1
Roko C. Buljan 6 avril 2020 à 21:11

En utilisant les HexToHSL et HSLToHex, vous trouverez ici vous pouvez convertir la couleur en HSL, définir la valeur de luminance et reconvertir en RVB pour définir la valeur du contrôle de formulaire.

Sur le contrôle, la luminance varie de 0 à 240. Notre couleur convertie varie de 0 à 100, donc avant de régler nous divisons par 240 et multiplions par 100.

document.getElementById("lumbutton").addEventListener("click", () => {
  var el = document.getElementById("colorsel");
  var color = el.value;
  var hsl = hexToHsl(color);
  var lum = parseInt(document.getElementById("lum").value);
  hsl[2] = lum * (100 / 240); // Change Luminance to typed value
  color = hslToHex(hsl);
  console.log(color);
  el.value = color;
});

function hexToHsl(H) {
  let r = 0, g = 0, b = 0;
  if (H.length == 4) {
    r = "0x" + H[1] + H[1]; g = "0x" + H[2] + H[2]; b = "0x" + H[3] + H[3];
  } else if (H.length == 7) {
    r = "0x" + H[1] + H[2]; g = "0x" + H[3] + H[4]; b = "0x" + H[5] + H[6];
  }
  r /= 255; g /= 255; b /= 255;
  let cmin = Math.min(r, g, b),
    cmax = Math.max(r, g, b),
    delta = cmax - cmin,
    h = 0, s = 0, l = 0;

  if (delta == 0) h = 0;
  else if (cmax == r) h = ((g - b) / delta) % 6;
  else if (cmax == g) h = (b - r) / delta + 2;
  else h = (r - g) / delta + 4;

  h = Math.round(h * 60);

  if (h < 0) h += 360;

  l = (cmax + cmin) / 2;
  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
  s = +(s * 100).toFixed(1);
  l = +(l * 100).toFixed(1);

  return [h, s, l];
}

var hslToHex = function(hsl) {
  var h = hsl[0], s = hsl[1], l = hsl[2];

  s /= 100;
  l /= 100;

  let c = (1 - Math.abs(2 * l - 1)) * s,
      x = c * (1 - Math.abs((h / 60) % 2 - 1)),
      m = l - c/2,
      r = 0, g = 0, b = 0;

  if (0 <= h && h < 60) { r = c; g = x; b = 0; } 
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; } 
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; } 
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; } 
  else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
  
  // Having obtained RGB, convert channels to hex
  r = Math.round((r + m) * 255).toString(16);
  g = Math.round((g + m) * 255).toString(16);
  b = Math.round((b + m) * 255).toString(16);

  // Prepend 0s, if necessary
  if (r.length == 1) r = "0" + r;
  if (g.length == 1) g = "0" + g;
  if (b.length == 1) b = "0" + b;

  return "#" + r + g + b;
}
<input id="colorsel" type="color" value="#f08871"/>
<input id="lum" value="120">
<input id="lumbutton" type=button value="Set Luminosity value">
0
ariel 6 avril 2020 à 20:36