CSS : 색상 표현 방법

색상 표현 방법

CSS에서 색상을 표현하는 방법에는 여러 가지가 있습니다. 대표적인 방법 몇 가지를 알아보도록 하겠습니다.

---

1. 색상명으로 표현

색상의 이름을 나타내는 방법으로, 브라우저에는 약 140가지의 색상 이름들이 정의되어 있습니다. 적용 예시를 살펴보겠습니다.

<p style="color:red;">멋진 빨간색 글자</p>
<p style="color:orange;">멋진 주황색 글자</p>
<p style="color:blue;">멋진 파란색 글자</p>

멋진 빨간색 글자

멋진 초록색 글자

멋진 파란색 글자

2. HEX값으로 표현

#RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법입니다. RR, GG, BB는 각각 red, green, blue를 나타내는 값으로, 16진수 00에서 FF사이의 값으로 결정됩니다. 적용 예시를 살펴보겠습니다.

<p style="color:#000000;">노잼 검정색 글자</p>
<p style="color:#FF00FF">촌스러운 분홍색 글자</p>
<p style="color:#00ced1;">민트색 같은 글자</p>
<p style="color:#a52a2a;">아무렇게나 써본 글자</p>

노잼 검정색 글자

촌스러운 분홍색 글자

민트색 같은 글자

아무렇게나 써본 글자

Tip! 색상명과 HEX값은 아래 색상표를 참고하세요.

색상	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

3. RGB값으로 표현

rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정해 줍니다. 적용 예시를 살펴보겠습니다.

<p style="background-color:rgb(255, 0, 0);">멋.빨.글</p>
<p style="background-color:rgb(0, 255, 0);">멋.초.글</p>
<p style="background-color:rgb(0%, 0%,100%);">멋.파.글</p>

멋.빨.글

멋.초.글

멋.파.글

4. RGBA값으로 표현

rgb 표현의 확장으로, 불투명도를 지정하는 기능이 추가된 것입니다. rgba(red, green, blue, alpha)로 표현하며, alpha 변수의 값은 0.0(투명)과 1.0(불투명) 사이의 값 중에서 지정해 줍니다. 적용 예시를 살펴보겠습니다.

<p style="color:rgba(255, 0, 0, 0.8);">멋지지만</p>
<p style="color:rgba(255, 0, 0, 0.6);">사라져가는</p>
<p style="color:rgba(255, 0, 0, 0.4);">빨간</p>
<p style="color:rgba(255, 0, 0, 0.2);">글자...</p>

멋지지만

사라져가는

빨간

글자...

5. HSL/HSLA값으로 표현

HSL은 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다. 색상은 0부터 360까지의 색상환에 따라 결정되며, 0:red, 120:green, 240:blue로 나타냅니다. 채도와 명도는 백분율로 나타냅니다. HSLA는 HSL 방식에서 불투명도 지정 기능이 추가된 것이며, HSLA(색상, 채도, 명도, 불투명도) 형식으로 나타냅니다.

<p style="background-color:hsl(0,100%,80%);">채도 100%, 밝기 80%</p>
<p style="background-color:hsl(0,100%,60%);">채도 100%, 밝기 60%</p>
<p style="background-color:hsl(0,100%,40%);">채도 100%, 밝기 40%</p>
<p style="background-color:hsl(0,100%,20%);">채도 100%, 밝기 20%</p>

채도 100%, 밝기 80%

채도 100%, 밝기 60%

채도 100%, 밝기 40%

채도 100%, 밝기 20%