CSS 색상
CSS는 140개 이상의 색상 이름, HEX 값, RGB 값 , RGBA 값, HSL 값, HSLA 값 및 불투명도를 지원합니다.
RGBA 색상
RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다.
RGBA 색상 값은 rgba(red, green, blue, alpha)로 지정됩니다. 알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
다음 예에서는 다양한 RGBA 색상을 정의합니다.
예시
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
HSL 색상
HSL은 색조, 채도 및 밝기를 나타냅니다.
HSL 색상 값은 hsl(색조, 채도, 밝기)로 지정됩니다.
- 색조는 색상환의 정도입니다(0에서 360까지).
- 0(또는 360)은 빨간색입니다.
- 120은 녹색
- 240은 파란색
- 채도는 백분율 값입니다. 100%는 전체 색상입니다.
- 밝기도 백분율입니다. 0%는 어둡고(검정색) 100%는 흰색입니다.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);
다음 예에서는 다양한 HSL 색상을 정의합니다.
예시
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA 색상
HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 HSL 색상 값의 확장입니다.
HSLA 색상 값은 hsla(색조, 채도, 밝기, 알파)로 지정됩니다. 여기서 알파 매개변수는 불투명도를 정의합니다. 알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
다음 예에서는 다양한 HSLA 색상을 정의합니다.
예시
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
불투명
CSS opacity속성은 전체 요소의 불투명도를 설정합니다(배경색과 텍스트는 모두 불투명/투명합니다).
속성 값 은 opacity0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자여야 합니다.
RGB(255, 0, 0);불투명도:0.2;
RGB(255, 0, 0);불투명도:0.4;
RGB(255, 0, 0);불투명도:0.6;
RGB(255, 0, 0);불투명도:0.8;
위의 텍스트도 투명/불투명합니다!
다음 예는 불투명도가 있는 다양한 요소를 보여줍니다.
예시
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */