css-4 : 색 표현하기

2022-10-09 최대 1 분 소요

색 표현하기

* 기본html

<p>글자와 배경에 색상을 적용해보세요!</p>

색상마다 부여된 이름으로 이 링크에서 목록을 확인할 수 있습니다.

 p {
   /* 글자색 */
   color: yellow;
 
   /* 배경색 */
   background-color: black;
 }

빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식이며

끝에 알파값을 붙여서 투명도를 조절할 수 있죠.

p {
  /* 글자색 */
  color: rgb(173, 255, 47);

  /* 배경색 */
  background-color: rgb(100%, 0%, 0%, 50%);
}

R, G, B, Alpha 값들을 16진수형태로 나타낸 것입니다.

16진법은 : 0 1 2 3 4 5 6 7 8 9 A B C D E F

ex) 151612 (15가 한묶음, 16이 한묶음, 12이 한묶음임..)

 P {
   color: #97c50d;
 }

색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냅니다.

ex) hsl(0,100%,100%) / hsl(50%,60%,80%,20%)

 P {
   color: hsl(96, 81%, 43%);
 }

* 구글에 color picker 또는 #ffffff 등의 컬러 코드를 검색해보세요!