Css Theme Creator Code

<table style="width:100%;font-size:13px;">
<tbody>
<tr>
<td>RGB</td>
<td rowspan="2" id="thisColor" style="background-color: rgb(255,0,0); padding: 1em; text-align: center; max-width: 40%;">
<div  style="background-color: #fff; padding: 1em; margin: 0.5em;border: 4px solid #000;">
<span id="rgbValue"></span><br>
<span id="hsvValue"></span>
</div>
</td>
<td>HSV</td>
</tr>
<tr>
<td style="width:85px;">
R: <input type="range" step="1" oninput="funcRGB()" 
onchange="funcRGB()" min="0" max="255" id="vR" value="255"><br>
G: <input type="range" step="1" oninput="funcRGB()" onchange="funcRGB()" min="0" max="255" id="vG" value="0"><br>
B: <input type="range" step="1" oninput="funcRGB()" onchange="funcRGB()" min="0" max="255" id="vB" value="0">
</td>
<td style="width:85px;">
H: <input type="range" step="1" oninput="funcHSV()" onchange="funcHSV()" min="0" max="360" id="vH" value="0"><br>
S: <input type="range" step="1" oninput="funcHSV()" onchange="funcHSV()" min="0" max="100" id="vS" value="100"><br>
V: <input type="range" step="1" oninput="funcHSV()" onchange="funcHSV()" min="0" max="100" id="vV" value="100">
</td>
</tr>
</tbody>
</table>
 
<script>
var vR = document.getElementById("vR");
var vG = document.getElementById("vG");
var vB = document.getElementById("vB");
 
var vH = document.getElementById("vH");
var vS = document.getElementById("vS");
var vV = document.getElementById("vV");
 
var thisColor = document.getElementById("thisColor");
var rgbValue = document.getElementById("rgbValue");
var hsvValue = document.getElementById("hsvValue");
 
rgbValue.innerHTML = "rgb(255,0,0)";
hsvValue.innerHTML = "hsv(0deg,100%,100%)";
 
function funcRGB() {
var r = vR.value, g = vG.value, b = vB.value, hsv;
hsv = RGBtoHSV(r, g, b);
vH.value = hsv.h * 100 / 255;
vS.value = hsv.s * 100 / 255;
vV.value = hsv.v * 100 / 255;
funcColor();
}
 
function funcHSV() {
var h = vH.value, s = vS.value, v = vV.value, rgb;
rgb = HSVtoRGB(h, s, v);
vR.value = rgb.r;
vG.value = rgb.g;
vB.value = rgb.b;
funcColor();
}
 
function funcColor() {
rgbValue.innerHTML = "rgb(" + vR.value + "," + vG.value + "," + vB.value + ")";
hsvValue.innerHTML = "hsv(" + vH.value + "deg," + vS.value + "%," + vV.value + "%)";
thisColor.style.backgroundColor = "rgb(" + vR.value + "," + vG.value + "," + vB.value + ")";
}
 
function RGBtoHSV (r, g, b, coneModel) {
var h, // 0..360
    s, v, // 0..255
    max = Math.max(Math.max(r, g), b),
    min = Math.min(Math.min(r, g), b);
// hue calc
if (max == min) {
    h = 0;
} else if (max == r) {
    h = 60 * (g - b) / (max - min) + 0;
} else if (max == g) {
    h = (60 * (b - r) / (max - min)) + 120;
} else {
    h = (60 * (r - g) / (max - min)) + 240;
}
while (h < 0) {
    h += 360;
}
// calc saturation
if (coneModel) {
    s = max - min;
} else {
    s = (max == 0)
        ? 0
        : (max - min) / max * 255;
}
// calc value
v = max;
return {'h': h, 's': s, 'v': v};
}
 
function HSVtoRGB (h, s, v) {
var r, g, b; // 0..255
while (h < 0) {
    h += 360;
}
h = h % 360;
//if saturation = 0
if (s == 0) {
    //RGB = V
    v = Math.round(v);
    return {'r': v, 'g': v, 'b': v};
}
s = s / 255;
var i = Math.floor(h / 60) % 6,
    f = (h / 60) - i,
    p = v * (1 - s),
    q = v * (1 - f * s),
    t = v * (1 - (1 - f) * s)
switch (i) {
    case 0 :
        r = v;  g = t;  b = p;  break;
    case 1 :
        r = q;  g = v;  b = p;  break;
    case 2 :
        r = p;  g = v;  b = t;  break;
    case 3 :
        r = p;  g = q;  b = v;  break;
    case 4 :
        r = t;  g = p;  b = v;  break;
    case 5 :
        r = v;  g = p;  b = q;  break;
}
return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)};
}
</script>
特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License