색상 이름(Color Name)

모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(Web Safe Color)라고 한다. 기본 16가지 색상을 포함해 216가지다.


16진수(HEX)

빨간색(Red), 초록색(Green), 파란색(Blue)의 양을 00부터 FF까지 #RRGGBB 형식으로 표시한다.


RGB

빨간색, 초록색, 파란색의 양을 0부터 255로 표시한다. rgba의 경우 마지막 값은 불투명도 값으로 0부터 1까지 사용할 수 있다. 


Pink Colors

Pink

#FFC0CB

rgba(255, 192, 203, 1) 

LightPink

#FFB6C1 

rgba(255, 182, 193, 1) 

HotPink

#FF69B4 

rgba(255, 105, 180, 1) 

DeepPink

#FF1493 

rgba(255, 20, 147, 1) 

PaleVioletRed

#DB7093

rgba(219, 112, 147, 1) 

MediumVioletRed

#C71585 

rgba(199, 21, 133, 1) 


Red Colors

LightSalmon

#FFA07A

rgba(255, 160, 122, 1)

Salmon

#FA8072 

rgba(250, 128, 114, 1) 

DarkSalmon

#E9967A 

rgba(233, 150, 122, 1) 

LightCoral

#F08080 

rgba(240, 128, 128, 1) 

IndianRed

#CD5C5C 

rgba(205, 92, 92, 1) 

Crimson

#DC143C 

rgba(220, 20, 60, 1) 

FireBrick

#B22222 

rgba(178, 34, 34, 1) 

DarkRed

#8B0000 

rgba(139, 0, 0, 1) 


Orange Colors

Red

#FF0000 

rgba(255, 0, 0, 1) 

OrangeRed

#FF4500 

rgba(255, 69, 9, 1) 

Tomato

#FF6347 

rgba(255, 99, 71, 1) 

Coral

#FF7F50 

rgba(255, 127, 80, 1) 

DarkOrange

#FF8C00 

rgba(255, 140, 0, 1) 

Orange

#FFA500 

rgba(255, 165, 0, 1) 

Gold

#FFD700 

rgba(255, 215, 0, 1) 

Yellow

#FFFF00 

rgba(255, 255, 0, 1) 


Yellow Colors

LightYellow

#FFFFE0 

rgba(255, 255, 224, 1) 

LemonChiffon

#FFFACD 

rgba(255, 250, 205, 1) 

LightGoldenrodYellow

#FAFAD2 

rgba(250, 250, 210, 1) 

PapayaWhip

#FFEFD5 

rgba(255, 239, 213, 1) 

Moccasin

#FFE4B5 

rgba(255, 228, 181, 1) 

PeachPuff

#FFDAB9 

rgba(255, 218, 185, 1) 

PaleGoldenrod

#EEE8AA 

rgba(238, 232, 170, 1) 

Khaki

#F0E68C 

rgba(240, 230, 140, 1) 

DarkKhaki

#BDB76B 

rgba(189, 183, 107, 1) 


Brown Colors

Cornsilk

#FFF8DC 

rgba(255, 248, 220, 1) 

BlanchedAlmond

#FFEBCD 

rgba(255, 235, 205, 1)

Bisque

#FFE4C4 

rgba(255, 228, 196, 1) 

NavajoWhite

#FFDEAD 

rgba(255, 222, 173, 1) 

Wheat

#F5DEB3

rgba(245, 222, 179, 1)

BurlyWood

#DEB887 

rgba(222, 184, 135, 1) 

Tan

#D2B48C 

rgba(210, 180, 140, 1) 

RosyBrown

#BC8F8F 

rgba(188, 143, 143, 1) 

SandyBrown

#F4A460 

rgba(244, 164, 96, 1) 

Goldenrod

#DAA520 

rgba(218, 165, 32, 1) 

DarkGoldenrod

#B8860B 

rgba(184, 134, 11, 1) 

Peru

#CD853F 

rgba(205, 133, 63, 1) 

Chocolate

#D2691E 

rgba(210, 105, 30, 1) 

SaddleBrown

#8B4513 

rgba(139, 69, 19, 1) 

Sienna

#A0522D 

rgba(160, 82, 45, 1) 

Brown

#A52A2A 

rgba(165, 42, 42, 1) 

Maroon

#800000 

rgba(128, 0, 0, 1) 


Green Colors

DarkOliveGreen

#556B2F 

rgba(85, 107, 47, 1) 

Olive

#808000 

rgba(128, 128, 0, 1) 

OliveDrab

#6B8E23 

rgba(107, 142, 35, 1) 

YellowGreen

#9ACD32 

rgba(154, 205, 50, 1) 

LimeGreen

