웹 색상
월드 와이드 웹에서 웹 페이지 표시에 사용되는 색
(헥스 코드에서 넘어옴)
웹 색상(web colors)은 월드 와이드 웹에서 웹 페이지 표시에 사용되는 색이다. 웹 사이트를 만들 때, 여러 방법으로 색을 지정할 수 있다.
십육진법 표기
편집웹에서 십육진수쌍으로 색을 표현하는 방법은 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가지(2563)가 된다.
- 이름 참조
- 십육진법에 의한 웹 색상표기 중에서 자주 쓰이는 것은 특별히 이름을 붙여 두었다. 아래의 설명과 같이 이름이 있는 색은 십육진법에 의한 표현 대신 이름으로 표현할 수 있다.
웹 안전 색상
편집- 호환성을 위해 16,777,216가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다. 웹 안전 색상의 색 값은 모두 51의 배수로 이루어져 있다. (이는 최댓값인 255를 5로 나눈 것이다.) 각각 0, 51, 102, 153, 204, 255의 6단계로 이루어져 있으며 (00, 33, 66, 99, CC, FF) 표현 가능한 가짓수는 모두 216가지(63)이다.
밑의 색상표는 기존 RGB의 6글자를 3글자로 줄인 것이다. 예로, 609번은 RGB코드의 660099번과 일치한다. 또한, 22개의 "가장 안전한" 웹 색상은 밑줄 표시가 되어 있다.
| *000* | 300 | 600 | 900 | C00 | *F00* |
| *003* | 303 | 603 | 903 | C03 | *F03* |
| 006 | 306 | 606 | 906 | C06 | F06 |
| 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C |
| *00F* | 30F | 60F | 90F | C0F | *F0F* |
| 030 | 330 | 630 | 930 | C30 | F30 |
| 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 |
| 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C |
| 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 |
| 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 |
| 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C |
| 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 |
| 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 |
| 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C |
| 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC |
| 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| *0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
| 0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
| *0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| *0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
| *0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
HTML 색 이름
편집HTML 4.01 표준에는 16가지 색깔 이름이 정의되어 있다.
| 색상 | 16진수 | 색상 | 16진수 | 색상 | 16진수 | 색상 | 16진수 |
|---|---|---|---|---|---|---|---|
| black (검정) | #000000 | silver (은색) | #c0c0c0 | maroon (밤색) | #800000 | red (빨강) | #ff0000 |
| navy (남색) | #000080 | blue (파랑) | #0000ff | purple (자주) | #800080 | Magenta (자홍) | #ff00ff |
| green (초록) | #008000 | lime (라임) | #00ff00 | olive (올리브색) | #808000 | yellow (노랑) | #ffff00 |
| teal (틸) | #008080 | aqua (물색) | #00ffff | gray 또는 grey(회색) | #808080 | white (하양) | #ffffff |
X11 색 이름
편집
이 부분의 본문은 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 | #ff77ff |
| 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 | chrome(황연색) | #F7E600 |
CSS 색상
편집CSS 언어에서는 HTML 4.01에 정의된 색상 이름을 다시 정의하고 있다. CSS 2.1에서는 여기에 "오렌지 색"을 추가로 정의했다.
| 색상 | 16진수 |
|---|---|
| orange | #ffa500 |
같이 보기
편집