웹과 색상

 

웹 색상의 16진법 표기

웹에서 십육진수쌍으로 색을 표현하는 방법은 RGB 가산혼합에 의한 것이다. RED, GREEN, BLUE에 해당하는 두자리 십육진수 세 쌍으로 색깔을 나타낼 수 있다. 한 채널당 1 바이트가 할당되므로 모두 3 바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 #과 3 쌍의 두자리 십육진수를 연속하여 사용한다.

표기형식

특수기호	RED 채널	GREEN 채널	BLUE 채널
#	00~FF	00~FF	00~FF

표기 예

표기	색상
#000000
#ff0000
#00ff00
#0000ff

표현 범위

두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. (십육진법 참조) 즉, 하나의 채널은 256 가지의 색을 표현할 수 있다.

웹 색상의 십육진법 표기는 각 채널 당 256개의 색을 표현하므로 3 채널 모두를 사용하여 나타낼 수 있는 색상은 16,777,216 가지(256*256*256)가 된다.

이름 참조

십육진법에 의한 웹 색상표기 중에서 자주 쓰이는 것은 특별히 이름을 붙여 두었다. 아래의 설명과 같이 이름이 있는 색은 십육진법에 의한 표현 대신 이름으로 표현할 수 있다.

웹 안전 색상

• 호환성을 위해 16,777,216 가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다. 웹 안전 색상의 색 값은 모두 51의 배수로 이루어져 있다. (이는 최대값인 255를 5로 나눈 것이다.) 각각 0, 51, 102, 153, 204, 255의 6단계로 이루어져 있으며 (00, 33, 66, 99, CC, FF) 표현 가능한 가짓수는 모두 216가지(6³)이다.

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00	000033 330033 660033 990033 CC0033 FF0033 003333 333333 663333 993333 CC3333 FF3333 006633 336633 666633 996633 CC6633 FF6633 009933 339933 669933 999933 CC9933 FF9933 00CC33 33CC33 66CC33 99CC33 CCCC33 FFCC33 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33
000066 330066 660066 990066 CC0066 FF0066 003366 333366 663366 993366 CC3366 FF3366 006666 336666 666666 996666 CC6666 FF6666 009966 339966 669966 999966 CC9966 FF9966 00CC66 33CC66 66CC66 99CC66 CCCC66 FFCC66 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66	000099 330099 660099 990099 CC0099 FF0099 003399 333399 663399 993399 CC3399 FF3399 006699 336699 666699 996699 CC6699 FF6699 009999 339999 669999 999999 CC9999 FF9999 00CC99 33CC99 66CC99 99CC99 CCCC99 FFCC99 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99
0000CC 3300CC 6600CC 9900CC CC00CC FF00CC 0033CC 3333CC 6633CC 9933CC CC33CC FF33CC 0066CC 3366CC 6666CC 9966CC CC66CC FF66CC 0099CC 3399CC 6699CC 9999CC CC99CC FF99CC 00CCCC 33CCCC 66CCCC 99CCCC CCCCCC FFCCCC 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC	0000FF 3300FF 6600FF 9900FF CC00FF FF00FF 0033FF 3333FF 6633FF 9933FF CC33FF FF33FF 0066FF 3366FF 6666FF 9966FF CC66FF FF66FF 0099FF 3399FF 6699FF 9999FF CC99FF FF99FF 00CCFF 33CCFF 66CCFF 99CCFF CCCCFF FFCCFF 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

표준 색상 이름

HTML 4.01 표준에는 16 가지 색깔 이름이 정의되어 있다.

색상	16진수	색상	16진수	색상	16진수	색상	16진수
black (검정)	#000000	silver (은색)	#c0c0c0	maroon (고동색)	#800000	red (빨강)	#ff0000
navy (짙은 남색)	#000080	blue (파랑)	#0000ff	purple (보라)	#800080	fuchsia (자청색)	#ff00ff
green (녹색)	#008000	lime (라임색)	#00ff00	olive (올리브색)	#808000	yellow (노랑)	#ffff00
teal (암청색)	#008080	aqua (옥색)	#00ffff	gray (회색)	#808080	white (하양)	#ffffff

X11 색상 이름

추가적으로, 넷스케이프나 인터넷 익스플로러 같은 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 이들 색상 중 다수가 X 윈도우 시스템에서 분류된 X11 색상 이름에서 가져온 것이다. CSS를 지원하는 대부분의 HTML 사용자 에이전트가 이 색상들을 지원한다.

아래는 X11 색상 이름과 각각에 해당하는 16진수 코드의 목록이다.

