[CSS] background 색상값 지정

css 색상값을 입력할 때 다음 색상의 단위 사용 가능

1. 색상 이름 (red, black, white 등 …)

2. rgb (red, green, blue) 값

3. rgba (red, green, blue, alpha) 값

4. hsl (hue, saturation, lightness) 값

5. hsla (hue, saturation, lightness, alpha) 값

1. RGB

#f00

#ff0000

rgb(255,0,0)

rgb(100%, 0%, 0%)

- 위 색상은 모두 같은 색상

- 16진수는 3자리나 6자리로 가능

- #rgb는 #rrggbb와 같음 (예 : #fb0 = #ffbb00, #fff = #ffffff)

또한 RGBA의 alpha는 투명도값으로 0.0 ~ 1.0 사이로 사용 가능

2. hsl

CSS3에서 RGB 색상에 대한 보완으로 

hue = 색조, saturation = 채도, lightness = 명도

hue(색상)은 0~360 사이의 숫자 (0 or 360 = red, 120 = green, 240 = blue)

saturation(채도)는 0~100% (0%는 회색빛, 100% 완전한 색상)

lightness(명도)는 0~100% (0%는 검정색, 100%은 흰색)

ex) background-color: hsl(120, 100%, 50%); /* green */

색상코드 : https://search.naver.com/search.naver?where=nexearch&query=%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C&sm=top_hty&fbm=1&ie=utf8

https://convertingcolors.com/hsl-color-343_85_31.html