[javascript] 자바스크립트로 rgb 색상표 출력하기 html rgb색상 코드표 만들기

✈[javascript] 자바스크립트로 rgb 색상표 출력하기 html rgb색상 코드표 만들기

RGB색상 코드는 rgb(255,255,255)나 # FF FF FF 와 같이 흔히 표현되는데, 사실은 컴퓨터는 2진수만 이해한다. 

FF든 255든 사람이 보기 편하라고 표현한 형식이다. 아무튼 컴퓨터는 이 코드를 옥텟[Octet]단위로 끊어서 이해한다. 

옥텟이란?

옥텟이란 8개의 한 묶음이다. 달리표현하자면 바이트쯤 되겠지만 조금은 뉘앙스가 다른 개념이다. 

첫번째 옥텟은 R, 즉 RED를 뜻하고, 
두번째 옥텟은 G, 즉 Green을 뜻하고
세번째 옥텟은 B, 즉 Blue를 뜻한다. 

이 각 옥텟에서 이 세가지 색상의 빛의 정도를 표현한다. 

0이면 불이 꺼져있으니 어두운것이 되고, 모두 1로 채워지면 그만큼 밝은게 된다. 

따라서 #000000은 검은색, #FFFFFF는 흰색이 된다. (물감과 반대다) 

아무튼 이러한 개념으로 우리는 각 옥텟의 빛의 정도를 조정해 줌으로써 세상의 모든 색에 가까운 색을 표현하게 된다. 

그래봤자 256가지라고 우습게 볼지 몰라도 이게 만만치 않다. 

256가지 3가지의 경우의 수는 256^3=256*256*256=16,777,216가지이다. 

이걸 자바스크립트로 모두 표현해내기에는 자바스크립트의 연산범위를 초과한다. 

그러니 일단 원리를 파악하고자 흑백 색상표만 먼저 만들어 보자. 

<script>

var r,g,b;

var colorT;

for(var k=0;k<256;k=k+4)

{

r=k.toString(16);

if(r.length < 2) r = "0" + r;

g=k.toString(16);

if(g.length < 2) g = "0" + g;

b=k.toString(16);

if(b.length < 2) b = "0" + b;

colorT=r+g+b;

document.write("<div style=\"float:left; font-weight:bold;

text-align:center; width:120px;

height:20px; background-color:#"+colorT+";\">

");

document.write("#"+colorT);

document.write("</div>

");

}

</script>

<div style="TEXT-ALIGN: center; WIDTH: 120px; FLOAT: left; HEIGHT: 20px; FONT-WEIGHT: bold">#ffffff</div>        

이 소스상에서 가장 핵심은

r=k.toString(16); if(r.length < 2) r = "0" + r;

위의 두줄이다. r이라는 변수에 k십진수 값을 16진수로 변환시켜서 대입하라는 뜻이다. 

그렇게 g와 b변수도 얻어 내어 문자열로써 합쳐서 rgb색삭코드를 얻어 내는 것이 가장 핵심이다.

우리눈은 은근히 좋은듯 하지만 사실 그다지 좋지도 못하다. 

256단계의 색상을 모두 출력해서 봐봐야 그다지 단계성이 느껴지지 못하고 마치 그라데이션처럼 보인다. 

그래서 일부러 +4씩 증가하도록 해봤다. +4씩 증가하면 마지막에 FFFFF를 표현하지 못하기 때문에 html코드로 마지막 흰색을 장식해주었다. 

눈치 챘겠지만, R,G,B가 고루 증가해야 무채색 계열의 색상표가 만들어진다. 

그렇기 때문에 for문을 하나만 써도 됐다. 

하지만 전체 칼라를 표현하려면 세개의 옥텟이 모두 각각 따로 표현되어야 한다. 

그런 rgb색상표를 만들려면 3중 for문을 사용해야 한다. 

처음에 계산을 해보았지만, 256*256*256의 rgb 색상표 연산은 자바스크립트로는 무리다. 

물론 방법이 아주 없는 것도 아니지만...이런 rgb 색상표를 만들어 내기가 무리다. 

만들어내봤자...스크롤 하다보면 하루해가 저물지 모른다.

<script>

var r,g,b;

var colorT;

for(var i=0;i<256;i=i++)

{

for(var j=0;j<256;j=j++)

{

for(var k=0;k<256;k=k++)

{

r=i.toString(16);

if(r.length < 2) r = "0" + r;

g=j.toString(16);

if(g.length < 2) g = "0" + g;

b=k.toString(16);

if(b.length < 2) b = "0" + b;

colorT=r+g+b;

document.write("<div style=\"float:left; font-weight:bold;

text-align:center; width:120px;

height:20px; background-color:#"+colorT+";\">

");

document.write("#"+colorT);

document.write("</div>

");

}

}

}

</script>

위와 같이 코딩해서 돌려보면 왠만하면 에러가 뜰 것이다. 

자바스크립트로는 버겁기 때문이다. 

각 for문에서 대략 +1씩 증가시킬 것이 아니라 +25정도씩은 해줘야 겨우 출력물이 만들어진다. 

그것도 자바스크립트가 참아줄만큼의 시간을 충분히 다 쓰고 말이다. 

그렇다고 일률적으로 +25를 하면 굉장히 난해한 그림을 보게 될수도 있다. 

적절히 조정을 하면 예쁜 색상표를 얻을 수 있다.

다음에 시간이 되면

 

요런 에디터상에 놓이는 팔렛트를 그리는 법을 설명할 예정^^;

<div style="WIDTH: 700px; HEIGHT: auto">

<script>

var r,g,b;

var colorT;

for(var k=0;k<256;k=k+4)

{

r=k.toString(16);

if(r.length < 2) r = "0" + r;

g=k.toString(16);

if(g.length < 2) g = "0" + g;

b=k.toString(16);

if(b.length < 2) b = "0" + b;

colorT=r+g+b;

document.write("<div style=\"float:left; font-weight:bold;

text-align:center; width:120px;

height:20px; background-color:#"+colorT+";\">

");

document.write("#"+colorT);

document.write("</div>

");

}

</script>        

<div style="TEXT-ALIGN: center; WIDTH: 120px; FLOAT: left; HEIGHT: 20px; FONT-WEIGHT: bold">#ffffff</div>        

   

<script>

var r,g,b;

var colorT;

for(var i=0;i<256;i=i+25)

{

for(var j=0;j<256;j=j+16)

{

for(var k=0;k<256;k=k+18)

{

r=i.toString(16);

if(r.length < 2) r = "0" + r;

g=j.toString(16);

if(g.length < 2) g = "0" + g;

b=k.toString(16);

if(b.length < 2) b = "0" + b;

colorT=r+g+b;

document.write("<div style=\"float:left; font-weight:bold;

text-align:center; width:120px;

height:20px; background-color:#"+colorT+";\">

");

document.write("#"+colorT);

document.write("</div>

");

}

}

}

</script>        

   

<script>

var r,g,b;

var colorT;

for(var i=5;i<256;i=i+25)

{

for(var j=0;j<256;j=j+16)

{

for(var k=0;k<256;k=k+18)

{

   

r=i.toString(16);

if(r.length < 2) r = "0" + r;

g=j.toString(16);

if(g.length < 2) g = "0" + g;

b=k.toString(16);

if(b.length < 2) b = "0" + b;

colorT=r+g+b;

document.write("<div style=\"float:left; font-weight:bold;

text-align:center; width:120px;

height:20px; background-color:#"+colorT+";\">

");

document.write("#"+colorT);

document.write("</div>

");

}

}

}

</script>        

</div>