[CSS] 색 표현하기

1.색 표현의 원리

(1) 색 이름으로 표현

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

(2) RGB(A)로 표현

*형태

rgb(빨강,초록,파랑)

rgba(빨강,초록,파랑,불투명도)

* 각각 0~255이고, 전부 255 하면 흰색, 전부 0하면 검정색 (%로 쓸 수도 있다.)

   불투명도는 값이 낮을수록 투명, 높을수록 불투명.

*rgb()만 하고 인풋 4개 넣어서 불투명도 표현도 가능하다.

  p {
    /* 글자색 */
    color: rgba(100,50,20%,50%);
  
    /* 배경색 */
    background-color: rgb(200, 150, 300);
  }

 

(3)HEX로 표현

RGB랑 똑같은데, 위의 10진수를 16진수로 표현한 것

#FFFFFF는 rgb(255,255,255)와 같은 말이다. 16진수 2개씩 묶어서 빨, 주, 파를 담당

16진수가 2 개씩 묶이니까 하나로 둘 다 같은 값이면 하나로 묶어 표현도 가능하다.

(ex- #FFFFFF == #FFF, #555555 == #555)

  p {
    /* 글자색 */
    color: #FF3234;
  
    /* 배경색 */
    background-color: #000;
  }

 

(4)HSL(A)로 표현

hsla(색상, 채도, 명도, 불투명도)

불투명도는 선택사항. input 넣어도 되고, 안 넣어도 됨.

채도 높을수록 쨍한 색깔

명도 높을수록 밝아짐

전부 그냥 숫자 or 퍼센트로 쓸 수 있음.

  p {
    /* 글자색 */
    color: rgb(194, 47, 47);
  
    /* 배경색 */
    background-color: hsla(0, 0%, 0%, 100%);
  }

2. 스스로 해보기

위에꺼 만들면서 했으니까 생략