웹 색상 편집하기

{{HTML}}
{{색}}
[[파일:SVG1.1 Color Swatch.svg|thumb]]
'''웹 색상'''(web colors)은 [[월드 와이드 웹]]에서 [[웹 페이지]] 표시에 사용되는 색이다. [[월드 와이드 웹|웹 사이트]]를 만들 때, 여러 방법으로 [[색]]을 지정할 수 있다.

== 십육진법 표기 ==
웹에서 십육진수쌍으로 [[색]]을 표현하는 방법은 [[RGB 가산혼합]]에 의한 것이다. 적(red), 녹(green), 청(blue)에 해당하는 두 자리 [[십육진법|십육진수]] 세 쌍으로 색깔을 나타낼 수 있다. 한 채널에 1[[바이트]]가 할당되므로 모두 3바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 <code>#</code>과 3쌍의 두자리 십육진수를 연속하여 사용한다.

; 표기형식
{| class="wikitable" width="35%"
!nowrap|특수기호
!nowrap|Red 채널
!nowrap|Green 채널
!nowrap|Blue 채널
|-
|style="text-align:center;" lang=en|<code>#</code>
|style="text-align:center;" lang=en|00~FF
|style="text-align:center;" lang=en|00~FF
|style="text-align:center;" lang=en|00~FF
|}

; 표기 예
{| class="wikitable" width="30%"
!표기
!색상
|-
| style="text-align:center; font-family:monospace;" lang=en|#000000
| style="background:#000000;"|
|-
| style="text-align:center; font-family:monospace;" lang=en|#ff0000
| style="background:#FF0000;"|
|-
| style="text-align:center; font-family:monospace;" lang=en|#00ff00
| style="background:#00FF00;"|
|-
| style="text-align:center; font-family:monospace;" lang=en|#0000ff
| style="background:#0000FF;"|
|}

; 표현 범위
: 두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. ([[십육진법]] 참조) 즉, 하나의 채널은 256 가지의 색을 표현할 수 있다.
: 웹 색상의 십육진법 표기는 각 채널 당 256개의 색을 표현하므로 3채널 모두를 사용하여 나타낼 수 있는 색상은 16,777,216가지(256<sup>3</sup>)가 된다.

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

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

밑의 색상표는 기존 RGB의 6글자를 3글자로 줄인 것이다. 예로, 609번은 RGB코드의 660099번과 일치한다. 또한, 22개의 "가장 안전한" 웹 색상은 밑줄 표시가 되어 있다.

