|
| R G B code |
|
| Web Safe Color |
web safe color란 그대로 직역하면 웹에서 안전한 칼라가 되겠네요. 웹에서 안전한 칼라가 아닌 것은 웹에서 위험한 칼라하는 뜻이 되겠군요. 여기서 안전하다는 것은 사용자 환경에 따라 변색되어 보일 수 있는 가능성이 아주 작다는 뜻입니다. 지금 여러분들이 사용하는 시스템이 어떤 종류 인지 모르지만, IBM 호환기종에서부터 Macintosh, Amiga 등등 많은 기종이 있죠. 특히 Amiga 같은 기종은 Pixel 방식이 아닌 TV와 같은 Interlace(주사선)방식을 사용하기 때문에 사용환경에 따라 색상이 다르게 보일 수 있다는 얘기죠. 그렇지만 web safe color를 사용하면 다른 환경에서도 거의 같은 색으로 보인다는 거죠. web safe color 값 만드는 방법을 rgb Hex(Hexadecimal) #rgb 3 digit 방식으로 설명하겠습니다.
아래의 표를 보면 rgb 각각 0, 3, 6, 9, C, F 로 16진수 0 ~ f 에서 3의 배수만 추려 놓았죠?... 이 각각의 rgb를 조합하는 방식입니다. 여기서 표현할 수 있는 경우의 수는 6 × 6 × 6 = 216 가지가 되겠져?... 자세한 설명은 아래의 칼라 값 만들기에서 하겠습니다. |
| Red |
0, 3, 6, 9, C, F |
| Green |
0, 3, 6, 9, C, F |
| Blue |
0, 3, 6, 9, C, F | |
| 색상 값 만드는 방법 |
| rgb Hex 3 #rgb |
| 이 방식은 rgb 각각의 16진수 값을 3자리 수로 표시하는 방법입니다. 앞에 #(hash)를 붙이고 뒤에서 rgb 값을 각각 한 자리씩 줍니다. 일단 위에서 말한 web safe color를 표현해 보겠습니다. 아래와 같이 0 3 6 9 c f 를 조합하면 되겠습니다...^^ 표현할 수 있는 색상은 16 × 16 × 16 = 4096 가지... |
| 예1) |
#636, #fc9, #0c9, #963 등등... |
예2)
기본 8색 |
#f00 red, #0f0 green, #00f blue, #fff white,
#000 black, #ff0 yellow, #f0f magenta, #0ff cyan | |
| rgb Hex 6 #rrggbb |
| rgb Hex 3 digit 방식으로 표현할 수 있는 색이 4096가지지만 이 방식은 그야말로 총천연색을 표현할 수 있습니다. 16진수 6자리를 사용하기 때문에 16 × 16 × 16 × 16 × 16 × 16 = 16,777,216 가지 색상이 되겠죠. 먼저 이 방식으로 web safe color를 예1)에서 표현해 보기로 하죠. 3자리 수와 같은 결과가 나옵니다. 즉, web safe color를 표현하는데는 구태여 6자리를 사용할 필요가 없다는 뜻입니다. 예2)는 6자리 방식으로 좀 더 다양한 색상을 표현했습니다. |
| 예1) |
#663366, #ffcc99, #00cc99, #996633 등등... |
| 예2) |
#35803d, #008b8b, #ffd700, #dc143c, #bdb76b, | |
| rgb(256,256,256) |
| 이 방식은 각각의 rgb 값을 256(0 ~ 255)색상으로 괄호속에 comma 로 구분하여 표시합니다. |
| 예1) |
rgb(255,0,0) red가 되겠군요. | |
| rgb(r%,g%,b%) |
| 이 방식은 위의 rgb 값을 백분율로 표시하는 방식입니다. |
| 예1) |
rgb(0%,0%,100%) blue가 되시겠습니다. | |
| named color |
이 방식은 red, green, blue 등 우리가 명사 형태로 부르는 색상 이름을 그대로 사용하는 방식입니다. 아래의 named color 보기를 참조하세요. named color table에 적힌 색상 이름을 rgb code 대신에 그대로 적어주면 됩니다. 사실 rgb hexa code 값에 익숙하지 않은 초보자들은 색상 이름이 기억하기 쉬운 편이죠. 단 한가지 주의할 점은... 특히 영어 좀 되시는 분들... 표에 적힌 named color가 띄어쓰기 안됐다고 비웃으면서 띄어쓰기하면 전혀 예상할 수 없는 색으로 나오니까 그러지 마시져... 예를 들어 darkorange를 dark orange로 띄어쓰기하면 안된다는 말입니다. 다른 값도 마찬가지지만 named color도 중간에 공백(space)을 허용하지 않습니다. 전혀 예상치 못한 엉뚱한 color가 나옵니다. |
| color blending |
색상 만드는 방법을 위의 rgb Hex 3자리 방식으로 설명하겠습니다.
- 3원색
16진수 0 ~ f 에서 '0'은 색상이 없다는 뜻입니다. 반대로 'f'는 색상이 꽉 찼다는 뜻입니다. red를 예로 들면 red의 16진수 3자리 색상값은 '#f00' 입니다. 즉, 첫번째 값인 'r' 만 최대치고 나머지는 비어있기 때문에 순수한
red가 됩니다. green(#0f0)과 blue(#00f)도 마찬가지구요.
- yellow, magenta, cyan
rgb code 값을 조합하여 만드는데, yellow는 #ff0, magenta는 #f0f, cyan는 #0ff가 되겠습니다. 처음 빛의 3원색을 접하는 분들은 좀 의아할 지도 모르겠군요...^^
- black(#000) & white(#fff) & gray
rgb 색상값이 모두 비어있으면 즉, '0'이면 black, 반대로 꽉 차 있으면 white가 되지요. 회색계통의 색상은 rgb 값이 같을 때 순수 회색이 나오게 됩니다. 예를 들어 #333, #dcdcdc, #c0c0c0... 등등 |