색상	16진수	색상	16진수
indianred	#cd5c5c	darksalmon	#e9967a
lightcoral	#f08080	salmon	#fa8072
orangered	#ff4500	red	#ff0000
crimson	#dc143c	firebrick	#b22222
darkred	#8b0000	mediumvioletred	#c71585
pink	#ffc0cb	lightpink	#ffb6c1
hotpink	#ff69b4	deeppink	#ff1493
palevioletred	#db7093	darkkhaki	#bdb76b
khaki	#f0e68c	palegoldenrod	#eee8aa
lightgoldenrodyellow	#fafad2	lightyellow	#ffffe0
lemonchiffon	#fffacd	yellow	#ffff00
gold	#ffd700	papayawhip	#ffefd5
moccasin	#ffe4b5	peachpuff	#ffdab9
cyan	#00ffff	aqua	#00ffff
aquamarine	#7fffd4	turquoise	#40e0d0
mediumturquoise	#48d1cc	darkturquoise	#00ced1
cadetblue	#5f9ea0	slategray	#708090
lightcyan	#e0ffff	paleturquoise	#afeeee
powderblue	#b0e0e6	lightsteelblue	#b0c4de
steelblue	#4682b4	lightblue	#add8e6
skyblue	#87ceeb	lightskyblue	#87cefa
deepskyblue	#00bfff	cornflowerblue	#6495ed
royalblue	#4169e1	mediumslateblue	#7b68ee
dodgerblue	#1e90ff	blue	#0000ff
mediumblue	#0000cd	darkblue	#00008b
navy	#000080	midnightblue	#191970
lightsalmon	#ffa07a	orange	#ffa500
darkorange	#ff8c00	coral	#ff7f50
tomato	#ff6347	orangered	#ff4500
aquamarine	#7fffd4	mediumspringgreen	#00fa9a
springgreen	#00ff7f	palegreen	#98fb98
greenyellow	#adff2f	chartreuse	#7fff00
lawngreen	#7cfc00	lime	#00ff00
lightgreen	#90ee90	yellowgreen	#9acd32
limegreen	#32cd32	mediumseagreen	#3cb371
darkseagreen	#8fbc8f	forestgreen	#228b22
seagreen	#2e8b57	green	#008000
olivedrab	#6b8e23	olive	#808000
darkolivegreen	#556b2f	darkgreen	#006400
mediumaquamarine	#66cdaa	turquoise	#40e0d0
lightseagreen	#20b2aa	darkcyan	#008b8b
teal	#008080	lavender	#e6e6fa
thistle	#d8bfd8	plum	#dda0dd
violet	#ee82ee	fuchsia	#ff00ff
magenta	#ff00ff	orchid	#da70d6
mediumorchid	#ba55d3	darkorchid	#9932cc
blueviolet	#8a2be2	darkviolet	#9400d3
mediumpurple	#9370db	slateblue	#6a5acd
purple	#800080	darkmagenta	#8b008b
darkslateblue	#483d8b	indigo	#4b0082
honeydew	#f0fff0	mintcream	#f5fffa
azure	#f0ffff	aliceblue	#f0f8ff
ghostwhite	#f8f8ff	whitesmoke	#f5f5f5
lavenderblush	#fff0f5	mistyrose	#ffe4e1
antiquewhite	#faebd7	seashell	#fff5ee
snow	#fffafa	white	#ffffff
beige	#f5f5dc	linen	#faf0e6
oldlace	#fdf5e6	floralwhite	#fffaf0
ivory	#fffff0	gainsboro	#dcdcdc
lightgrey	#d3d3d3	silver	#c0c0c0
darkgray	#a9a9a9	gray	#808080
dimgray	#696969	darkslategray	#2f4f4f
lightslategray	#778899	slategray	#708090
cornsilk	#fff8dc	blanchedalmond	#ffebcd
bisque	#ffe4c4	navajowhite	#ffdead
wheat	#f5deb3	sandybrown	#f4a460
goldenrod	#daa520	darkgoldenrod	#b8860b
peru	#cd853f	chocolate	#d2691e
maroon	#800000	saddlebrown	#8b4513
brown	#a52a2a	sienna	#a0522d
darkred	#8b0000	burlywood	#deb887
tan	#d2b48c	rosybrown	#bc8f8f
black	#000000

CSS 색상

CSS 언어에서는 HTML 4.01에 정의된 색상 이름을 다시 정의하고 있다. CSS 2.1에서는 여기에 "오렌지색"을 추가로 정의했다.

색상	16진수
orange	#ffa500

 
========================================================================== 위키백과에서...

   1: <script type="text/javascript">
   1:  
   2:   function viewWebColor() {
   3:   var colorTable = "<table width='300' height='300'>\r\n<tr>";
   4:   var tdCount = 0;
   5:   for (var r = 0; r <= 255; r = r + 51) {
   6:       for (var g = 0; g <= 255; g = g + 51) {
   7:           for (var b = 0; b <= 255; b = b + 51) {
   8:  
   9:               if (0 == (tdCount % 12)) {
  10:                   colorTable += "</tr>\r\n<tr>";
  11:               }
  12:        
  13:               var color16 = "#";
  14:               color16 += (16 > r) ? "0" + r.toString(16) : r.toString(16);
  15:               color16 += (16 > g) ? "0" + g.toString(16) : g.toString(16);
  16:               color16 += (16 > b) ? "0" + b.toString(16) : b.toString(16);
  17:               colorTable +="<td style='background-color: " 
  18:                   + color16 + "; cursor: pointer;' "
  19:                   + "onclick=alert('" + color16 + "')></td>\r\n";
  20:                tdCount++;
  21:            }
  22:       }   
  23:       colorTable += "";
  24:   }
  25:   colorTable +="</tr>\r\n</table>";
  26:   document.write(colorTable);
  27:   //alert(colorTable);
  28: }
  29: viewWebColor();
</script>

위 사항을 이용하여 자바스크립트로 만들어 보았다.. 저겄들을 일일이 구현하자면 너무 길어서...