<div align="center">
{| width="80%" class="wikitable" style="color:white;width:80%;text-align:center"
| style="background: #000;" | <u>*000*</u>
| style="background: #300;" | 300
| style="background: #600;" | 600
| style="background: #900;" | 900
| style="background: #C00;" | C00
| style="background: #F00;" | <u>*F00*</u>
|-
| style="background: #003;" | <u>*003*</u>
| style="background: #303;" | 303
| style="background: #603;" | 603
| style="background: #903;" | 903
| style="background: #C03;" | C03
| style="background: #F03;" | <u>*F03*</u>
|-
| style="background: #006;" | 006
| style="background: #306;" | 306
| style="background: #606;" | 606
| style="background: #906;" | 906
| style="background: #C06;" | C06
| style="background: #F06;" | F06
|-
| style="background: #009;" | 009
| style="background: #309;" | 309
| style="background: #609;" | 609
| style="background: #909;" | 909
| style="background: #C09;" | C09
| style="background: #F09;" | F09
|-
| style="background: #00C;" | 00C
| style="background: #30C;" | 30C
| style="background: #60C;" | 60C
| style="background: #90C;" | 90C
| style="background: #C0C;" | C0C
| style="background: #F0C;" | F0C
|-
| style="background: #00F;" | <u>*00F*</u>
| style="background: #30F;" | 30F
| style="background: #60F;" | 60F
| style="background: #90F;" | 90F
| style="background: #C0F;" | C0F
| style="background: #F0F;" | <u>*F0F*</u>
|-
| style="background: #030;" | 030
| style="background: #330;" | 330
| style="background: #630;" | 630
| style="background: #930;" | 930
| style="background: #C30;" | C30
| style="background: #F30;" | F30
|-
| style="background: #033;" | 033
| style="background: #333;" | 333
| style="background: #633;" | 633
| style="background: #933;" | 933
| style="background: #C33;" | C33
| style="background: #F33;" | F33
|-
| style="background: #036;" | 036
| style="background: #336;" | 336
| style="background: #636;" | 636
| style="background: #936;" | 936
| style="background: #C36;" | C36
| style="background: #F36;" | F36
|-
| style="background: #039;" | 039
| style="background: #339;" | 339
| style="background: #639;" | 639
| style="background: #939;" | 939
| style="background: #C39;" | C39
| style="background: #F39;" | F39
|-
| style="background: #03C;" | 03C
| style="background: #33C;" | 33C
| style="background: #63C;" | 63C
| style="background: #93C;" | 93C
| style="background: #C3C;" | C3C
| style="background: #F3C;" | F3C
|-
| style="background: #03F;" | 03F
| style="background: #33F;" | 33F
| style="background: #63F;" | 63F
| style="background: #93F;" | 93F
| style="background: #C3F;" | C3F
| style="background: #F3F;" | F3F
|-
| style="background: #060;" | 060
| style="background: #360;" | 360
| style="background: #660;" | 660
| style="background: #960;" | 960
| style="background: #C60;" | C60
| style="background: #F60;" | F60
|-
| style="background: #063;" | 063
| style="background: #363;" | 363
| style="background: #663;" | 663
| style="background: #963;" | 963
| style="background: #C63;" | C63
| style="background: #F63;" | F63
|-
| style="background: #066;" | 066
| style="background: #366;" | 366
| style="background: #666;" | 666
| style="background: #966;" | 966
| style="background: #C66;" | C66
| style="background: #F66;" | F66
|-
| style="background: #069;" | 069
| style="background: #369;" | 369
| style="background: #669;" | 669
| style="background: #969;" | 969
| style="background: #C69;" | C69
| style="background: #F69;" | F69
|-
| style="background: #06C;" | 06C
| style="background: #36C;" | 36C
| style="background: #66C;" | 66C
| style="background: #96C;" | 96C
| style="background: #C6C;" | C6C
| style="background: #F6C;" | F6C
|-
| style="background: #06F;" | 06F
| style="background: #36F;" | 36F
| style="background: #66F;" | 66F
| style="background: #96F;" | 96F
| style="background: #C6F;" | C6F
| style="background: #F6F;" | F6F
|-
| style="background: #090;" | 090
| style="background: #390;" | 390
| style="background: #690;" | 690
| style="background: #990;" | 990
| style="background: #C90;" | C90
| style="background: #F90;" | F90
|-
| style="background: #093;" | 093
| style="background: #393;" | 393
| style="background: #693;" | 693
| style="background: #993;" | 993
| style="background: #C93;" | C93
| style="background: #F93;" | F93
|-
| style="background: #096;" | 096
| style="background: #396;" | 396
| style="background: #696;" | 696
| style="background: #996;" | 996
| style="background: #C96;" | C96
| style="background: #F96;" | F96
|-
| style="background: #099;" | 099
| style="background: #399;" | 399
| style="background: #699;" | 699
| style="background: #999;" | 999
| style="background: #C99;" | C99
| style="background: #F99;" | F99
|-
| style="background: #09C;" | 09C
| style="background: #39C;" | 39C
| style="background: #69C;" | 69C
| style="background: #99C;" | 99C
| style="background: #C9C;" | C9C
| style="background: #F9C;" | F9C
|-
| style="background: #09F;" | 09F
| style="background: #39F;" | 39F
| style="background: #69F;" | 69F
| style="background: #99F;" | 99F
| style="background: #C9F;" | C9F
| style="background: #F9F;" | F9F
|- style="color: black;"
| style="background: #0C0;" | 0C0
| style="background: #3C0;" | 3C0
| style="background: #6C0;" | 6C0
| style="background: #9C0;" | 9C0
| style="background: #CC0;" | CC0
| style="background: #FC0;" | FC0
|- style="color: black;"
| style="background: #0C3;" | 0C3
| style="background: #3C3;" | 3C3
| style="background: #6C3;" | 6C3
| style="background: #9C3;" | 9C3
| style="background: #CC3;" | CC3
| style="background: #FC3;" | FC3
|- style="color: black;"
| style="background: #0C6;" | 0C6
| style="background: #3C6;" | 3C6
| style="background: #6C6;" | 6C6
| style="background: #9C6;" | 9C6
| style="background: #CC6;" | CC6
| style="background: #FC6;" | FC6
|- style="color: black;"
| style="background: #0C9;" | 0C9
| style="background: #3C9;" | 3C9
| style="background: #6C9;" | 6C9
| style="background: #9C9;" | 9C9
| style="background: #CC9;" | CC9
| style="background: #FC9;" | FC9
|- style="color: black;"
| style="background: #0CC;" | 0CC
| style="background: #3CC;" | 3CC
| style="background: #6CC;" | 6CC
| style="background: #9CC;" | 9CC
| style="background: #CCC;" | CCC
| style="background: #FCC;" | FCC
|- style="color: black;"
| style="background: #0CF;" | 0CF
| style="background: #3CF;" | 3CF
| style="background: #6CF;" | 6CF
| style="background: #9CF;" | 9CF
| style="background: #CCF;" | CCF
| style="background: #FCF;" | FCF
|- style="color: black;"
| style="background: #0F0;" | <u>*0F0*</u>
| style="background: #3F0;" | 3F0
| style="background: #6F0;" | <u>*6F0*</u>
| style="background: #9F0;" | 9F0
| style="background: #CF0;" | CF0
| style="background: #FF0;" | <u>*FF0*</u>
|- style="color: black;"
| style="background: #0F3;" | 0F3
| style="background: #3F3;" | <u>*3F3*</u>
| style="background: #6F3;" | <u>*6F3*</u>
| style="background: #9F3;" | 9F3
| style="background: #CF3;" | CF3
| style="background: #FF3;" | <u>*FF3*</u>
|- style="color: black;"
| style="background: #0F6;" | <u>*0F6*</u>
| style="background: #3F6;" | <u>*3F6*</u>
| style="background: #6F6;" | 6F6
| style="background: #9F6;" | 9F6
| style="background: #CF6;" | <u>*CF6*</u>
| style="background: #FF6;" | <u>*FF6*</u>
|- style="color: black;"
| style="background: #0F9;" | 0F9
| style="background: #3F9;" | 3F9
| style="background: #6F9;" | 6F9
| style="background: #9F9;" | 9F9
| style="background: #CF9;" | CF9
| style="background: #FF9;" | FF9
|- style="color: black;"
| style="background: #0FC;" | <u>*0FC*</u>
| style="background: #3FC;" | <u>*3FC*</u>
| style="background: #6FC;" | 6FC
| style="background: #9FC;" | 9FC
| style="background: #CFC;" | CFC
| style="background: #FFC;" | FFC
|- style="color: black;"
| style="background: #0FF;" | <u>*0FF*</u>
| style="background: #3FF;" | <u>*3FF*</u>
| style="background: #6FF;" | <u>*6FF*</u>
| style="background: #9FF;" | 9FF
| style="background: #CFF;" | CFF
| style="background: #FFF;" | <u>*FFF*</u>
|}</div>

== HTML 색 이름 ==

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

{| class="wikitable"
!색상
!16진수
!색상
!16진수
!색상
!16진수
!색상
!16진수
|-
|[[검정|black]] (검정)
|style="background:#000000; color:#ffffff; font-family:monospace;" lang=en|#000000
|[[은색|silver]] (은색)
|style="background:#c0c0c0; color:#000000; font-family:monospace;" lang=en|#c0c0c0
|[[밤색|maroon]] (밤색)
|style="background:#800000; color:#ffffff; font-family:monospace;" lang=en|#800000
|[[빨강|red]] (빨강)
|style="background:#ff0000; color:#ffffff; font-family:monospace;" lang=en|#ff0000
|-
|[[네이비|navy]] (남색)
|style="background:#000080; color:#ffffff; font-family:monospace;" lang=en|#000080
|[[파랑|blue]] (파랑)
|style="background:#0000ff; color:#ffffff; font-family:monospace;" lang=en|#0000ff
|[[자주|purple]] (자주)
|style="background:#800080; color:#ffffff; font-family:monospace;" lang=en|#800080
|[[자홍|Magenta]] (자홍)
|style="background:#ff77ff; color:#000000; font-family:monospace;" lang=en|#ff00ff
|-
|[[초록|green]] (초록)
|style="background:#008000; color:#ffffff; font-family:monospace;" lang=en|#008000
|[[라임색|lime]] (라임)
|style="background:#00ff00; color:#000000; font-family:monospace;" lang=en|#00ff00
|[[올리브색|olive]] (올리브색)
|style="background:#808000; color:#ffffff; font-family:monospace;" lang=en|#808000
|[[노랑|yellow]] (노랑)
|style="background:#ffff00; color:#000000; font-family:monospace;" lang=en|#ffff00
|-
|[[틸|teal]] (틸)
|style="background:#008080; color:#ffffff; font-family:monospace;" lang=en|#008080
|[[물색|aqua]] (물색)
|style="background:#00ffff; color:#000000; font-family:monospace;" lang=en|#00ffff
|[[회색|gray]] 또는 [[회색|grey]](회색)
|style="background:#808080; color:#ffffff; font-family:monospace;" lang=en|#808080
|[[하양|white]] (하양)
|style="background:#ffffff; color:#000000; font-family:monospace;" lang=en|#ffffff
|}

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

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

