Главная » Ява скрипты » Генератор цветовых кодов
23:58
Code
<style>
BODY { MARGIN: 0px; WIDTH: 100%; HEIGHT: 100%}
A:link { FONT-WEIGHT: bold; COLOR: #0000cc; LINE-HEIGHT: 25px}
A.small { FONT-WEIGHT: normal; COLOR: #0000cc; LINE-HEIGHT: 20px}
UL { PADDING-RIGHT: 0px; MARGIN-TOP: 2px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 16px; PADDING-TOP: 0px}
LI { PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 2px}
#Wheel { BORDER-RIGHT: #cccccc 1px solid; LEFT: 166px; WIDTH: 424px; POSITION: absolute; TOP: 70px; HEIGHT: 370px; TEXT-ALIGN: center}
#Header { PADDING-RIGHT: 12px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 12px; BACKGROUND: url(./topbg.gif); PADDING-BOTTOM: 6px; FONT: 23px tahoma,arial,helvetica; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; PADDING-TOP: 6px; BORDER-BOTTOM: #aaaaaa 1px solid; POSITION: relative}
#ColorInput { BORDER-RIGHT: #aaaaaf 1px solid; FONT: bold 13px verdana,arial,helvetica; WIDTH: 140px; COLOR: #444444; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #f4f4f2; TEXT-ALIGN: center}
#rightBox { LEFT: 610px; FONT: 11px arial,helvetica; WIDTH: 166px; COLOR: #444444; POSITION: absolute; TOP: 198px}
#forumsBox { LEFT: 610px; FONT: 11px arial,helvetica; WIDTH: 166px; COLOR: #444444; POSITION: absolute; TOP: 386px}
#listBox { BORDER-RIGHT: #aaaaaf 1px solid; BORDER-TOP: #aaaaaf 1px solid; LEFT: 610px; FONT: 11px verdana,arial,helvetica; BORDER-LEFT: #aaaaaf 1px solid; WIDTH: 166px; COLOR: #444444; BORDER-BOTTOM: #aaaaaf 1px solid; POSITION: absolute; TOP: 80px; BACKGROUND-COLOR: #f4f4f2}
.rightText { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; FONT: 11px tahoma,arial,helvetica; COLOR: #666666; PADDING-TOP: 6px}
#palette { LEFT: 158px; POSITION: absolute; TOP: 450px}
.navBox { BORDER-RIGHT: #e6e6e6 1px solid; WIDTH: auto; PADDING-TOP: 8px; BORDER-BOTTOM: #e6e6e6 1px solid; HEIGHT: auto; BACKGROUND-COLOR: #fcfcfa}
#currentColor { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; WIDTH: auto; CURSOR: hand; BORDER-BOTTOM: 1px solid; HEIGHT: 90px; BACKGROUND-COLOR: #ffffff}
.headSmall { MARGIN-TOP: 2px; FONT: 11px tahoma,arial,helvetica; COLOR: #666666}
.sideHead { BORDER-TOP: #ffffff 1px solid; FONT: bold 11px/25px tahoma,arial,helvetica; WIDTH: auto; COLOR: #777777; BORDER-BOTTOM: #aaaaaf 1px solid; BACKGROUND-COLOR: #e8e8e6; TEXT-ALIGN: center}
.rgbBox { FONT: 13px tahoma,arial,helvetica; WIDTH: 30px; COLOR: #444444; TEXT-ALIGN: center}
.hexBox { FONT: 13px tahoma,arial,helvetica; WIDTH: 54px; COLOR: #444444; TEXT-ALIGN: center}
.button { MARGIN-TOP: 4px; MARGIN-BOTTOM: 10px; FONT: 11px tahoma,arial,helvetica; WIDTH: 90px; COLOR: #333333; HEIGHT: 23px}
.currentBorder { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #9d9da1 1px solid; MARGIN: 10px; BORDER-LEFT: #9d9da1 1px solid; WIDTH: auto; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: auto}
#swatch0 { LEFT: 0px; POSITION: absolute; TOP: 0px}
#swatch1 { LEFT: 100px; POSITION: absolute; TOP: 0px}
#swatch2 { LEFT: 200px; POSITION: absolute; TOP: 0px}
#swatch3 { LEFT: 300px; POSITION: absolute; TOP: 0px}
#swatch4 { LEFT: 300px; POSITION: absolute; TOP: 90px}
#swatch5 { LEFT: 300px; POSITION: absolute; TOP: 180px}
#swatch6 { LEFT: 300px; POSITION: absolute; TOP: 270px}
#swatch7 { LEFT: 200px; POSITION: absolute; TOP: 270px}
#swatch8 { LEFT: 100px; POSITION: absolute; TOP: 270px}
#swatch9 { LEFT: 0px; POSITION: absolute; TOP: 270px}
#swatch10 { LEFT: 0px; POSITION: absolute; TOP: 180px}
#swatch11 { LEFT: 0px; POSITION: absolute; TOP: 90px}
#swatchm1 { LEFT: 100px; POSITION: absolute; TOP: 90px}
#swatchm2 { LEFT: 200px; POSITION: absolute; TOP: 90px}
#swatchm3 { LEFT: 200px; POSITION: absolute; TOP: 180px}
#swatchm4 { LEFT: 100px; POSITION: absolute; TOP: 180px}
.swatch { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; WIDTH: 90px; PADDING-TOP: 10px; TEXT-ALIGN: center}
.color { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 70px; CURSOR: hand; BORDER-BOTTOM: 1px solid; HEIGHT: 54px; BACKGROUND-COLOR: #ffffff}
.border { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #9d9da1 1px solid; MARGIN-LEFT: auto; BORDER-LEFT: #9d9da1 1px solid; WIDTH: 72px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 56px}
.rgb { FONT: 11px tahoma,arial,helvetica}
.hex { FONT: 11px tahoma,arial,helvetica}
</style>
<SCRIPT type=text/javascript>
var HSL = new Object();
var RGB = new Object();
var tempRGB = new Object();
RGB.R = RGB.G = RGB.B = 0;
tempRGB.R = tempRGB.G = tempRGB.B = 0;
HSL.H = HSL.S = HSL.L = 0;
var HEXCodes = new Array(256);
var k = 0;
var HEX = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
for (i = 0; i < 16; i++)
{
for (j = 0; j < 16; j++)
{
HEXCodes[k] = HEX[i] + HEX[j];
k++;
}
}
function SetHex(bgColor)
{
var i=0;
if(bgColor.substring(0,3)=="rgb") {
bgColor = bgColor.substring(4,bgColor.length-1);
rgbArray = bgColor.split(", ");
ChangeColors(rgbArray[0],rgbArray[1],rgbArray[2]);
exit;
}
if(bgColor.length==0) return;
if(bgColor.length==7) bgColor=bgColor.substring(1,7);
if(bgColor.length<6){
alert("You must enter a 6 character HEX value!");
return;
}
bgColor=bgColor.toUpperCase();
for (j = 0; j < 6; j++) {
if (!isHex(bgColor.charAt(j))){
alert("You may only enter values between A-F and 0-9!");
return false;
}
}
while(HEXCodes[i] != bgColor.substring(0,2).toUpperCase()) i++;
RGB.R=i;
i=0;
while(HEXCodes[i] != bgColor.substring(2,4).toUpperCase()) i++;
RGB.G=i;
i=0;
while(HEXCodes[i] != bgColor.substring(4,6).toUpperCase()) i++;
RGB.B=i;
ChangeColors(RGB.R,RGB.G,RGB.B);
}
function isHex(hexChar) {
for (k = 0; k < HEX.length; k++) {
if (hexChar == HEX[k]) {
return true;
}
}
return false;
}
function ChangeColors(r,g,b)
{
if (r>255) r=255;
if (g>255) g=255;
if (b>255) b=255;
if (r<0) r=0;
if (g<0) g=0;
if (b<0) b=0;
if(!(r>=0)&&!(r<=255)) r=0
if(!(g>=0)&&!(g<=255)) g=0
if(!(b>=0)&&!(b<=255)) b=0
RGB.R=r;
RGB.G=g;
RGB.B=b;
document.getElementById('codes').r.value=r;
document.getElementById('codes').g.value=g;
document.getElementById('codes').b.value=b;
document.getElementById('codes').hex.value=HEXCodes[r]+HEXCodes[g]+HEXCodes[b];
document.getElementById('currentColor').style.backgroundColor="#"+HEXCodes[r]+HEXCodes[g]+HEXCodes[b];
DrawWheel();
}
function DrawWheel()
{
var red,green,blue,direction;
RGBtoHSL(RGB.R,RGB.G,RGB.B);
for (i = 0; i < 12; i++)
{
HSLtoRGB(HSL.H,HSL.S,HSL.L);
red=HEXCodes[tempRGB.R];
green=HEXCodes[tempRGB.G];
blue=HEXCodes[tempRGB.B];
document.getElementById(i).style.backgroundColor="#" + red + green + blue;
document.getElementById(i+'HEX').innerHTML="#" + red + green + blue;
document.getElementById(i+'RGB').innerHTML=tempRGB.R+"."+tempRGB.G+"."+tempRGB.B;
HSL.H+=30;
if (HSL.H>=360)
HSL.H-=360;
}
RGBtoHSL(RGB.R,RGB.G,RGB.B);
for (i = 1; i <= 4; i++)
{
if(i==3){
RGBtoHSL(RGB.R,RGB.G,RGB.B);
HSL.H+=180;
if (HSL.H>=360) HSL.H-=360;
}
if(i==1){
if(HSL.L<60)
direction=1;
else
direction=-1;
}
HSL.L+=direction*12;
HSLtoRGB(HSL.H,HSL.S,HSL.L);
red=HEXCodes[tempRGB.R];
green=HEXCodes[tempRGB.G];
blue=HEXCodes[tempRGB.B];
document.getElementById('m'+i).style.backgroundColor="#" + red + green + blue;
document.getElementById('m'+i+'HEX').innerHTML="#" + red + green + blue;
document.getElementById('m'+i+'RGB').innerHTML=tempRGB.R+"."+tempRGB.G+"."+tempRGB.B;
}
}
function LightenScheme()
{
RGBtoHSL(RGB.R,RGB.G,RGB.B);
HSL.L=HSL.L+5;
if(HSL.L>100) HSL.L=100;
HSLtoRGB(HSL.H,HSL.S,HSL.L);
ChangeColors(tempRGB.R,tempRGB.G,tempRGB.B);
}
function DarkenScheme()
{
RGBtoHSL(RGB.R,RGB.G,RGB.B);
HSL.L=HSL.L-5;
if(HSL.L<0) HSL.L=0;
HSLtoRGB(HSL.H,HSL.S,HSL.L);
ChangeColors(tempRGB.R,tempRGB.G,tempRGB.B);
}
function HSLtoRGB(H,S,L)
{
var p1,p2;
L/=100;
S/=100;
if (L<=0.5) p2=L*(1+S);
else p2=L+S-(L*S);
p1=2*L-p2;
if (S==0)
{
tempRGB.R=L;
tempRGB.G=L;
tempRGB.B=L;
}
else
{
tempRGB.R=FindRGB(p1,p2,H+120);
tempRGB.G=FindRGB(p1,p2,H);
tempRGB.B=FindRGB(p1,p2,H-120);
}
tempRGB.R *= 255;
tempRGB.G *= 255;
tempRGB.B *= 255;
tempRGB.R=Math.round(tempRGB.R);
tempRGB.G=Math.round(tempRGB.G);
tempRGB.B=Math.round(tempRGB.B);
}
function FindRGB(q1,q2,hue)
{
if (hue>360) hue=hue-360;
if (hue<0) hue=hue+360;
if (hue<60) return (q1+(q2-q1)*hue/60);
else if (hue<180) return(q2);
else if (hue<240) return(q1+(q2-q1)*(240-hue)/60);
else return(q1);
}
function RGBtoHSL(r,g,b)
{
var Min=0;
var Max=0;
r=(eval®/51)*.2;
g=(eval(g)/51)*.2;
b=(eval(b)/51)*.2;
if (eval®>=eval(g))
Max=eval®;
else
Max=eval(g);
if (eval(b)>eval(Max))
Max=eval(b);
if (eval®<=eval(g))
Min=eval®;
else
Min=eval(g);
if (eval(b)<eval(Min))
Min=eval(b);
HSL.L=(eval(Max)+eval(Min))/2;
if (eval(Max)==eval(Min))
{
HSL.S=0;
HSL.H=0;
}
else
{
if (HSL.L < .5)
HSL.S=(eval(Max)-eval(Min))/(eval(Max)+eval(Min));
if (HSL.L >= .5)
HSL.S=(eval(Max)-eval(Min))/(2-eval(Max)-eval(Min));
if (r==Max)
HSL.H = (eval(g)-eval(b))/(eval(Max)-eval(Min));
if (g==Max)
HSL.H = 2+((eval(b)-eval®)/(eval(Max)-eval(Min)));
if (b==Max)
HSL.H = 4+((eval®-eval(g))/(eval(Max)-eval(Min)));
}
HSL.H=Math.round(HSL.H*60);
if(HSL.H<0) HSL.H += 360;
if(HSL.H>=360) HSL.H -= 360;
HSL.S=Math.round(HSL.S*100);
HSL.L=Math.round(HSL.L*100);
}
function DrawPalette()
{
var outer, middle, inner=255;
document.write('<div ID="palette">');
document.write('<table cellpadding=0 cellspacing=1 border=0 bgcolor="#000000">');
document.write('<tr>');
for (outer = 255; outer >= 0; outer-=51)
{
for (middle = 255; middle >= 0; middle-=51)
{
for (inner = 255; inner >= 0; inner-=51)
{
tR=HEXCodes[255 - outer];
tG=HEXCodes[255 - middle];
tB=HEXCodes[255 - inner];
document.write('<td height="11" width="11" bgcolor="#'+tR+tG+tB+'"><a href="#" onClick="ChangeColors('+(255 - outer)+','+(255 - middle)+','+(255 - inner)+'); return false;"><img src="clear.gif" border="0" width="11" height="11" /></a></td>');
}
}
if(outer!=0) document.write('</tr><tr>');
}
document.write('</tr>');
document.write('</table>');
document.write('</div>');
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#fcfcf9 leftMargin=0 topMargin=0
onload=ChangeColors(51,102,255); rightMargin=0 marginwidth="0" marginheight="0">
<DIV id=ColorInput>
<DIV class=sideHead>Выбранный цвет</DIV>
<DIV class=currentBorder>
<DIV id=currentColor></DIV></DIV>
<FORM id=codes name=codes>
<DIV class=currentBorder>
<DIV class=navBox>
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>R:</TD>
<TD><INPUT class=rgbBox maxLength=3 value=0 name=r></TD></TR>
<TR>
<TD>G:</TD>
<TD><INPUT class=rgbBox maxLength=3 value=0 name=g></TD></TR>
<TR>
<TD>B:</TD>
<TD><INPUT class=rgbBox maxLength=3 value=0 name=b></TD></TR>
<TR>
<TD colSpan=2><INPUT class=button onclick="ChangeColors(document.getElementById('codes').r.value,document.getElementById('codes').g.value,document.getElementById('codes').b.value);" type=button value="Set RGB"></TD></TR>
<TR>
<TD colSpan=2>#<INPUT class=hexBox maxLength=6 value=000000 name=hex></TD></TR>
<TR>
<TD colSpan=2><INPUT class=button onclick="SetHex(document.getElementById('codes').hex.value);" type=button value="Set HEX"></TD></TR></TBODY></TABLE><INPUT class=button style="MARGIN-BOTTOM: 0px" onclick=LightenScheme(); type=button value="Светлее">
<INPUT class=button onclick=DarkenScheme(); type=button value="Темнее">
</DIV></DIV></FORM></DIV>
<DIV id=Wheel align=center>
<DIV class=swatch id=swatch0>
<DIV class=border>
<DIV class=color id=0 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=0RGB>255.255.255</DIV>
<DIV class=hex id=0HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch1>
<DIV class=border>
<DIV class=color id=1 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=1RGB>255.255.255</DIV>
<DIV class=hex id=1HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch2>
<DIV class=border>
<DIV class=color id=2 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=2RGB>255.255.255</DIV>
<DIV class=hex id=2HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch3>
<DIV class=border>
<DIV class=color id=3 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=3RGB>255.255.255</DIV>
<DIV class=hex id=3HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch4>
<DIV class=border>
<DIV class=color id=4 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=4RGB>255.255.255</DIV>
<DIV class=hex id=4HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch5>
<DIV class=border>
<DIV class=color id=5 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=5RGB>255.255.255</DIV>
<DIV class=hex id=5HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch6>
<DIV class=border>
<DIV class=color id=6 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=6RGB>255.255.255</DIV>
<DIV class=hex id=6HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch7>
<DIV class=border>
<DIV class=color id=7 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=7RGB>255.255.255</DIV>
<DIV class=hex id=7HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch8>
<DIV class=border>
<DIV class=color id=8 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=8RGB>255.255.255</DIV>
<DIV class=hex id=8HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch9>
<DIV class=border>
<DIV class=color id=9 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=9RGB>255.255.255</DIV>
<DIV class=hex id=9HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch10>
<DIV class=border>
<DIV class=color id=10 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=10RGB>255.255.255</DIV>
<DIV class=hex id=10HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatch11>
<DIV class=border>
<DIV class=color id=11 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=11RGB>255.255.255</DIV>
<DIV class=hex id=11HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatchm1>
<DIV class=border>
<DIV class=color id=m1 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=m1RGB>255.255.255</DIV>
<DIV class=hex id=m1HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatchm2>
<DIV class=border>
<DIV class=color id=m2 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=m2RGB>255.255.255</DIV>
<DIV class=hex id=m2HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatchm3>
<DIV class=border>
<DIV class=color id=m3 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=m3RGB>255.255.255</DIV>
<DIV class=hex id=m3HEX>#FFFFFF</DIV></DIV>
<DIV class=swatch id=swatchm4>
<DIV class=border>
<DIV class=color id=m4 onclick=SetHex(this.style.backgroundColor);></DIV></DIV>
<DIV class=rgb id=m4RGB>255.255.255</DIV>
<DIV class=hex id=m4HEX>#FFFFFF</DIV></DIV></DIV>
<SCRIPT language=JavaScript>DrawPalette();</SCRIPT>
<DIV style="VISIBILITY: hidden">
<SCRIPT language=JavaScript
type=text/javascript>var site="sm4colorschemer"</SCRIPT>
</DIV></BODY>
Скрипт в прикреплении.
