HTML 색 배경, 글자색, 테두리색 및 색상코드 목록

HTML 색상 코드 148 with HEX 코드

자주 쓰는 색은 이름이 등록되어 알파벳 입력으로도 색을 불러올 수 있습니다.

HTML 색 이름 표
색이름 HEX
White #FFFFFF
Snow #FFFAFA
Honeydew #F0FFF0
MintCream #F5FFFA
Azure #F0FFFF
AliceBlue #F0F8FF
GhostWhite #F8F8FF
WhiteSmoke #F5F5F5
Seashell #FFF5EE
Beige #F5F5DC
OldLace #FDF5E6
FloralWhite #FFFAF0
Ivory #FFFFF0
AntiqueWhite #FAEBD7
Linen #FAF0E6
LavenderBlush #FFF0F5
MistyRose #FFE4E1
Cornsilk #FFF8DC
BlanchedAlmond #FFEBCD
Bisque #FFE4C4
NavajoWhite #FFDEAD
Wheat #F5DEB3
Burlywood #DEB887
Tan #D2B48C
RosyBrown #BC8F8F
SandyBrown #F4A460
Goldenrod #DAA520
DarkGoldenrod #B8860B
Peru #CD853F
Chocolate #D2691E
SaddleBrown #8B4513
Sienna #A0522D
Brown #A52A2A
Maroon #800000
LightSalmon #FFA07A
Salmon #FA8072
DarkSalmon #E9967A
LightCoral #F08080
IndianRed #CD5C5C
Crimson #DC143C
Firebrick #B22222
DarkRed #8B0000
Red #FF0000
OrangeRed #FF4500
Tomato #FF6347
Coral #FF7F50
DarkOrange #FF8C00
Orange #FFA500
Yellow #FFFF00
LightYellow #FFFFE0
LemonChiffon #FFFACD
LightGoldenrodYellow #FAFAD2
PapayaWhip #FFEFD5
Moccasin #FFE4B5
PeachPuff #FFDAB9
PaleGoldenrod #EEE8AA
Khaki #F0E68C
DarkKhaki #BDB76B
Gold #FFD700
DarkOliveGreen #556B2F
Olive #808000
OliveDrab #6B8E23
YellowGreen #9ACD32
LimeGreen #32CD32
Lime #00FF00
LawnGreen #7CFC00
Chartreuse #7FFF00
GreenYellow #ADFF2F
SpringGreen #00FF7F
MediumSpringGreen #00FA9A
LightGreen #90EE90
PaleGreen #98FB98
DarkSeaGreen #8FBC8F
MediumAquamarine #66CDAA
MediumSeaGreen #3CB371
SeaGreen #2E8B57
ForestGreen #228B22
Green #008000
DarkGreen #006400
Aqua #00FFFF
Cyan #00FFFF
LightCyan #E0FFFF
PaleTurquoise #AFEEEE
Aquamarine #7FFFD4
Turquoise #40E0D0
MediumTurquoise #48D1CC
DarkTurquoise #00CED1
LightSeaGreen #20B2AA
CadetBlue #5F9EA0
DarkCyan #008B8B
Teal #008080
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
LightBlue #ADD8E6
SkyBlue #87CEEB
LightSkyBlue #87CEFA
DeepSkyBlue #00BFFF
DodgerBlue #1E90FF
CornflowerBlue #6495ED
SteelBlue #4682B4
RoyalBlue #4169E1
Blue #0000FF
MediumBlue #0000CD
DarkBlue #00008B
Navy #000080
MidnightBlue #191970
Pink #FFC0CB
LightPink #FFB6C1
HotPink #FF69B4
DeepPink #FF1493
PaleVioletRed #DB7093
MediumVioletRed #C71585
Lavender #E6E6FA
Thistle #D8BFD8
Plum #DDA0DD
Violet #EE82EE
Orchid #DA70D6
Fuchsia #FF00FF
Magenta #FF00FF
MediumOrchid #BA55D3
MediumPurple #9370DB
BlueViolet #8A2BE2
DarkViolet #9400D3
DarkOrchid #9932CC
DarkMagenta #8B008B
Purple #800080
Indigo #4B0082
DarkSlateBlue #483D8B
SlateBlue #6A5ACD
MediumSlateBlue #7B68EE
RebeccaPurple #663399
Gainsboro #DCDCDC
LightGray #D3D3D3
LightGrey #D3D3D3
Silver #C0C0C0
DarkGray #A9A9A9
DarkGrey #A9A9A9
Gray #808080
Grey #808080
DimGray #696969
DimGrey #696969
LightSlateGray #778899
LightSlateGrey #778899
SlateGray #708090
SlateGrey #708090
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
Black #000000

HTML 색

HTML 색 변경은 태그 뒤에 style 속성을 추가한 후, 입력합니다.  HTML의 색 변경 방법은 크게 두 가지가 있습니다.

하나는 <tag style>과 같이 style이 속성일 경우 태그 뒤에 바로 삽입하는 방법입니다. 다른 하나는 <style>을 태그로 사용하여 CSS 선택자로 디자인 하는 방법입니다.

CSS로 활용하는 경우 <style> 태그는 <head> 태그 사이에 위치합니다. 가장 보편적인 방법이 CSS 선택자를 이용해서 색을 디자인 하는 방법입니다.

HTML 태그 배경색

HTML 태그 배경색 변경은 태그 뒤에 style 속성과 background-color 속성을 입력합니다. 색 이름(gold, greenyellow, tomato )또는 색 코드(#D6B1EA)를 입력합니다.

<body style="background-color:gold;">
  <h1 style="background-color:greenyellow;">html 태그 배경색 변경</h1>
    <p style="background-color:tomato;">태그 뒤에 style 속성과 background-color 속성 입력을 통해 배경색을 변경합니다.</p>
    <ul>
      <li style="background-color:magenta">body 태그 부터 li 태그까지 대부분의 태그 배경색 변경이 가능합니다.</li>
      <li style="background-color:#D6B1EA;">끝은 세미콜론 ; 으로 닫습니다.</li>
    </ul>
</body>

HTML 글자 색

HTML 글자 색 변경은 태그 뒤에 style 속성과 color 속성으로 변경합니다. color 속성 뒤에 색 이름(red, green, blue, hotpink) 또는 색 코드(#83AB57)를 입력합니다.

<h1 style="color:red;">HTML 글자색 변경</h1>
  <ol>
    <li style="color:green;">HTMl 글자 색 변경은 태그 뒤에 style 속성을 입력합니다.</li>
    <li style="color:blue;">style 속성 뒤에 color 속성을 입력합니다.</li>
    <li style="color:hotpink;">color 속성 뒤에 색상 이름 또는 색상 코드를 입력합니다.</li>
    <li style="color:#83AB57;">글자 변경 속성은 text-color 또는 font-color가 아님을 주의합니다.</li>
  </ol>

HTML 테두리 색

테두리 색 변경은 border 속성을 사용합니다. style 속성 뒤에 border 속성을 입력합니다.

<h1 style="border:1px solid red;">HTML 테두리 색 변경</h1>
  <p style="border:1px solid blue;">HTML 테두리 색 변경은 style 속성 뒤에 border 값을 입력합니다.</p>
  <p style="border:5px solid #57AB9A">px은 선의 두께, solid는 선의 종류입니다.</p>
  <p style="border:green solid 2px">border 뒤에 나오는 두께, 선 종류, 선 색상의 순서는 상관이 없습니다.</p>

border 속성 뒤에 선 두께(px), 선 종류(solid), 색 이름(red, blue, green) 또는 색 코드(#57AB9A)를 입력합니다.