[Front-End] CSS 배우기 : 색상

☆ CSS에서 색상을 표현하는 방법

① 색상 이름(Named colors) : 색상을 묘사하는 영어 단어

② RGB : 빨강, 초록, 파랑의 혼합을 표현하는 숫자 값

③ HSL : 색조, 채도, 밝기의 혼합을 표현하는 숫자 값

 

- 전경 vs 배경

color : 전경색 변경

background-color : 배경색 변경

 

- 16진수

ex) color: #000000;

색상표 참고 사이트

developer.mozilla.org/en-US/docs/Web/CSS/color_value

- CSS: Cascading Style Sheets | MDN

- RGB 색상

ex) color: rgb(23, 45, 23);

 

- 16진수와 RGB : 더 많은 색상을 표현할 수 있다. 총 256 x 256 x 256 = 16,777,216개

 

- HSL(Hue, Saturation, and Lightness) : (색조, 채도 백분율, 밝기 백분율)로 표현한다.

ex) color: hsl(300, 20%, 20%);

컬러 휠. 빨간색은 0도, 녹색은 120도, 파란색은 240도, 다시 360도의 빨간색

- 투명도와 알파 : hsla(색조, 채도 백분율, 밝기 백분율, 알파) 또는 rgba(빨, 초, 파, 알파)로 표현한다.

알파란? 0에서 1까지의 10진수. 불투명도를 말하며, 0이면 완전 투명하고 1이면 불투명함.

ex) hsla(34, 50%, 50%, 0.1); / rgba(230, 45, 99, 0.5);

=> color: transparent;와 color: rgba(0, 0, 0, 0);이 동일한 의미임.