#32CD32 

rgba(50, 205, 50, 1) 

Lime

#00FF00 

rgba(0, 255, 0, 1) 

LawnGreen

#7CFC00 

rgba(124, 252, 0, 1) 

Chartreuse

#7FFF00 

rgba(127, 255, 0, 1) 

GreenYellow

#ADFF2F 

rgba(173, 255, 47, 1) 

SpringGreen

#00FF7F 

rgba(0, 255, 127, 1) 

MediumSpringGreen

#00FA9A 

rgba(0, 250, 154, 1) 

LightGreen

#90EE90 

rgba(144, 238, 144, 1) 

PaleGreen

#98FB98 

rgba(152, 251, 152, 1) 

DarkSeaGreen

#8FBC8F 

rgba(143, 188, 143, 1) 

MeduynAquamarine

#66CDAA  

rgba(102, 205, 170, 1)  

MediumSeaGreen

#3CB371 

rgba(60, 179, 113, 1) 

SeaGreen

#2E8B57 

rgba(46, 139, 87, 1) 

ForestGreen

#228B22 

rgba(34, 139, 34, 1) 

Green

#008000 

rgba(0, 128, 0, 1) 

DarkGreen

#006400 

rgba(0, 100, 0, 1) 


Cyan Colors

Aqua

#00FFFF 

rgba(0, 255, 255, 1) 

LightCyan

#E0FFFF 

rgba(224, 255, 255, 1) 

PaleTurquoise

#AFEEEE 

rgba(175, 238, 238, 1) 

Aquamarine

#7FFD4 

rgba(127, 255, 212, 1) 

Turquoise

#40E0D0 

rgba(64, 224, 208, 1) 

MediumTurquoise

#48D1CC 

rgba(72, 209, 204, 1) 

DarkTurquoise

#00CED1 

rgba(0, 206, 209, 1) 

LightSeaGreen

#20B2AA 

rgba(32, 178, 170, 1) 

CadetBlue

#5F9EA0 

rgba(95, 158, 160, 1) 

DarkCyan

#008B8B 

rgba(0, 139, 139, 1) 

Teal

#008080 

rgba(0, 128, 128, 1) 


Blue Colors

LightSteelBlue

#B0C4DE 

rgba(176, 196, 222, 1) 

PowderBlue

#B0E0E6 

rgba(176, 224, 230, 1) 

LightBlue

#ADD8E6 

rgba(173, 216, 230, 1) 

SkyBlue

#87CEEB 

rgba(135, 206, 235, 1) 

LightSkyBlue

#87CEFA 

rgba(135, 206, 250, 1) 

DeepSkyBlue

#00BFFF 

rgba(0, 191, 255, 1) 

DodgerBlue

#1E90FF 

rgba(30, 144, 255, 1) 

CornflowerBlue

#6495ED 

rgba(100, 149, 237, 1) 

SteelBlue

#4682B4 

rgba(70, 130, 180, 1) 

RoyalBlue

#4169E1 

rgba(65, 105, 225, 1) 

Blue

#0000FF 

rgba(0, 0, 255, 1) 

MediumBlue

#0000CD 

rgba(0, 0, 205, 1) 

DarkBlue

#00008B 

rgba(0, 0, 139, 1) 

Navy

#000080 

rgba(0, 0, 128, 1) 

MidnightBlue

#191970 

rgba(25, 25, 112, 1) 


Magenta Colors

Lavender

#E6E6FA 

rgba(230, 230, 250, 1) 

Thistle

#D8BFD8 

rgba(216, 191, 216, 1) 

Plum

#DDA0DD 

rgba(221, 160, 221, 1) 

Violet

#EE82EE 

rgba(238, 130, 238, 1) 

Orchid

#DA70D6 

rgba(218, 112, 214, 1) 

Fuchsia

#FF00FF 

rgba(255, 0, 255, 1) 

MediumOrchid

#BA55D3 

rgba(186, 85, 211, 1) 

MediumPurple

#9370DB 

rgba(147, 112, 219, 1) 

BlueViolet

#8A2BE2 

rgba(138, 43, 226, 1) 

DarkViolet

#9400D3 

rgba(148, 0, 211, 1) 

DarkOrchid

#9932CC 

rgba(153, 50, 204, 1) 

DarkMagenta

#8B008B 

rgba(139, 0, 139, 1) 

Purple

#800080 

rgba(128, 0, 128, 1) 

RebeccaPurple

#663399 

rgba(102, 51, 153, 1) 

Indigo

#4B0082 

rgba(75, 0, 130, 1) 

DarkSlateBlue

#483D8B 

rgba(72, 61, 139, 1) 

SlateBlue

