[CSS] CSS의 색상 표현 방법

CSS : 색상 표현 방법

CSS에서는 색상을 설정하는 총 7가지의 방법이 있습니다. 먼저 기존 CSS에 있던 방법 3가지, CSS3에서 추가된 4가지 방법이 있습니다.
이번 시간에는 이러한 CSS의 색상 표현 방법에 대해 알아보겠습니다!😄

---

🔶 CSS 색상 표현 방법 🔶

#1. 색상 이름으로 표현

red, pink와 같이 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다.

p {background-color: orange;}

orange

---

#2. RGB값으로 표현

rgb(red, green, blue)와 같은 형식으로 색을 표현합니다.
여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 설정합니다.

p {background-color: rgb(255, 165, 0);}
p {background-color: rgb(100%, 0%, 0%);}

orange

red

---

#3. HEX(16진수)값으로 표현

hex(16진수) 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다.
#rrggbb = rr: red / gg: green / bb : blue로 00에서 ff까지의 범위 값입니다.

p {background-color: #FFA500;}

orange

✏️ HEX 표 확인하기

이름	색상 코드	이름	색상 코드	이름	색상 코드
red	#FF0000	lime	#00FF00	blue	#0000FF
indianred	#CD5C5C	aquamarine	#7FFFD4	cyan(=aqua)	#00FFFF
darksalmon	#E9967A	mediumspringgreen	#00FA9A	aqua(=cyan)	#00FFFF
lightcoral	#F08080	springgreen	#00FF7F	mediumturquoise	#48D1CC
salmon	#FA8072	palegreen	#98FB98	darkturquoise	#00CED1
orangered	#FF4500	greenyellow	#ADFF2F	cadetblue	#5F9EA0
crimson	#DC143C	chartreuse	#7FFF00	slategray	#708090
firebrick	#B22222	lawngreen	#7CFC00	lightcyan	#E0FFFF
darkred	#8B0000	green	#008000	paleturquoise	#AFEEEE
mediumvioletred	#C71585	lightgreen	#90EE90	powderblue	#B0E0E6
pink	#FFC0CB	yellowgreen	#9ACD32	lightsteelblue	#B0C4DE
lightpink	#FFB6C1	limegreen	#32CD32	steelblue	#4682B4
hotpink	#FF69B4	mediumseagreen	#3CB371	lightblue	#ADD8E6
deeppink	#FF1493	darkseagreen	#8FBC8F	skyblue	#87CEEB
paleviolentred	#DB7093	forestgreen	#228B22	lightskyblue	#87CEFA
darkkhaki	#BDB76B	seagreen	#2E8B57	deepskyblue	#00BFFF
khaki	#F0E68C	olivedrab	#6B8E23	cornflowerblue	#6495ED
palegoldenrod	#EEE8AA	olive	#808000	royalblue	#4169E1
lightgoldenrodyellow	#FAFAD2	darkolivegreen	#556B2F	mediumslateblue	#7B68EE
lightyellow	#FFFFE0	darkgreen	#006400	dodgerblue	#1E90FF
lemonchiffon	#FFFACD	mediumaquamarine	#66CDAA	mediumblue	#0000CD
yellow	#FFFF00	turquoise	#40E0D0	darkblue	#00008B
gold	#FFD700	lightseagreen	#20B2AA	navy	#000080
papayawhip	#FFEFD5	darkcyan	#008B8B	midnightblue	#191970
moccasin	#FFE4B5	teal	#008080	gainsboro	#DCDCDC
peachpuff	#FFDAB9	honeydew	#F0FFF0	lightgrey	#D3D3D3
lightsalmon	#FFA07A	mintcream	#F5FFFA	silver	#C0C0C0
orange	#FFA500	azure	#F0FFFF	darkgray	#A9A9A9
darkorange	#FF8C00	aliceblue	#F0F8FF	gray(grey)	#808080
coral	#FF7F50	ghostwhite	#F8F8FF	dimgray	#696969
tomato	#FF6347	whitesmoke	#F5F5F5	darkslategray	#2F4F4F
orangered	#FF4500	lavenderblush	#FFF0F5	lightslategray	#778899
lavender	#E6E6FA	mistyrose	#FFE4E1	peru	#CD853F
thistle	#D8BFD8	antiquewhite	#FAEBD7	chocolate	#D2691E
plum	#DDA0DD	seashell	#FFF5EE	maroon	#800000
violet	#EE82EE	snow	#FFFAFA	saddlebrown	#8B4513
fuchsia(=magenta)	#FF00FF	beige	#F5F5DC	brown	#A52A2A
magenta(=fuchsia)	#FF00FF	linen	#FAF0E6	sienna	#A0522D
orchid	#DA70D6	oldlace	#FDF5E6	darkred	#8B0000
cornsilk	#FFF8DC	floralwhite	#FFFAF0	burlywood	#DEB887
blanchedalmond	#FFEBCD	ivory	#FFFFF0	tan	#D2B48C
bisque	#FFE4E4	mediumorchid	#BA55D3	rosybrown	#BC8F8F
navajowhite	#FFDEAD	darkorchid	#9932CC	mediumpurple	#9370DB
blueviolet	#8A2BE2	darkviolet	#9400D3	darkmagenta	#8B008B
slateblue	#6A5ACD	purple	#800080	wheat	#F5DEB3
darkslateblue	#483D8B	indigo	#4B0082	darkgoldenrod	#B8860B
sandybrown	#F4A460	goldenrod	#DAA520
black	#000000	white	#FFFFFF

---

🔶 CSS3에서 추가된 색상 표현 방법 🔶

#1. RGBA 색상값으로 표현

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값입니다.
여기서 알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널입니다. 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.

p {background-color: rgba(255, 165, 0, 0);}
p {background-color: rgba(255, 165, 0, 0.5);}
p {background-color: rgba(255, 165, 0, 1);}

orange

orange

orange

---

#2. HSL 색상값으로 표현

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현합니다.
즉 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다.
색상은 0부터 360 사이의 값에 따라 결정되며, 색상환(color wheel)의 각도를 나타냅니다.

p {background-color: hsl(39, 100%, 50%);}

orange

---

#3. HSLA값으로 표현

rgba와 마찬가지로 hsl에 불투명도를 추가한 색상 표현 방법입니다.

p {background-color: hsl(39, 100%, 50%, 0);}
p {background-color: hsl(39, 100%, 50%, 0.5);}
p {background-color: hsl(39, 100%, 50%, 1);}

orange

orange

orange

---