Tout à commencé avec ce sujet : Changer la couleur d'un png uniquement en JS "pur"

Pour ceux qui n'ont pas envie de se tartiner toute l'histoire, à un moment dans ce fil on a besoin de faire des conversions RGB => HSV, et peut être aussi inversement.

J'avance difficilement sur ce sujet, et j'ai cru que l'algo de transfo RGB => HSV, était faux su wikipédia, et " je m'ai planté" https://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur
bref je vous laisse quand même mon algo corrigé,
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Vérif RGB -> HSV</title>
  <style>
    *     { box-sizing: border-box }
    body  { font-family: 'Courier New', Courier, monospace; font-size: 11px }
    table { border-collapse: collapse; margin:20px }
    td    { border : 1px solid grey; padding: 5px 10px }
    thead td { background-color: #add8e6; min-width:80px; text-align: center; padding: 10px 0 5px 0 }
    td > div { display: inline-block; width:60px; height: 13px }
  </style>
</head>
 
<body>
  <input id="BtColor" type="color" value="#000000">
  <button id="BtClear">RAZ tableau</button>
  <table>
    <thead>
      <tr>
        <td> #RGB </td> <td> r,g,b </td> <td> h,s,v </td>  <td> couleur </td> 
      </tr>
    </thead>
    <tbody></tbody>
  </table>
 
  <script>
 
    const TablBody = document.querySelector('tbody');
    var  lastColor = '';                               // pour cas de cancel sur le ColorPicker
 
    BtClear.onclick=()=>{
      TablBody.innerHTML = null
    }
 
    BtColor.onchange=()=>{
 
      if (lastColor===BtColor.value ) return;
      lastColor = BtColor.value;
 
      let
        RGB  = HashRGB_2_rgb(BtColor.value),
        HSV  = rgb_2_Hsv(RGB),
        row  = TablBody.insertRow(-1),
        col  = 0;
 
      row.insertCell(col++).textContent = BtColor.value;
      row.insertCell(col++).textContent = `${RGB.r}, ${RGB.g}, ${RGB.b}`;
      row.insertCell(col++).textContent = `${HSV.h}, ${HSV.s}, ${HSV.v}`;
      row.insertCell(col++).innerHTML   = `<div style="background:${BtColor.value}"></div>`;
    }
 
    function HashRGB_2_rgb(hexColor)    // ex: #77d251;
    { 
      let 
        HexT = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor),
        r = parseInt(HexT[1], 16),
        g = parseInt(HexT[2], 16),
        b = parseInt(HexT[3], 16)
      ;
      return {r,g,b}
    }
 
    function rgb_2_Hsv(colors)
    { 
      let
        r     = colors.r,
        g     = colors.g,
        b     = colors.b,
        cmin  = Math.min(r, g, b),
        cmax  = Math.max(r, g, b),
        delta = cmax - cmin,
        h     = 0,            // [ 0, 359] Hue  =Teinte (360°)
        s     = 0,            // [0, 100]  Saturation
        v     = cmax/255      // [0, 100]  Valeur (de Lunminosité, mais != formats HSL / TSL )
      ;
      if (cmax && delta) 
      {
        s = delta/cmax;
 
        switch (cmax) {
          case r : h = ( g - b ) / delta;     break;
          case g : h = 2 + ( b - r ) / delta; break;
          case b : h = 4 + ( r - g ) / delta; break;
        }
        h *= 60;
        if (h < 0) h += 360; 
      } 
 
      // suivant la précision désirée ( si h,s,v sont entières -> moins de précision qu'en RGB )
      h = Math.round(h*100)/100;    
      s = Math.round(s*10000)/100;
      v = Math.round(v*10000)/100;
 
      return  { h, s, v } ;
    }
  </script>
 
</body>
</html>