#6A5ACD 

rgba(106, 90, 205, 1) 

MediumSlateBlue

#7B68EE 

rgba(123, 104, 238, 1) 


White Colors

White

#FFFFFF 

rgba(255, 255, 255, 1) 

Snow

#FFFAFA 

rgba(255, 250, 250, 1) 

Honeydew

#F0FFF0 

rgba(240, 255, 240, 1)

MintCream

#F5FFFA 

rgba(245, 255, 250, 1) 

Azure

#F0FFFF 

rgba(240, 255, 255, 1) 

AliceBlue

#F0F8FF 

rgba(240, 248, 255, 1)

GhostWhite

#F8F8FF 

rgba(248, 248, 255, 1) 

WhiteSmoke

#F5F5F5 

rgba(245, 245, 245, 1) 

Seashell

#FFF5EE 

rgba(255, 245, 238, 1) 

Beige

#F5F5DC 

rgba(245, 245, 220, 1) 

OldLace

#FDF5E6 

rgba(253, 245, 230, 1) 

FloralWhite

#FFFAF0 

rgba(255, 250, 240, 1) 

Ivory

#FFFFF0 

rgba(255, 255, 240, 1) 

AntiqueWhite

#FAEBD7 

rgba(250, 235, 215, 1) 

Linen

#FAF0E6 

rgba(250, 240, 230, 1) 

LavenderBlush

#FFF0F5 

rgba(255, 240, 245, 1) 

MistyRose

#FFE4E1 

rgba(255, 228, 225, 1) 


Black Colors

Gainsboro

#DCDCDC 

rgba(220, 220, 220, 1) 

LightGray

#D3D3D3 

rgba(211, 211, 211, 1) 

Silver

#C0C0C0 

rgba(192, 192, 192, 1) 

DarkGray

#A9A9A9 

rgba(169, 169, 169, 1) 

Gray

#808080 

rgba(128, 128, 128, 1) 

DimGray

#696969 

rgba(105, 105, 105, 1) 

LightSlateGray

#778899 

rgba(119, 136, 153, 1) 

SlateGray

#708090 

rgba(112, 128, 144, 1) 

DarkSlateGray

#2F4F4F 

rgba(47, 79, 79, 1) 

Black

#000000 

rgba(0, 0, 0, 1) 



관련글 : HTML 대표적인 텍스트 태그! hn과 p, 그리고 br



텍스트 스타일


1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
    h1{
        font:3rem 'Pacifico', cursive;
        color:chocolate;
        text-decoration:underline;
        text-align:center;
    }
    p{
        font: 1.2rem/1.5 arial;
        text-align:justify;
    }
</style>
cs

font-style

글자 스타일을 지정한다. 속성값인 italic을 사용하면 이탤릭체로 표시된다.

font-style : italic ;


font-variant

속성값인 small-caps를 사용하면 영어 글꼴을 첫글자를 제외하고 작은 대문자로 표시된다.

font-variant : small-caps ;


font-weight

글자 굵기를 지정한다. 속성값은 두껍게 표시되는 bold를 많이 사용한다.

font-weight : bold ;


font-size

글자 크기를 조절한다. 주로 사용되는 단위로는 px, em, rem이 있다.
상대적 크기를 결정할 수 있는 rem을 사용하는 것이 가장 좋다.

font-size : 2rem ;


line-height

줄 간격을 지정한다. 기본값은 1.2로 폰트 크기의 1.2배만큼 간격을 준다는 의미이다. 보통 1.5~2배 정도가 적당하다.

line-height : 2 ;


font-family

텍스트의 서체를 지정하는 속성으로 상속 된다. 

font-family : arial ;

폰트 랭킹 : http://www.fontreach.com/#top
윈도우 기본 폰트 : https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
네이버 소프트웨어 - 폰트 : http://software.naver.com/software/fontList.nhn?categoryId=I0000000
구글 웹폰트 : https://fonts.google.com / https://fonts.google.com/earlyaccess


font

font-style, font-variant, font-weight, font-size, line-height, font-family를 한꺼번에 표현할 수 있다.

font : <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family> ;


color

속성값으로 색상 이름, hex, rgb를 이용하여 글자색을 지정한다. 

관련글 : Web Safe Color Name HEX RGB 

color : blue ;


text-decoration

텍스트에 밑줄을 없애거나 표시할 수 있다.

text-decoration : none / underline ;


text-align

텍스트를 정렬한다.

text-align : left / right / center / justify ;


1
2
3
h1 {
      color:red;
    }
cs



color 속성 값으로 red를 지정했더니 CSS 글자가 붉은색으로 표시된 것을 볼 수 있다. 



+ Recent posts