---
title: "sida som http://www.colormatch.dk fast så man kan skriva hex-tal?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/design-grafik/69078-sida-som-http-www-colormatch-dk-fast-så-man-kan-skriva-hex-tal"
topic: "Design & grafik"
topic_url: "https://www.webforum.nu/amne/design-grafik"
author: "xtreme"
published: "2003-02-22T19:05:51.000Z"
updated: "2003-02-24T07:56:19.000Z"
replies: 12
views: 3454
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/design-grafik/69078-sida-som-http-www-colormatch-dk-fast-så-man-kan-skriva-hex-tal"
---

# sida som http://www.colormatch.dk fast så man kan skriva hex-tal?

## #1 — xtreme, 2003-02-22T19:05Z

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!

Permalänk: https://www.webforum.nu/p/69078

## #2 — CyberPet, 2003-02-22T20:47Z

Det var synd, men kontakta dem och påpeka önskemålet. Rolig grej!

Permalänk: https://www.webforum.nu/p/959011

## #3 — Tryptomine, 2003-02-22T21:42Z

Du behöver inte gisa. Under den första rutan står den färgen du ställer in med spakarna.

Permalänk: https://www.webforum.nu/p/959045

## #4 — solbulle, 2003-02-22T23:05Z

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. :(

Permalänk: https://www.webforum.nu/p/959068

## #5 — Tryptomine, 2003-02-23T00:06Z

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">&nbsp;<input type="button" value="show" onclick="colorFromHex(document.hexForm.hex.value);">
      </form>
    </td>
    </tr>
  </table>
</div>
</b>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/959089

## #6 — CyberPet, 2003-02-23T00:18Z

Tryptomine, jag provade detta men det funkade inte alls. :( 

Bra initiativ dock!

Permalänk: https://www.webforum.nu/p/959091

## #7 — Tryptomine, 2003-02-23T08:34Z

Det borde funka om du kör IE

> **CyberPet skrev:**
>
> Tryptomine, jag provade detta men det funkade inte alls. :( 
> 
> Bra initiativ dock!

Permalänk: https://www.webforum.nu/p/959129

## #8 — Peeer, 2003-02-23T08:39Z

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

Permalänk: https://www.webforum.nu/p/959133

## #9 — Del Pero, 2003-02-23T08:43Z

Jag får detta felet:

Line: 405
Char: 1
Error: Object expected
Code: 0
 

Line 405:

```
<form name="hexForm">
```

Permalänk: https://www.webforum.nu/p/959134

## #10 — Tryptomine, 2003-02-23T09:51Z

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.

Permalänk: https://www.webforum.nu/p/959147

## #11 — Del Pero, 2003-02-23T11:53Z

Nu fungerar det, bra jobbat! :D

Permalänk: https://www.webforum.nu/p/959219

## #12 — CyberPet, 2003-02-23T19:17Z

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! :)

Permalänk: https://www.webforum.nu/p/959454

## #13 — voigtann1, 2003-02-24T07:56Z

rolig sak måste jag säga :D

Permalänk: https://www.webforum.nu/p/959714

---

Tråden på webben: https://www.webforum.nu/amne/design-grafik/69078-sida-som-http-www-colormatch-dk-fast-så-man-kan-skriva-hex-tal
