Pantone - 팬톤컬러온라인

현재 위치

홈
게시판
AskPantone

AskPantone

솔리드컬러, 프로세스컬러가 뭐예요? - 재미있는 팬톤컬러 안내

Web Safe Color 웹에서 안전한 색

제목

Web Safe Color 웹에서 안전한 색

작성자

관리자 (ip:)

작성일 2005-08-02 23:07:15
추천
조회수 2743
평점

컴퓨터는 OS의 종류도 다양하고 브라우저도 다양합니다. 이러한 OS나 브라우저의 종류와 상관없이 공통으로 사용되는 '안전한' 색을 '웹 안전색(Web Safe Color)'라고 합니다. 이 웹안전색은 유채색 210가지, 무채색 6가지로 모두 216색으로 구성되어 있는 컬러 시스템입니다. 색이 안전(Safe)하다는것은 어느 운영체제나 브라우저에 상관없이 색이 왜곡되지 않고 같은 색상을 나타낸다는 뜻입니다.

컴퓨터로 색을 지정하려면 '시스템 팔레트(System Pallette)'를 사용해야 합니다. 그런데 이 팔레트는 컴퓨터의 컬러 시스템이 몇 비트냐에 따라 표현할 수 있는 색의 수가 달라집니다. 8비트의 경우에는 256 컬러, 16비트의 경우에는 약 6만 5천 컬러, 24비트의 경우에는 약 1,600만 컬러를 표현할 수가 있습니다. 따라서 최소 사양인 8비트 시스템에서도 표현이 가능한 컬러 시스템이 필요한데, 그것이 바로 웹 안전색 시스템입니다. 다시 말하지만 웹 안전색이 216색이기 때문에, 256 컬러를 표현할 수 있는 8비트 시스템에서도 색이 왜곡되지 않는 것입니다.

웹안전색이 256색이 아니고 216색인 까닭은 Red, Green, Blue를 각각 6단계로 나누었기 때문입니다.

Red Green Blue

6 x 6 x 6 = 216

웹에서 표현이 가능한 실제 컬러수는 RGB의 단계를 256단계(8비트)로 하기 때문에 약 1,600만 가지가 됩니다. RGB를 각각 8비트로 표현하니까 모두 24비트가 되어서 24비트 컬러 시스템이 되는 것입니다. 하지만 이 경우는 8비트 컬러 시스템에서 색이 왜곡될 수 밖에 없기 때문에 안전하지 못합니다.

그래서 RGB를 편의상 0%, 20%, 40%, 60%, 80%, 100%의 6단계로 나누어 216 컬러 시스템을 만든 것입니다.
이 6단계를 10진수로 표현하면 '0, 51, 102, 153, 204, 255'가 되고, 16진수로 표현하면 '00, 33, 66, 99, CC, FF'가 됩니다.

안전하지만 부족하다

