[CSS] "색상 표현 방법" 에 대해 알아봅시다!

CSS 색깔을 지정하는 방법에 대해 알아봅시다!

📎 CSS 색깔을 지정하는 4가지 방법

📌 이름
📌 16진수
📌 RGB 또는 RGBA
📌 HSL 또는 HSLA

➰이름을 사용해서...

색상의 이름을 직접 써서 컬러를 지정할 수 있습니다.
브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다.
👍🏻 : 쉽게 색상 지정 가능
👎🏻 : 표현 색상 한정적, 이름 외우고 있어야 함

➰16진수를 사용해서...

2자리씩 3개의 16진수로 색상을 표현합니다. #00(빨강)FF(초록)99(파랑)
여기서 2자리씩 차지하고 있는 3개의 16진수는 각각 RED, GREEN, BLUE를 의미합니다.
16진수로 색상을 표시할 때는 '#' 기호로 시작합니다.
각 2자리의 16진수는 00~FF까지를 표현할 수 있습니다. (10진수로는 0~255)

➰16진수(HEX)를 사용해서...

2자리씩 3개의 16진수로 색상을 표현합니다. #00(빨강)FF(초록)99(파랑)
여기서 2자리씩 차지하고 있는 3개의 16진수는 각각 RED, GREEN, BLUE를 의미합니다.
16진수로 색상을 표시할 때는 '#' 기호로 시작합니다.
각 2자리의 16진수는 00~FF까지를 표현할 수 있습니다. (10진수로는 0~255)

#ff0000
: Red 자리만 FF이고, 나머지는 0이므로, 빨강색을 의미
#00ff00
: Green 자리만 FF이고, 나머지는 0이므로, 초록색을 의미
#0000ff
: Blue 자리만 FF이고, 나머지는 0이므로, 파랑색을 의미
#ffffff
: 모두 FF이면 흰색
#000000
: 모두 00이면 검정색

➰RGB 또는 RGBA를 사용해서...

➿RGB

RGB는 16진수 대신 10진수를 사용합니다.
Red, Green, Blue 이 세가지 색상을 0~255 사이의 숫자로 표현합니다.

➿RGBA

RGBA는 RGB에 추가로 색상의 불투명도를 지정할 수 있습니다.
‣ A는 alpha의 약자
A는 0.0~1.0까지의 값을 가집니다.
0은 0% 불투명, 0.5는 50% 불투명, 1은 100% 불투명을 의미합니다.

➰HSL 또는 HSLA를 사용해서...

HSL은 색상, 채도, 명도를 나타냅니다.
RGBA와 마찬가지로 알파값을 옵션으로 추가할 수 있습니다.

🪄색상(Hue)
Hue는 360도의 색상환으로 나타냅니다.
0도는 빨강, 120도는 초록, 240은 파랑입니다.

🪄채도(Saturation)
채도(Saturation)은 0~100%로 표현됩니다.
0일수록 채도가 낮고, 100이 채도가 가장 높습니다.

🪄명도(Lightness)
명도(Lightness)는 0~100%로 표현합니다.
0은 검정, 100은 흰색입니다.

🪄불투명도(Alpha, Opacity)
0.0~1.0까지의 값을 가집니다.
0은 0% 불투명, 0.5는 50% 불투명, 1은 100% 불투명을 의미합니다.