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> |