안전하다고 무조건 좋은 것만은 아닙니다. 웹컬러 시스템을 이해하기에는 좋지만, 실제로 사용하기에는 색이 부족합니다. 예컨대, 웹 안전색에는 무채색이 6가지가 있는데, 백색(#FFFFFF)과 흑색(#000000)을 제외하면
회색 톤은 4가지(#333333, #666666, #999999, #CCCCCC)밖에 없습니다. 이 4가지로는 웹디자인의 컬러 표현이 극도로 제한될 수 밖에 없을 것입니다.

웹 안전색 216 컬러를 체계적으로 나타내려면, 육각뿔이나 정육면체 모형의 입체도형을 사용해야만 합니다. 여기서는 정육면체의 6개 단면으로 배열하였습니다. 36색으로 구성된 각 단면은 RGB 중 Green을 고정으로 컬러를 나타낸 것인데, 좌우축은 Blue의 변화, 상하축은 Red의 변화를 나타냅니다.

Green 'FF(100%)' 고정 : 36색


#FFFFFF (0, 0, 100)	#FFFFCC (60, 20, 100)	#FFFF99 (60, 40, 100)	#FFFF66 (60, 60, 100)	#FFFF33 (60, 80, 100)	#FFFF00 (60, 100, 100)

#CCFFFF (180, 20, 100)	#CCFFCC (120, 20, 100)	#CCFF99 (90, 40, 100)	#CCFF66 (80, 60, 100)	#CCFF33 (75, 80, 100)	#CCFF00 (72, 100, 100)

#99FFFF (180, 40, 100)	#99FFCC (150, 40, 100)	#99FF99 (120, 40, 100)	#99FF66 (100, 60, 100)	#99FF33 (90, 80, 100)	#99FF00 (84, 100, 100)

#66FFFF (180, 60, 100)	#66FFCC (160, 60, 100)	#66FF99 (140, 60, 100)	#66FF66 (120, 60, 100)	#66FF33 (105, 80, 100)	#66FF00 (96, 100, 100)

#33FFFF (180, 80, 100)	#33FFCC (165, 60, 100)	#33FF99 (150, 80, 100)	#33FF66 (135, 80, 100)	#33FF33 (120, 80, 100)	#33FF00 (108, 100, 100)

#00FFFF (180, 100, 100)	#00FFCC (168, 100, 100)	#00FF99 (156, 100, 100)	#00FF66 (144, 100, 100)	#00FF33 (132, 100, 100)	#00FF00 (120, 100, 100)

Green 'CC(80%)' 고정 : 36색


#FFCCFF (300, 20, 100)	#FFCCCC (0, 20, 100)	#FFCC99 (30, 40, 100)	#FFCC66 (40, 60, 100)	#FFCC33 (45, 80, 100)	#FFCC00 (48, 100, 100)

#CCCCFF (240, 20, 100)	#CCCCCC (0, 0, 80)	#CCCC99 (60, 25, 80)	#CCCC66 (60, 50, 80)	#CCCC33 (60, 75, 80)	#CCCC00 (60, 100, 80)

#99CCFF (210, 40, 100)	#99CCCC (180, 25, 80)	#99CC99 (120, 25, 80)	#99CC66 (90, 50, 80)	#99CC33 (80, 75, 80)	#99CC00 (75, 100, 80)

#66CCFF (200, 60, 100)	#66CCCC (180, 50, 80)	#66CC99 (150, 50, 80)	#66CC66 (120, 50, 80)	#66CC33 (100, 75, 80)	#66CC00 (90, 100, 80)

#33CCFF (195, 80, 100)	#33CCCC (180, 75, 80)	#33CC99 (160, 75, 80)	#33CC66 (140, 75, 80)	#33CC33 (120, 75, 80)	#33CC00 (105, 100, 80)

#00CCFF (192, 100, 100)	#00CCCC (180, 100, 80)	#00CC99 (165, 100, 80)	#00CC66 (150, 100, 80)	#00CC33 (135, 100, 80)	#00CC00 (120, 100, 80)

Green '99(60%)' 고정 : 36색


#FF99FF (300, 40, 100)	#FF99CC (330, 40, 100)	#FF9999 (0, 40, 100)	#FF9966 (20, 60, 100)	#FF9933 (30, 80, 100)	#FF9900 (36, 100, 100)

#CC99FF (270, 40, 100)	#CC99CC (300, 25, 80)	#CC9999 (0, 25, 80)	#CC9966 (30, 50, 80)	#CC9933 (40, 75, 80)	#CC9900 (45, 100, 80)

#9999FF (240, 40, 100)	#9999CC (240, 25, 80)	#999999 (0, 0, 60)	#999966 (60, 33, 60)	#999933 (60, 67, 60)	#999900 (60, 100, 60)

#6699FF (220, 60, 100)	#6699CC (210, 50, 80)	#669999 (180, 33, 60)	#669966 (120, 33, 60)	#669933 (90, 67, 60)	#669900 (80, 100, 60)

#3399FF (210, 80, 100)	#3399CC (200, 75, 80)	#339999 (180, 67, 60)	#339966 (150, 67, 60)	#339933 (120, 67, 60)	#339900 (100, 100, 60)

#0099FF (204, 100, 100)	#0099CC (195, 100, 80)	#009999 (180, 100, 60)	#009966 (160, 100, 60)	#009933 (140, 100, 60)	#009900 (120, 100, 60)

Green '66(40%)' 고정 : 36색


#FF66FF (300, 60, 100)	#FF66CC (320, 60, 100)	#FF6699 (340, 60, 100)	#FF6666 (0, 60, 100)	#FF6633 (15, 80, 100)	#FF6600 (24, 100, 100)

#CC66FF (280, 60, 100)	#CC66CC (300, 50, 80)	#CC6699 (330, 50, 80)	#CC6666 (0, 50, 80)	#CC6633 (20, 75, 80)	#CC6600 (30, 100, 80)

#9966FF (260, 60, 100)	#9966CC (270, 50, 80)	#996699 (300, 33 60)	#996666 (60, 33, 60)	#996633 (30, 67, 60)	#996600 (40, 100, 60)

#6666FF (240, 60, 100)	#6666CC (240, 50, 80)	#666699 (240, 33, 60)	#666666 (0, 0, 40)	#666633 (60, 50, 40)	#666600 (60, 100, 40)

#3366FF (225, 80, 100)	#3366CC (220, 75, 80)	#336699 (210, 67, 60)	#336666 (180, 50, 40)	#336633 (120, 50, 40)	#336600 (90, 100, 40)

#0066FF (216, 100, 100)	#0066CC (210, 100, 80)	#006699 (200, 100, 60)	#006666 (180, 100, 40)	#006633 (150, 100, 40)	#006600 (120, 100, 40)

Green '33(20%)' 고정 : 36색


#FF33FF (300, 80, 100)	#FF33CC (315, 80, 100)	#FF3399 (330, 80, 100)	#FF3366 (345, 80, 100)	#FF3333 (0, 80, 100)	#FF3300 (12, 100, 100)

#CC33FF (285, 80, 100)	#CC33CC (300, 75, 80)	#CC3399 (320, 75, 80)	#CC3366 (340, 75, 80)	#CC3333 (0, 75, 80)	#CC3300 (15, 100, 80)

#9933FF (270, 80, 100)	#9933CC (280, 75, 80)	#993399 (300, 67 60)	#993366 (330, 67, 60)	#993333 (0, 67, 60)	#993300 (20, 100, 60)

#6633FF (255, 80, 100)	#6633CC (260, 75, 80)	#663399 (270, 67, 60)	#663366 (300, 50, 40)	#663333 (0, 50, 40)	#663300 (30, 100, 40)

#3333FF (240, 80, 100)	#3333CC (240, 75, 80)	#333399 (240, 67, 60)	#333366 (240, 50, 40)	#333333 (0, 0, 20)	#333300 (60, 100, 20)

#0033FF (228, 100, 100)	#0033CC (225, 100, 80)	#003399 (220, 100, 60)	#003366 (210, 100, 40)	#003333 (180, 100, 20)	#003300 (120, 100, 20)

Green '00(0%)' 고정 : 36색


#FF00FF (300, 100, 100)	#FF00CC (312, 100, 100)	#FF0099 (324, 100, 100)	#FF0066 (336, 100, 100)	#FF0033 (348, 100, 100)	#FF0000 (0, 100, 100)

#CC00FF (288, 100, 100)	#CC00CC (300, 100, 80)	#CC0099 (315, 100, 80)	#CC0066 (330, 100, 80)	#CC0033 (345, 100, 80)	#CC0000 (0, 100, 80)

#9900FF (276, 100, 100)	#9900CC (285, 100, 80)	#990099 (300, 100 60)	#990066 (320, 100, 60)	#990033 (340, 100, 60)	#990000 (0, 100, 60)

#6600FF (264, 100, 100)	#6600CC (270, 100, 80)	#660099 (280, 100, 60)	#660066 (300, 100, 40)	#660033 (330, 100, 40)	#660000 (0, 100, 40)

#3300FF (252, 100, 100)	#3300CC (255, 100, 80)	#330099 (260, 100, 60)	#330066 (270, 100, 40)	#330033 (300, 100, 20)	#330000 (0, 100, 20)

#0000FF (240, 100, 100)	#0000CC (240, 100, 80)	#000099 (240, 100, 60)	#000066 (240, 100, 40)	#000033 (240, 100, 20)	#000000 (0, 0, 0)