◈ RGB와 CMYK의 색상을 비교하고, RGB 색상값(HEX CODE)에 대하여
4·50대의 중년들이 학교를 다닐 때, 색(물감)의 삼원색은 '빨강, 파랑, 노랑', 빛의 삼원색 '빨강, 녹색, 파랑'이라고 미술시간에 배우고, 그것을 외우기 위해 '빨파노, 빨녹파'라고 얼마나 중얼거렸는지 모른다. 색의 삼원색은 크레파스나 물감으로 그림을 그리면서 어느 정도 익숙해져 있었지만, 빛의 삼원색은 현실적으로 어떤 것인지 알 수 없었고, 컬러TV나 컴퓨터를 사용하면서 조금씩 이해하기 시작했다. 그리고 색의 삼원색도 '빨파노'가 아니라는 것을 WEB 전문가들의 이야기를 들으면서 조금씩 알게 되었다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fcfs6.blog.daum.net%2Fimage%2F18%2Fblog%2F2008%2F02%2F27%2F23%2F04%2F47c56daed233b%26filename%3Dc1.jpg) 색의 삼원색
|
색(물감)의 삼원색을 영여 약자로 'CMY'라 하고, 'C=Cyan(시안-청록)', 'M=Magenta(마젠타-자주)', 'Y=Yellow(노랑)'를 뜻하는 약자다. 우리가 알고 있는 '빨파노'와는 약간의 차이가 있다.
색의 삼원색, CMY의 혼합색은 섞을수록 어두워진다고 하여 감산혼합이라고 한다. 빛이 들어오는 거실에 커튼을 치는 것과 같이 한겹보다는 두겹이, 두겹보다는 세겹이 더 어두워지는 개념으로 생각하면 된다.
CMY는 주로 프린터를 하거나 인쇄소에서 많이 사용하는데, CMY를 100% 혼합하여도 완벽한 검정색이 나오지 않는다는데 문제가 있다. 그래서 검정색(BLACK)을 추가하여 사용하게 되는데 이것을 'CMYK'라 한다. 여기서 'K'는 'BLACK'의 마지막 'K'를 가져온 것이고, 그것은 'BLUE'와 혼동을 피하기 위해서라고 한다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fcfs11.blog.daum.net%2Fimage%2F25%2Fblog%2F2008%2F02%2F27%2F23%2F12%2F47c56fbd37a23%26filename%3Dc3.jpg) 빛의 삼원색
|
인터넷을 하면서 홈페이지나 블로그를 만드는 우리에게 중요한 것은 'CMYK'가 아니라 빛의 삼원색 'RGB'를 잘 이해하고 사용하는 것이다. 빛의 삼원색 RGB는 'R=Red(빨강)', 'G=Green(녹색)', 'B=Blue(파랑)'를 뜻하는 약자를 의미한다.
빛의 삼원색 RGB의 혼합색은 섞을수록 밝아진다고 하여 가산혼합이라고 한다. 어두운 거실에 등을 켜는 것과 같이 하나보다는 둘이, 둘보다는 셋이 더 밝아지는 개념으로 생각하면 된다.
RGB 방식은 컬러 텔레비전이나 컴퓨터의 컬러 모니터, 기타 빛을 이용하는 표시 장치에 널리 사용되고 있다. 홈페이지나 블로그 등을 만들 때 화면의 배경색, 글자색, 테이블 색상, 라인의 색상 등을 만들 때 아주 중요하다.
|
RGB 색상(HEX CODE, HTML 색상) 만들기
우리가 알고 있는 색상을 나타내는 영어 단어를 이용하여 화면의 배경색이나 글자색을 만든다면, red, green, blue, black, white, yellow, purple, grey, olive, lime, navy ....... 등 2·30개 정도로 그 한계가 있을 것이고, 자신이 원하는 색상도 만들 수가 없을 것이다. 물론 영어 단어를 많이 알거나, 다양한 색상이 필요 없는 사람에게는 그 정도의 색상만으로도 충분할 것이고, 'RGB'라는 것을 몰라도 될 것이다.
빛의 삼원색 RGB를 혼합하면 다양한 색상을 만들어 낼 수 있고, 때로는 신기함과 만족감도 느낄 수 있다. 우선 우리가 사용하는 숫자는 0 ~ 9까지의 10진수를 사용하지만, RGB CODE 체계에서는 0 ~ F까지를 사용하는 16진수(Hexadecimal Code)를 사용한다는 것이다.
|
10진수 |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16진수 |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
16진수와 10진수를 구별하기 위해서 10대신 'A'를 11대신 'B'를 .......15대신 'F'를 사용하고, 이 16개의 숫자를 이용하여 RGB 색상을 조합하여 사용하는데, 이것을 'RGB CODE' 또는 'HEX CODE'라 한다. 어떤 사람들은 홈페이지를 만드는 기본 언어인 HTML에서 사용하는 색상이기 때문에 'HTML CODE'라고도 한다.
Red(빨강), Green(녹색), Blue(파랑)에 각각 16진수 두 자리를 부여해서, 색을 조합한다. 즉, '○○○○○○'의 여섯 자리에 'RRGGBB'형태로 숫자를 부여하고, 자신이 원하는 색상을 만들어 내는 방법이다. 이렇게 조합하면 16*16*16*16*16*16 즉, 빨강 256 가지, 녹색 256 가지, 파랑 256 가지, 256*256*256, 총 16,777,216 가지, 약 천육백만 종류의 색상을 만들기 때문에 우리가 원하는 색은 모두 만들어 낼 수 있는 것이다.
간단하게 빛이 하나도 없는 상태(RGB가 하나도 없는 상태)는 '000000'이고 검은색이 되는 것이다. 빛이 완벽하게 혼합된 상태(RGB가 완벽하게 혼합된 상태)는 'FFFFFF'는 흰색, 완전한 빨강 'FF0000'이고, 약간 빨간색 계통은 'D80000', 더 엷은 색은 '570000' 등으로 자신이 만들어서 마음에 드는 색을 추출하여 사용한다. 또 R과 G가 혼합하면 노랑색이 나오는데 'FFFF00'라고 표현하면 된다. 다음 색상을 비교해 보면 사용 방법과 차이를 이해할 수 있을 것이다.
|
FFFF00 |
9Ab800 |
245300 |
245378 |
1212FF |
|
|
|
|
|
이와 같은 방법으로 배경색, 글자색, 테이블 색상, 수평선에 RGB CODE를 적용한다면 홈페이지나 블로그가 더 멋지게 나타날 것이다.
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fcfs6.blog.daum.net%2Fimage%2F29%2Fblog%2F2008%2F02%2F29%2F22%2F12%2F47c804c030f41%26filename%3Ddecimal.JPG) |
우리가 포토샵, 플래시, 그림판과 같은 프로그램에서 색상을 입력할 때 왼쪽 그림과 같은 화면을 만나는데, 이것은 RGB(16진수 코드)를 10진수로 바꾸어 표현하는 방법으로 'Decimal code(10진수 코드)'라 부른다.
① 16진수 '23'을 10진수로 바꾸려면;
2*161 + 3*160 = 35. 임의의 수 'X0 = 1'
② 16진수 '3B5'를 10진수로 전환하면:
3*162 + 11(B)*161 + 5*160 = 768 + 176 + 5 = 949
③ 16진수 'CB 30 CF'를 10진수로 계산하면 왼쪽 그림에 있는 것처럼
'203 48 207'이 나오게 된다.
CB : 12(C)*161 + 11(B)*160 = 203
30 : 3*161 + 0*160 = 48 등으로 계산하면 된다. |
|
HTML 4.01 규약에 정의되어 있는 표준 16가지 색상(abc 순)
HTML |
RGB |
COLOR |
aqua |
#00FFFF |
|
black |
#000000 |
|
blue |
#0000FF |
|
fuchsia |
#FF00FF |
| |
HTML |
RGB |
COLOR |
green |
#008000 |
|
grey |
#808080 |
|
lime |
#00FF00 |
|
maroon |
#800000 |
| |
HTML |
RGB |
COLOR |
navy |
#000080 |
|
olive |
#808000 |
|
purple |
#800080 |
|
red |
#FF0000 |
| |
HTML |
RGB |
COLOR |
silver |
#C0C0C0 |
|
teal |
#008080 |
|
white |
#FFFFFF |
|
yellow |
#FFFF00 |
| |
RGB Code를 다 외우려는 무식한 사람은 아무도 없다. 단지 자신이 좋아하는 몇 가지 코드와 그 원리를 알고 있으면 충분하고, 나머지는 필요할 때 찾아서 사용하면 된다. 그리고 자신의 컴퓨터가 가지고있는 그래픽카드나 모니터의 성능에 따라 색상은 조금 다르게 보인다는 것을 알고 있어야 한다.
|
RGB 색상표 - http://en.wikipedia.org/wiki/Web_colors 참고
HTML |
R G B |
Red Colors |
IndianRed |
CD 5C 5C |
LightCoral |
F0 80 80 |
Salmon |
FA 80 72 |
DarkSalmon |
E9 96 7A |
LightSalmon |
FF A0 7A |
Crimson |
DC 14 3C |
Red |
FF 00 00 |
FireBrick |
B2 22 22 |
DarkRed |
8B 00 00 |
Pink colors |
Pink |
FF C0 CB |
LightPink |
FF B6 C1 |
HotPink |
FF 69 B4 |
DeepPink |
FF 14 93 |
MediumVioletRed |
C7 15 85 |
PaleVioletRed |
DB 70 93 |
Orange colors |
LightSalmon |
FF A0 7A |
Coral |
FF 7F 50 |
Tomato |
FF 63 47 |
OrangeRed |
FF 45 00 |
DarkOrange |
FF 8C 00 |
Orange |
FF A5 00 |
Yellow colors |
Gold |
FF D7 00 |
Yellow |
FF FF 00 |
LightYellow |
FF FF E0 |
LemonChiffon |
FF FA CD |
LightGoldenrodYellow |
FA FA D2 |
PapayaWhip |
FF EF D5 |
Moccasin |
FF E4 B5 |
PeachPuff |
FF DA B9 |
PaleGoldenrod |
EE E8 AA |
Khaki |
F0 E6 8C |
DarkKhaki |
BD B7 6B |
Purple colors |
Lavender |
E6 E6 FA |
Thistle |
D8 BF D8 |
Plum |
DD A0 DD |
Violet |
EE 82 EE |
Orchid |
DA 70 D6 |
Fuchsia |
FF 00 FF |
MediumOrchid |
BA 55 D3 |
MediumPurple |
93 70 DB |
BlueViolet |
8A 2B E2 |
DarkViolet |
94 00 D3 |
DarkOrchid |
99 32 CC |
DarkMagenta |
8B 00 8B |
Purple |
80 00 80 |
Indigo |
4B 00 82 |
SlateBlue |
6A 5A CD |
DarkSlateBlue |
48 3D 8B |
MediumSlateBlue |
7B 68 EE |
|
HTML |
R G B |
Green Colors |
GreenYellow |
AD FF 2F |
Chartreuse |
7FFF00 |
LawnGreen |
7C FC 00 |
Lime |
00 FF 00 |
LimeGreen |
32 CD 32 |
PaleGreen |
98 FB 98 |
LightGreen |
90 EE 90 |
MediumSpringGreen |
00 FA 9A |
SpringGreen |
00 FF 7F |
MediumSeaGreen |
3C B3 71 |
SeaGreen |
2E 8B 57 |
ForestGreen |
22 8B 22 |
Green |
00 80 00 |
DarkGreen |
00 64 00 |
YellowGreen |
9A CD 32 |
OliveDrab |
6B 8E 23 |
Olive |
80 80 00 |
DarkOliveGreen |
55 6B 2F |
MediumAquamarine |
66 CD AA |
DarkSeaGreen |
8F BC 8F |
LightSeaGreen |
20 B2 AA |
DarkCyan |
00 8B 8B |
Teal |
00 80 80 |
Blue colors |
Aqua |
00 FF FF |
Cyan |
00 FF FF |
LightCyan |
E0 FF FF |
PaleTurquoise |
AF EE EE |
Aquamarine |
7F FF D4 |
Turquoise |
40 E0 D0 |
MediumTurquoise |
48 D1 CC |
DarkTurquoise |
00 CE D1 |
CadetBlue |
5F 9E A0 |
SteelBlue |
46 82 B4 |
LightSteelBlue |
B0 C4 DE |
PowderBlue |
B0 E0 E6 |
LightBlue |
AD D8 E6 |
SkyBlue |
87 CE EB |
LightSkyBlue |
87 CE FA |
DeepSkyBlue |
00 BF FF |
DodgerBlue |
1E 90 FF |
CornflowerBlue |
64 95 ED |
RoyalBlue |
41 69 E1 |
Blue |
00 00 FF |
MediumBlue |
00 00 CD |
DarkBlue |
00 00 8B |
Navy |
00 00 80 |
MidnightBlue |
19 19 70 |
|
HTML |
R G B |
Brown Colors |
Cornsilk |
FF F8 DC |
BlanchedAlmond |
FF EB CD |
Bisque |
FF E4 C4 |
NavajoWhite |
FF DE AD |
Wheat |
F5 DE B3 |
BurlyWood |
DE B8 87 |
Tan |
D2 B4 8C |
RosyBrown |
BC 8F 8F |
SandyBrown |
F4 A4 60 |
Goldenrod |
DA A5 20 |
DarkGoldenrod |
B8 86 0B |
Peru |
CD 85 3F |
Chocolate |
D2 69 1E |
SaddleBrown |
8B 45 13 |
Sienna |
A0 52 2D |
Brown |
A5 2A 2A |
Maroon |
80 00 00 |
White colors |
White |
FF FF FF |
Snow |
FF FA FA |
Honeydew |
F0 FF F0 |
MintCream |
F5 FF FA |
Azure |
F0 FF FF |
AliceBlue |
F0 F8 FF |
GhostWhite |
F8 F8 FF |
WhiteSmoke |
F5 F5 F5 |
Seashell |
FF F5 EE |
Beige |
F5 F5 DC |
OldLace |
FD F5 E6 |
FloralWhite |
FF FA F0 |
Ivory |
FF FF F0 |
AntiqueWhite |
FA EB D7 |
Linen |
FA F0 E6 |
LavenderBlush |
FF F0 F5 |
MistyRose |
FF E4 E1 |
Grey colors |
Gainsboro |
DC DC DC |
LightGrey |
D3 D3 D3 |
Silver |
C0 C0 C0 |
DarkGray |
A9 A9 A9 |
Gray |
80 80 80 |
DimGray |
69 69 69 |
LightSlateGray |
77 88 99 |
SlateGray |
70 80 90 |
DarkSlateGray |
2F 4F 4F |
Black |
00 00 00 |
♣石花♣ |
|
|
첫댓글 "~~~하~이!~~~"컬러 시대 당신의 색상은...? 꼭~! 필요해요. .. 삼복더위 건강하세요. 님들!~ 사랑해요.. 근데~3쯧 어디간겨. 또!~사고치러 간겨~~~!
사랑이가 요즘 맛이 갔어...ㅎㅎㅎㅎ...지가봐도 모르는걸 떡하니 올려놓고...ㅋㅋㅋ
저는 빨갱이 ^^;;;
정확하게 말해 좌빨 ^^;;;
덧붙혀 이야기하면 섞을수록 어두워지는 CMYK는 '인쇄용'.....'교리'나 뭐 이딴거............난 푸릉댕이...^^
휴 선생님 고맙습니다. 알아서 도움이 될것같아 저의 블로그에 도둑질 해 갑니다. 감사 합니다.
휴지통이 사랑이 라는데~ㅎㅎ