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