CSS 색상

RGBA 색상

RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널로 RGB 색상 값을 확장한 것입니다.

RGBA 색 값은 rgb(빨강, 녹색, 파란색, 알파)로 지정됩니다. 알파 매개 변수는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다.

예제 1
#p1 {background-color: rgba(255, 0, 0, 0.3);} 
#p2 {background-color: rgba(0, 255, 0, 0.3);}  
#p3 {background-color: rgba(0, 0, 255, 0.3);}

HSL 색상

HSL은 Hue, Saturation, Lightness의 약자입니다.

HSL 색 값은 hsl(색, 채도, 밝기)로 지정됩니다.

  • 색상은 컬러 휠의 도(0 ~ 360):
    • 0(또는 360)은 빨간색입니다.
    • 120은 녹색입니다.
    • 240은 파란색입니다.
  • 채도는 백분율 값입니다. 100%가 전체 색상입니다.
  • 0%는 검은색이고 100%는 흰색입니다.
예제 2
#p1 {background-color: hsl(120, 100%, 50%);}  
#p2 {background-color: hsl(120, 100%, 75%);}  
#p3 {background-color: hsl(120, 100%, 25%);}  
#p4 {background-color: hsl(120, 60%, 70%);}

HSLA 색상

HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널로 HSL 색상 값의 확장입니다.

HSLA 색상 값은 hsla(색조, 채도, 명도, 알파)로 지정됩니다. 여기서 알파 매개 변수는 불투명도를 정의합니다. 알파 매개 변수는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다.

예제 3
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}

opacity

opacity 속성은 전체 요소의 불투명도를 설정합니다(배경 색과 텍스트 모두 불투명/투명).

opacity 속성 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자여야 합니다.

예제 4
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  
#p3 {background-color:rgb(0,0,255);opacity:0.6;}