|
Dieses JavaScript hilft bei der Bestimmung der genauen Farbabstufung. Einfach die Farbnummer als Hex Zahl eingeben und die Skalierung. Das JavaScript gibt dann eine Grafik von einer dunklen, bis zu einer hellen Farbschattierung aus. Einfach mit der Maus auf die gewünschte Farbe klicken und schon hat man den wenünschten Hex- Code.
Autor: Joseph Myers
zur Demo
in den <head> einfügen
<!-- by: Joseph Myers | http://www.codelib.net -->
<script type="text/javascript">
function colorscale(hexstr, scalefactor) {
/* declared variables first, in order;
afterwards, undeclared local variables */
var r = scalefactor;
var a, i;
if (r < 0 || typeof(hexstr) != 'string')
return hexstr;
hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
if (hexstr.length == 3) {
a = hexstr.split('');
} else if (hexstr.length == 6) {
a = hexstr.match(/(\w{2})/g);
} else
return hexstr;
for (i=0; i<a.length; i++) {
if (a[i].length == 2)
a[i] = parseInt(a[i], 16);
else {
a[i] = parseInt(a[i], 16);
a[i] = a[i]*16 + a[i];
}
}
var maxColor = parseInt('ff', 16);
function relsize(a) {
if (a == maxColor)
return Infinity;
return a/(maxColor-a);
}
function relsizeinv(y) {
if (y == Infinity)
return maxColor;
return maxColor*y/(1+y);
}
for (i=0; i<a.length; i++) {
a[i] = relsizeinv(relsize(a[i])*r);
a[i] = Math.floor(a[i]).toString(16);
if (a[i].length == 1)
a[i] = '0' + a[i];
}
return a.join('');
}
function showrainbow(f) {
var colorcell, hex, i, nhex;
hex = f.orig.value;
hex = hex.replace(/\W/g, '');
nhex = colorscale(hex, f.scalef.value-0);
if (nhex != hex) {
f.outp.value = nhex;
colorcell = document.getElementById('origcolor');
i = document.getElementById('newcolor');
colorcell.style.background = '#' + hex;
i.style.background = '#' + nhex;
for (i=0; i<256; i++) {
colorcell = document.getElementById('colorcell'+i);
nhex = colorscale(hex, i/(256-i));
colorcell.style.background = '#' + nhex;
colorcell.nhexvalue = nhex;
}
}
}
</script>
in den <body>
<div style="width: 400px;">
<form>
<p>
Original color: <input type="text" name="orig" value="C6C6C6"><br>
Scale factor: <input type="text" name="scalef" value="4"><br>
<input type="button" value="Output" onclick="showrainbow(this.form)">
<input type="text" readonly name="outp" style="border: none;">
</p>
</form>
<table width="150">
<tr>
<td width="50%" height="50" id="origcolor">Original</td>
<td width="50%" id="newcolor">New</td></tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<script type="text/javascript">
for (i=0; i<256; i++)
document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
</script>
</tr>
</table>
</div>
|