HTML 입문 | HTML 기본 요소 | HTML 색(color)

HTML에서 색을 표현하는 방법은 다음과 같이 세 가지 방법이 있다.

  1. 색상 이름으로 표현
  2. RGB 색상값으로 표현
  3. 16진수 색상값으로 표현

색상 이름으로 표현

W3C에서 정의한 16개의 HTML4 표준 색상 이름 및 sRGB은 다음과 같다.

기본 색상 키워드 목록은 16개이고, 색상 이름은 대소 문자를 구분하지 않는다.

색상 이름 Hex rgb Decimal
black #000000 0,0,0
silver #C0C0C0 192,192,192
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255

현재는 주요 브라우저가 147개의 색상 이름을 모두 지원하고 있다.

색상 이름 Hex rgb Decimal
aliceblue #F0F8FF 240,248,255
antiquewhite #FAEBD7 250,235,215
aqua #00FFFF 0,255,255
aquamarine #7FFFD4 127,255,212
azure #F0FFFF 240,255,255
beige #F5F5DC 245,245,220
bisque #FFE4C4 255,228,196
black #000000 0,0,0
blanchedalmond #FFEBCD 255,235,205
blue #0000FF 0,0,255
blueviolet #8A2BE2 138,43,226
brown #A52A2A 165,42,42
burlywood #DEB887 222,184,135
cadetblue #5F9EA0 95,158,160
chartreuse #7FFF00 127,255,0
chocolate #D2691E 210,105,30
coral #FF7F50 255,127,80
cornflowerblue #6495ED 100,149,237
cornsilk #FFF8DC 255,248,220
crimson #DC143C 220,20,60
cyan #00FFFF 0,255,255
darkblue #00008B 0,0,139
darkcyan #008B8B 0,139,139
darkgoldenrod #B8860B 184,134,11
darkgray #A9A9A9 169,169,169
darkgreen #006400 0,100,0
darkgrey #A9A9A9 169,169,169
darkkhaki #BDB76B 189,183,107
darkmagenta #8B008B 139,0,139
darkolivegreen #556B2F 85,107,47
darkorange #FF8C00 255,140,0
darkorchid #9932CC 153,50,204
darkred #8B0000 139,0,0
darksalmon #E9967A 233,150,122
darkseagreen #8FBC8F 143,188,143
darkslateblue #483D8B 72,61,139
darkslategray #2F4F4F 47,79,79
darkslategrey #2F4F4F 47,79,79
darkturquoise #00CED1 0,206,209
darkviolet #9400D3 148,0,211
deeppink #FF1493 255,20,147
deepskyblue #00BFFF 0,191,255
dimgray #696969 105,105,105
dimgrey #696969 105,105,105
dodgerblue #1E90FF 30,144,255
firebrick #B22222 178,34,34
floralwhite #FFFAF0 255,250,240
forestgreen #228B22 34,139,34
fuchsia #FF00FF 255,0,255
gainsboro #DCDCDC 220,220,220
ghostwhite #F8F8FF 248,248,255
gold #FFD700 255,215,0
goldenrod #DAA520 218,165,32
gray #808080 128,128,128
green #008000 0,128,0
greenyellow #ADFF2F 173,255,47
grey #808080 128,128,128
honeydew #F0FFF0 240,255,240
hotpink #FF69B4 255,105,180
indianred #CD5C5C 205,92,92
indigo #4B0082 75,0,130
ivory #FFFFF0 255,255,240
khaki #F0E68C 240,230,140
lavender #E6E6FA 230,230,250
lavenderblush #FFF0F5 255,240,245
lawngreen #7CFC00 124,252,0
lemonchiffon #FFFACD 255,250,205
lightblue #ADD8E6 173,216,230
lightcoral #F08080 240,128,128
lightcyan #E0FFFF 224,255,255
lightgoldenrodyellow #FAFAD2 250,250,210
lightgray #D3D3D3 211,211,211
lightgreen #90EE90 144,238,144
lightgrey #D3D3D3 211,211,211
lightpink #FFB6C1 255,182,193
lightsalmon #FFA07A 255,160,122
lightseagreen #20B2AA 32,178,170
lightskyblue #87CEFA 135,206,250
lightslategray #778899 119,136,153
lightslategrey #778899 119,136,153
lightsteelblue #B0C4DE 176,196,222
lightyellow #FFFFE0 255,255,224
lime #00FF00 0,255,0
limegreen #32CD32 50,205,50
linen #FAF0E6 250,240,230
magenta #FF00FF 255,0,255
maroon #800000 128,0,0
mediumaquamarine #66CDAA 102,205,170
mediumblue #0000CD 0,0,205
mediumorchid #BA55D3 186,85,211
mediumpurple #9370DB 147,112,219
mediumseagreen #3CB371 60,179,113
mediumslateblue #7B68EE 123,104,238
mediumspringgreen #00FA9A 0,250,154
mediumturquoise #48D1CC 72,209,204
mediumvioletred #C71585 199,21,133
midnightblue #191970 25,25,112
mintcream #F5FFFA 245,255,250
mistyrose #FFE4E1 255,228,225
moccasin #FFE4B5 255,228,181
navajowhite #FFDEAD 255,222,173
navy #000080 0,0,128
oldlace #FDF5E6 253,245,230
olive #808000 128,128,0
olivedrab #6B8E23 107,142,35
orange #FFA500 255,165,0
orangered #FF4500 255,69,0
orchid #DA70D6 218,112,214
palegoldenrod #EEE8AA 238,232,170
palegreen #98FB98 152,251,152
paleturquoise #AFEEEE 175,238,238
palevioletred #DB7093 219,112,147
papayawhip #FFEFD5 255,239,213
peachpuff #FFDAB9 255,218,185
peru #CD853F 205,133,63
pink #FFC0CB 255,192,203
plum #DDA0DD 221,160,221
powderblue #B0E0E6 176,224,230
purple #800080 128,0,128
red #FF0000 255,0,0
rosybrown #BC8F8F 188,143,143
royalblue #4169E1 65,105,225
saddlebrown #8B4513 139,69,19
salmon #FA8072 250,128,114
sandybrown #F4A460 244,164,96
seagreen #2E8B57 46,139,87
seashell #FFF5EE 255,245,238
sienna #A0522D 160,82,45
silver #C0C0C0 192,192,192
skyblue #87CEEB 135,206,235
slateblue #6A5ACD 106,90,205
slategray #708090 112,128,144
slategrey #708090 112,128,144
snow #FFFAFA 255,250,250
springgreen #00FF7F 0,255,127
steelblue #4682B4 70,130,180
tan #D2B48C 210,180,140
teal #008080 0,128,128
thistle #D8BFD8 216,191,216
tomato #FF6347 255,99,71
turquoise #40E0D0 64,224,208
violet #EE82EE 238,130,238
wheat #F5DEB3 245,222,179
white #FFFFFF 255,255,255
whitesmoke #F5F5F5 245,245,245
yellow #FFFF00 255,255,0
yellowgreen #9ACD32 154,205,50

