12 svar · 3 439 visningar · startad av xtreme
På http://www.colormatch.dk kan man ju få hjälp att hitta en matchande färg. Någon som vet fall det finns någon colormatch där man kan skriva in sin färg man vill ha match från i ett hex-nummer, så att man slipper "gissa" fram färgen med "spakarna" som på http://www.colormatch.dk och i stället skriva in den exakta färgen!
Det var synd, men kontakta dem och påpeka önskemålet. Rolig grej!
Du behöver inte gisa. Under den första rutan står den färgen du ställer in med spakarna.
Jag uppfattar frågan som att han vill kunna skriva in "huvudrutans" färgkod och därmed få reda på vilka andra färger som matchar.
Dock känner jag inte till någon dylik tjänst, samt jag fixar inte att skriva om scriptet. :(
Här är en modifierad variant av koden.
<html>
<head>
<title>ColorMatch 5K</title>
<style>
.s
{
border:inset 1;width:50
}
.s2
{
border:outset 1;width:19;height:19;background-color:#E6E6E6;position:absolute;left:1;top:1
}
.t
{
font:11px tahoma;color:#555555
}
.t2
{
font:bold 36px verdana
}
</style>
</head>
<script language="JavaScript">
<!--
var mover=moveg=moveb=moveh=0;
var hs=new Object();
var rg=new Object();
rg.r=rg.g=rg.b=0;
function colorFromHex(hex)
{
var red = hex.substring(0,2);
var green = hex.substring(2,4);
var blue = hex.substring(4,6);
click(parseInt(red,16)+10,"r");
click(parseInt(green,16)+10,"g");
click(parseInt(blue,16)+10,"b");
}
function click(x,s)
{
if(x<10)
{
x=10
}
if(x>265)
{
x=265
}
x-=10;
eval("h"+s+".style").left=x+1;
eval("rg."+s+"="+x);
rg2hs(rg);
ud("0",rg);
sw.style.backgroundColor="rgb("+rg.r+","+rg.g+","+rg.b+")";
dom();
}
function bclick(s)
{
x=window.event.offsetX+eval("h"+s+".style.pixelLeft-1");
click(x,s);
}
function sc(s)
{
x=window.event.offsetX;
click(x,s);
}
function movee(s)
{
eval("move"+s+"=0")
}
function rc(x,m)
{
if(x>m)
{
return m
}
if(x<0)
{
return 0
}
else
{
return x
}
}
function rg2hs(rg)
{
m=rg.r;
if(rg.g<m)
{
m=rg.g
}
if(rg.b<m)
{
m=rg.b
}
v=rg.r;
if(rg.g>v)
{
v=rg.g
}
if(rg.b>v)
{
v=rg.b
}
value=100*v/255;
delta=v-m;
if(v==0.0)
{
hs.s=0
}
else
{
hs.s=100*delta/v
}
if(hs.s==0)
{
hs.h=0
}
else
{
if(rg.r==v)
{
hs.h=60.0*(rg.g-rg.b)/delta
}
else if(rg.g==v)
{
hs.h=120.0+60.0*(rg.b-rg.r)/delta
}
else if(rg.b=v)
{
hs.h=240.0+60.0*(rg.r-rg.g)/delta
}
if(hs.h<0.0)
{
hs.h=hs.h+360.0
}
}
hs.v=Math.round(value);
hs.h=Math.round(hs.h);
hs.s=Math.round(hs.s);
return(true);
}
function rg2html(z)
{
return "#"+d2h(z.r)+d2h(z.g)+d2h(z.b);
}
function d2h(d)
{
hch="0123456789ABCDEF";
a=d%16;
b=(d-a)/16;
return hch.charAt(b)+hch.charAt(a);
}
function c2r(d)
{
k=window.event.srcElement.style.backgroundColor;
j=(k.substr(4,k.indexOf(")")-4)).split(",");
click(parseInt(j[0])+10,"r");
click(parseInt(j[1])+10,"g");
click(parseInt(j[2])+10,"b");
}
function h2r(hs)
{
var rg=new Object();
if(hs.s==0)
{
rg.r=rg.g=rg.b=Math.round(hs.v*2.55);
return rg;
}
hs.s=hs.s/100;
hs.v=hs.v/100;
hs.h/=60;
i=Math.floor(hs.h);
f=hs.h-i;
p=hs.v*(1-hs.s);
q=hs.v*(1-hs.s*f);
t=hs.v*(1-hs.s*(1-f));
switch(i)
{
case 0:
rg.r=hs.v;
rg.g=t;
rg.b=p;
break;
case 1:
rg.r=q;
rg.g=hs.v;
rg.b=p;
break;
case 2:
rg.r=p;
rg.g=hs.v;
rg.b=t;
break;
case 3:
rg.r=p;
rg.g=q;
rg.b=hs.v;
break;
case 4:
rg.r=t;
rg.g=p;
rg.b=hs.v;
break;
default:
rg.r=hs.v;
rg.g=p;
rg.b=q;
}
rg.r=Math.round(rg.r*255);
rg.g=Math.round(rg.g*255);
rg.b=Math.round(rg.b*255);
return rg;
}
function ps(x)
{
document.write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'+x+'" onClick="c2r()" title="Click to promote to primary color"></div></td>');
}
function ph(x)
{
document.write('<td><div class=t id="hc'+x+'">#000000</div></td>');
}
function ud(x,c)
{
eval("sw"+x).style.backgroundColor="rgb("+c.r+","+c.g+","+c.b+")";
eval("hc"+x).innerHTML=rg2html(c)
}
function pl(t,c,l)
{
document.write('<div style="position:absolute;left:30;top:'+t+';background-color:black"><div class=s style="width:276;height:21;background-color:'+c+';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'+l+'=1;sc(\\''+l+'\\');" onMouseMove="if(move'+l+'==1){sc(\\''+l+'\\');}"></div><div class=s2 id=h'+l+' onMouseDown="move'+l+'=1;bclick(\\''+l+'\\');" onMouseUp="movee(\\''+l+'\\');" onMouseMove="if(move'+l+'==1){bclick(\\''+l+'\\');}"></div></div>')
}
function dom()
{
z=new Object();
y=new Object();
yx=new Object();
y.s=hs.s;
y.h=hs.h;
if(hs.v>70)
{
y.v=hs.v-30
}
else
{
y.v=hs.v+30
}
z=h2r(y);
ud("1",z);
if((hs.h>=0)&&(hs.h<30))
{
yx.h=y.h=hs.h+20;
yx.s=y.s=hs.s;
y.v=hs.v;
if(hs.v>70)
{
yx.v=hs.v-30
}
else
{
yx.v=hs.v+30
}
}
if((hs.h>=30)&&(hs.h<60))
{
yx.h=y.h=hs.h+150;
y.s=rc(hs.s-30,100);
y.v=rc(hs.v-20,100);
yx.s=rc(hs.s-70,100);
yx.v=rc(hs.v+20,100);
}
if((hs.h>=60)&&(hs.h<180))
{
yx.h=y.h=hs.h-40;
y.s=yx.s=hs.s;
y.v=hs.v;
if(hs.v>70)
{
yx.v=hs.v-30
}
else
{
yx.v=hs.v+30
}
}
if((hs.h>=180)&&(hs.h<220))
{
yx.h=hs.h-170;
y.h=hs.h-160;
yx.s=y.s=hs.s;
y.v=hs.v;
if(hs.v>70)
{
yx.v=hs.v-30
}
else
{
yx.v=hs.v+30
}
}
if((hs.h>=220)&&(hs.h<300))
{
yx.h=y.h=hs.h;
yx.s=y.s=rc(hs.s-60,100);
y.v=hs.v;
if(hs.v>70)
{
yx.v=hs.v-30
}
else
{
yx.v=hs.v+30
}
}
if(hs.h>=300)
{
if(hs.s>50)
{
y.s=yx.s=hs.s-40
}
else
{
y.s=yx.s=hs.s+40
}
yx.h=y.h=(hs.h+20)%360;
y.v=hs.v;
if(hs.v>70)
{
yx.v=hs.v-30
}
else
{
yx.v=hs.v+30
}
}
z=h2r(y);
ud("2",z);
z=h2r(yx);
ud("3",z);
y.h=0;
y.s=0;
y.v=100-hs.v;
z=h2r(y);
ud("4",z);
y.h=0;
y.s=0;
y.v=hs.v;
z=h2r(y);
ud("5",z);
}
//-->
</script>
<body onMouseUp="mover=moveg=moveb=0;" bgcolor=#E6E6E6 leftmargin=30 topmargin=30 class=t>
<div style="width:400"><span class=t2>ColorMatch 5K</span><br>
<br>
This utility will help you select a matching 6-color palette for your website.<br>
Define a single color that you like. Matching colors will be calculated.<br>
Click a color in the palette to promote it to the primary color.<br>
<br>
<b><br>
I like this color:<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
6-color matching palette:</b></div>
<b>
<script>pl(170,"red","r");pl(200,"green","g");pl(230,"blue","b")</script>
<div class=s id=sw style="position:absolute;left:316;top:170;height:81;width:82;background-color:black;"></div>
<div style="position:absolute;left:20;top:290;">
<table cellspacing=10 cellpadding=0>
<tr>
<script>ps(0);ps(1);ps(2);ps(3);ps(4);ps(5);</script>
</tr>
<tr>
<script>ph(0);ph(1);ph(2);ph(3);ph(4);ph(5);</script>
</tr>
<tr>
<td colspan="5">
<form name="hexForm">
#<input type="text" name="hex"> <input type="button" value="show" onclick="colorFromHex(document.hexForm.hex.value);">
</form>
</td>
</tr>
</table>
</div>
</b>
</body>
</html>
Det borde funka om du kör IE
CyberPet skrev:
Tryptomine, jag provade detta men det funkade inte alls. :(
Bra initiativ dock!
Tryptomine skrev:
Det borde funka om du kör IE
CyberPet skrev:
Tryptomine, jag provade detta men det funkade inte alls. :(
Bra initiativ dock!
Funkar tyvärr inte för mig heller. IE6, winXP
Jag får detta felet:
Line: 405
Char: 1
Error: Object expected
Code: 0
Line 405:
<form name="hexForm">
Jag testade att klippa koden från forumet, och ni har ju rätt i att den inte funkade. Man kan visst inte skriva back-slash i kodstycken. Jag har editerat inlägget nu, så det bör nog funka bättre.
Nu fungerar det, bra jobbat! :D
Nu funkar det! KANON!!! (synd att det bara funkar för IE förresten, jag kör Mozilla). Denna är skön att ha i verktygslådan. TACK! :)
rolig sak måste jag säga :D