{| class="wikitable"
|-
!색상
!16진수
!색상
!16진수
|-
|indianred
|style="background:#cd5c5c; color:#ffffff; font-family:monospace;" lang=en|#cd5c5c
|darksalmon
|style="background:#e9967a; color:#ffffff; font-family:monospace;" lang=en|#e9967a
|-
|lightcoral
|style="background:#f08080; color:#ffffff; font-family:monospace;" lang=en|#f08080
|salmon
|style="background:#fa8072; color:#ffffff; font-family:monospace;" lang=en|#fa8072
|-
|orangered
|style="background:#ff4500; color:#ffffff; font-family:monospace;" lang=en|#ff4500
|[[빨강|red]](빨간색)
|style="background:#ff0000; color:#ffffff; font-family:monospace;" lang=en|#ff0000
|-
|crimson(다홍)
|style="background:#dc143c; color:#ffffff; font-family:monospace;" lang=en|#dc143c
|firebrick
|style="background:#b22222; color:#ffffff; font-family:monospace;" lang=en|#b22222
|-
|darkred(흑적색)
|style="background:#8b0000; color:#ffffff; font-family:monospace;" lang=en|#8b0000
|mediumvioletred
|style="background:#c71585; color:#ffffff; font-family:monospace;" lang=en|#c71585
|-
|pink(분홍)
|style="background:#ffc0cb; font-family:monospace;" lang=en|#ffc0cb
|lightpink(연분홍)
|style="background:#ffb6c1; font-family:monospace;" lang=en|#ffb6c1
|-
|hotpink
|style="background:#ff69b4; font-family:monospace;" lang=en|#ff69b4
|deeppink(진분홍)
|style="background:#ff1493; font-family:monospace;" lang=en|#ff1493
|-
|palevioletred
|style="background:#db7093; font-family:monospace;" lang=en|#db7093
|darkkhaki
|style="background:#bdb76b; font-family:monospace;" lang=en|#bdb76b
|-
|khaki
|style="background:#f0e68c; font-family:monospace;" lang=en|#f0e68c
|palegoldenrod
|style="background:#eee8aa; font-family:monospace;" lang=en|#eee8aa
|-
|lightgoldenrodyellow
|style="background:#fafad2; font-family:monospace;" lang=en|#fafad2
|lightyellow(밝은노랑)
|style="background:#ffffe0; font-family:monospace;" lang=en|#ffffe0
|-
|lemonchiffon
|style="background:#fffacd; font-family:monospace;" lang=en|#fffacd
|[[노랑|yellow]](노랑)
|style="background:#ffff00; font-family:monospace;" lang=en|#ffff00
|-
|[[금색|gold]](금색)
|style="background:#ffd700; font-family:monospace;" lang=en|#ffd700
|papayawhip
|style="background:#ffefd5; font-family:monospace;" lang=en|#ffefd5
|-
|moccasin
|style="background:#ffe4b5; font-family:monospace;" lang=en|#ffe4b5
|peachpuff
|style="background:#ffdab9; font-family:monospace;" lang=en|#ffdab9
|-
|cyan(옥색)
|style="background:#00ffff; font-family:monospace;" lang=en|#00ffff
|aqua
|style="background:#00ffff; font-family:monospace;" lang=en|#00ffff
|-
|aquamarine
|style="background:#7fffd4; font-family:monospace;" lang=en|#7fffd4
|turquoise(터키옥색)
|style="background:#40e0d0; font-family:monospace;" lang=en|#40e0d0
|-
|mediumturquoise
|style="background:#48d1cc; font-family:monospace;" lang=en|#48d1cc
|darkturquoise
|style="background:#00ced1; font-family:monospace;" lang=en|#00ced1
|-
|cadetblue
|style="background:#5f9ea0; color:#ffffff; font-family:monospace;" lang=en|#5f9ea0
|slategray
|style="background:#708090; color:#ffffff; font-family:monospace;" lang=en|#708090
|-
|lightcyan
|style="background:#e0ffff; font-family:monospace;" lang=en|#e0ffff
|paleturquoise
|style="background:#afeeee; font-family:monospace;" lang=en|#afeeee
|-
|powderblue
|style="background:#b0e0e6; font-family:monospace;" lang=en|#b0e0e6
|lightsteelblue
|style="background:#b0c4de; font-family:monospace;" lang=en|#b0c4de
|-
|steelblue
|style="background:#4682b4; color:#ffffff; font-family:monospace;" lang=en|#4682b4
|lightblue(밝은파랑)
|style="background:#add8e6; font-family:monospace;" lang=en|#add8e6
|-
|skyblue(하늘색)
|style="background:#87ceeb; font-family:monospace;" lang=en|#87ceeb
|lightskyblue
|style="background:#87cefa; font-family:monospace;" lang=en|#87cefa
|-
|deepskyblue
|style="background:#00bfff; font-family:monospace;" lang=en|#00bfff
|cornflowerblue
|style="background:#6495ed; font-family:monospace;" lang=en|#6495ed
|-
|royalblue
|style="background:#4169e1; font-family:monospace;" lang=en|#4169e1
|mediumslateblue
|style="background:#7b68ee; font-family:monospace;" lang=en|#7b68ee
|-
|dodgerblue
|style="background:#1e90ff; font-family:monospace;" lang=en|#1e90ff
|blue(파랑)
|style="background:#0000ff; color:#ffffff; font-family:monospace;" lang=en|#0000ff
|-
|mediumblue
|style="background:#0000cd; color:#ffffff; font-family:monospace;" lang=en|#0000cd
|darkblue
|style="background:#00008b; color:#ffffff; font-family:monospace;" lang=en|#00008b
|-
|navy(남색)
|style="background:#000080; color:#ffffff; font-family:monospace;" lang=en|#000080
|midnightblue
|style="background:#191970; color:#ffffff; font-family:monospace;" lang=en|#191970
|-
|lightsalmon
|style="background:#ffa07a; font-family:monospace;" lang=en|#ffa07a
|orange(오렌지색)
|style="background:#ffa500; font-family:monospace;" lang=en|#ffa500
|-
|darkorange
|style="background:#ff8c00; font-family:monospace;" lang=en|#ff8c00
|coral
|style="background:#ff7f50; font-family:monospace;" lang=en|#ff7f50
|-
|tomato
|style="background:#ff6347; font-family:monospace;" lang=en|#ff6347
|orangered
|style="background:#ff4500; font-family:monospace;" lang=en|#ff4500
|-
|aquamarine
|style="background:#7fffd4; font-family:monospace;" lang=en|#7fffd4
|mediumspringgreen
|style="background:#00fa9a; font-family:monospace;" lang=en|#00fa9a
|-
|springgreen(춘록색)
|style="background:#00ff7f; font-family:monospace;" lang=en|#00ff7f
|palegreen
|style="background:#98fb98; font-family:monospace;" lang=en|#98fb98
|-
|greenyellow(초록노랑)
|style="background:#adff2f; font-family:monospace;" lang=en|#adff2f
|chartreuse
|style="background:#7fff00; font-family:monospace;" lang=en|#7fff00
|-
|lawngreen
|style="background:#7cfc00; font-family:monospace;" lang=en|#7cfc00
|lime(라임색)
|style="background:#00ff00; font-family:monospace;" lang=en|#00ff00
|-
|lightgreen
|style="background:#90ee90; font-family:monospace;" lang=en|#90ee90
|yellowgreen(노랑초록)
|style="background:#9acd32; font-family:monospace;" lang=en|#9acd32
|-
|limegreen(라임초록)
|style="background:#32cd32; font-family:monospace;" lang=en|#32cd32
|mediumseagreen
|style="background:#3cb371; font-family:monospace;" lang=en|#3cb371
|-
|darkseagreen
|style="background:#8fbc8f; font-family:monospace;" lang=en|#8fbc8f
|forestgreen
|style="background:#228b22; color:#ffffff; font-family:monospace;" lang=en|#228b22
|-
|seagreen
|style="background:#2e8b57; color:#ffffff; font-family:monospace;" lang=en|#2e8b57
|green(초록)
|style="background:#008000; color:#ffffff; font-family:monospace;" lang=en|#008000
|-
|olivedrab
|style="background:#6b8e23; color:#ffffff; font-family:monospace;" lang=en|#6b8e23
|olive(올리브색)
|style="background:#808000; color:#ffffff; font-family:monospace;" lang=en|#808000
|-
|darkolivegreen
|style="background:#556b2f; color:#ffffff; font-family:monospace;" lang=en|#556b2f
|darkgreen
|style="background:#006400; color:#ffffff; font-family:monospace;" lang=en|#006400
|-
|mediumaquamarine
|style="background:#66cdaa; font-family:monospace;" lang=en|#66cdaa
|turquoise
|style="background:#40e0d0; font-family:monospace;" lang=en|#40e0d0
|-
|lightseagreen
|style="background:#20b2aa; font-family:monospace;" lang=en|#20b2aa
|darkcyan
|style="background:#008b8b; color:#ffffff; font-family:monospace;" lang=en|#008b8b
|-
|teal
|style="background:#008080; color:#ffffff; font-family:monospace;" lang=en|#008080
|lavender(라벤더색)
|style="background:#e6e6fa; font-family:monospace;" lang=en|#e6e6fa
|-
|thistle
|style="background:#d8bfd8; font-family:monospace;" lang=en|#d8bfd8
|plum(자두색)
|style="background:#dda0dd; font-family:monospace;" lang=en|#dda0dd
|-
|violet(자주색)
|style="background:#ee82ee; font-family:monospace;" lang=en|#ee82ee
|fuchsia
|style="background:#ff77ff; font-family:monospace;" lang=en|#ff77ff
|-
|magenta(마젠타색)
|style="background:#ff00ff; font-family:monospace;" lang=en|#ff00ff
|orchid(난초색)
|style="background:#da70d6; font-family:monospace;" lang=en|#da70d6
|-
|mediumorchid
|style="background:#ba55d3; font-family:monospace;" lang=en|#ba55d3
|darkorchid
|style="background:#9932cc; color:#ffffff; font-family:monospace;" lang=en|#9932cc
|-
|blueviolet(청자색)
|style="background:#8a2be2; color:#ffffff; font-family:monospace;" lang=en|#8a2be2
|darkviolet
|style="background:#9400d3; color:#ffffff; font-family:monospace;" lang=en|#9400d3
|-
|mediumpurple
|style="background:#9370db; color:#ffffff; font-family:monospace;" lang=en|#9370db
|slateblue
|style="background:#6a5acd; color:#ffffff; font-family:monospace;" lang=en|#6a5acd
|-
|purple(보라색)
|style="background:#800080; color:#ffffff; font-family:monospace;" lang=en|#800080
|darkmagenta
|style="background:#8b008b; color:#ffffff; font-family:monospace;" lang=en|#8b008b
|-
|darkslateblue
|style="background:#483d8b; color:#ffffff; font-family:monospace;" lang=en|#483d8b
|indigo
|style="background:#4b0082; color:#ffffff; font-family:monospace;" lang=en|#4b0082
|-
|honeydew
|style="background:#f0fff0; font-family:monospace;" lang=en|#f0fff0
|mintcream
|style="background:#f5fffa; font-family:monospace;" lang=en|#f5fffa
|-
|azure
|style="background:#f0ffff; font-family:monospace;" lang=en|#f0ffff
|aliceblue
|style="background:#f0f8ff; font-family:monospace;" lang=en|#f0f8ff
|-
|GhostWhite
|style="background:#f8f8ff; font-family:monospace;" lang=en|#f8f8ff
|whitesmoke
|style="background:#f5f5f5; font-family:monospace;" lang=en|#f5f5f5
|-
|lavenderblush
|style="background:#fff0f5; font-family:monospace;" lang=en|#fff0f5
|mistyrose
|style="background:#ffe4e1; font-family:monospace;" lang=en|#ffe4e1
|-
|antiquewhite
|style="background:#faebd7; font-family:monospace;" lang=en|#faebd7
|seashell(조개색)
|style="background:#fff5ee; font-family:monospace;" lang=en|#fff5ee
|-
|snow(눈색)
|style="background:#fffafa; font-family:monospace;" lang=en|#fffafa
|white(하양)
|style="background:#ffffff; font-family:monospace;" lang=en|#ffffff
|-
|beige(베이지)
|style="background:#f5f5dc; font-family:monospace;" lang=en|#f5f5dc
|linen(아마포색)
|style="background:#faf0e6; font-family:monospace;" lang=en|#faf0e6
|-
|oldlace
|style="background:#fdf5e6; font-family:monospace;" lang=en|#fdf5e6
|floralwhite
|style="background:#fffaf0; font-family:monospace;" lang=en|#fffaf0
|-
|ivory(상아색)
|style="background:#fffff0; font-family:monospace;" lang=en|#fffff0
|gainsboro
|style="background:#dcdcdc; font-family:monospace;" lang=en|#dcdcdc
|-
|lightgrey(밝은 회색)
|style="background:#d3d3d3; font-family:monospace;" lang=en|#d3d3d3
|silver(은색)
|style="background:#c0c0c0; font-family:monospace;" lang=en|#c0c0c0
|-
|darkgray
|style="background:#a9a9a9; font-family:monospace;" lang=en|#a9a9a9
|gray(회색)
|style="background:#808080; color:#ffffff; font-family:monospace;" lang=en|#808080
|-
|dimgray
|style="background:#696969; color:#ffffff; font-family:monospace;" lang=en|#696969
|darkslategray
|style="background:#2f4f4f; color:#ffffff; font-family:monospace;" lang=en|#2f4f4f
|-
|lightslategray
|style="background:#778899; color:#ffffff; font-family:monospace;" lang=en|#778899
|slategray
|style="background:#708090; color:#ffffff; font-family:monospace;" lang=en|#708090
|-
|cornsilk
|style="background:#fff8dc; font-family:monospace;" lang=en|#fff8dc
|blanchedalmond
|style="background:#ffebcd; font-family:monospace;" lang=en|#ffebcd
|-
|bisque
|style="background:#ffe4c4; font-family:monospace;" lang=en|#ffe4c4
|navajowhite
|style="background:#ffdead; font-family:monospace;" lang=en|#ffdead
|-
|wheat
|style="background:#f5deb3; font-family:monospace;" lang=en|#f5deb3
|sandybrown
|style="background:#f4a460; font-family:monospace;" lang=en|#f4a460
|-
|goldenrod
|style="background:#daa520; font-family:monospace;" lang=en|#daa520
|darkgoldenrod
|style="background:#b8860b; font-family:monospace;" lang=en|#b8860b
|-
|peru
|style="background:#cd853f; font-family:monospace;" lang=en|#cd853f
|chocolate
|style="background:#d2691e; font-family:monospace;" lang=en|#d2691e
|-
|maroon(적갈색)
|style="background:#800000; color:#ffffff; font-family:monospace;" lang=en|#800000
|saddlebrown
|style="background:#8b4513; color:#ffffff; font-family:monospace;" lang=en|#8b4513
|-
|brown(갈색)
|style="background:#a52a2a; color:#ffffff; font-family:monospace;" lang=en|#a52a2a
|sienna
|style="background:#a0522d; color:#ffffff; font-family:monospace;" lang=en|#a0522d
|-
|darkred
|style="background:#8b0000; color:#ffffff; font-family:monospace;" lang=en|#8b0000
|burlywood
|style="background:#deb887; font-family:monospace;" lang=en|#deb887
|-
|tan(황갈색)
|style="background:#d2b48c; font-family:monospace;" lang=en|#d2b48c
|rosybrown
|style="background:#bc8f8f; font-family:monospace;" lang=en|#bc8f8f
|-
|black(검정색)
|style="background:#000000; color:#ffffff; font-family:monospace;" lang=en|#000000
|chrome(황연색)
|style="background:#F7E600; font-family:monospace;" lang=en|#F7E600
|}

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

{| class="wikitable"
!색상
!16진수
|-
|[[주황|orange]]
|style="background:#ffa500; color:#000000; font-family:monospace;" lang=en|#ffa500
|}

{{웹 색상}}
{{색 주제}}

[[분류:색]]
[[분류:웹 디자인]]

{{퍼온문서|웹 색상}}