아래는 위에 색상 이름으로 만든 예제이다.

<div style="color:blue">색상 이름으로 표현된 파란색(blue)</div>
<div style="color:green">색상 이름으로 표현된 녹색(green)</div>
<div style="color:silver">색상 이름으로 표현된 은색(silver)</div>
<div style="color:teal">색상 이름으로 표현된 청록색(teal)</div>
<div style="color:red">색상 이름으로 표현된 빨간색(red)</div>

코드 실행

RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

<div style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색(0,0,255)</div>
<div style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색(0,128,0)</div>
<div style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색(192,192,192)</div>
<div style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색(0,128,128)</div>
<div style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색(255,0,0)</div>

코드 실행

Hex rgb(16진수) 색상값으로 표현

Hex rgb(16진수) 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다.
따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

예를 들면, 빨간색을 나타내는 RGB 색상값인 **rgb(255,0,0)**은 16진수 색상값으로는 #FF0000이 된다.

<div style="color:#0000FF">16진수 색상값으로 표현된 파란색(#0000FF)</div>
<div style="color:#008000">16진수 색상값으로 표현된 녹색(#008000)</div>
<div style="color:#C0C0C0">16진수 색상값으로 표현된 은색(#C0C0C0)</div>
<div style="color:#008080">16진수 색상값으로 표현된 청록색(#008080)</div>
<div style="color:#FF0000">16진수 색상값으로 표현된 빨간색(#FF0000)</div>

코드 실행

참조




최종 수정 : 2021-08-27