현재 섹션 : 웹/인터넷

웹 안전색(Web Safe Color) 시스템

웹 안전색(Web Safe Color)
컴퓨터 운영체제의 종류, 브라우저의 종류에 상관없이 공통으로 사용되는 '안전한' 색을 '웹 안전색(Web Safe Color)'라고 한다. 이 웹 안전색은 유채색 210가지, 무채색 6가지로 모두 216색으로 구성되어 있는 컬러 시스템이다.
색이 안전(Safe)하다?
'안전하다(Safe)'는 것은 '색이 왜곡되지 않는다'는 의미다. 이것은 웹 안전색이 216색이기 때문에 가능하다. 컴퓨터로 색을 지정하려면 '시스템 팔레트(Pallette)'를 사용해야 한다. 그런데 이 팔레트는 컴퓨터의 컬러 시스템이 몇 비트냐에 따라 표현할 수 있는 색의 수가 달라진다. 8비트의 경우에는 256 컬러, 16비트의 경우에는 약 6만 5천 컬러, 24비트의 경우에는 약 1,600만 컬러를 표현할 수가 있다. 따라서 최소 사양인 8비트 시스템에서도 표현이 가능한 컬러 시스템이 필요한데, 그것이 바로 웹 안전색 시스템이다. 다시 말하지만 웹 안전색이 216색이기 때문에, 256 컬러를 표현할 수 있는 8비트 시스템에서도 색이 왜곡되지 않는다.

웹 안전색(Web Safe Color)는 왜 216색인가?

256색이 아니고 216색?
그런데 왜 웹 안전색은 256색이 아니고 216색일까? 그것은 Red, Green, Blue의 각 단계를 6단계로 나누었기 때문이다. 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)

* 본 사이트에서 16진수 컬러 표기 아래 괄호 안의 숫자는 순서대로 색상(Hue), 채도(Saturation), 명도(Brightness)를 나타냅니다.

Copyright © 나쥬니 (nazuni.net)