CSS3 Colors

CSS는 색상 이름, 16 진수 및 RGB 색상을 지원합니다.

또한 CSS3에서는 다음을 소개합니다.

1. RGBA 색상

2. HSL 색상

3. HSLA 색상

4. 불투명

다음 예제에서는 서로 다른 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 (색조, 채도, 밝기)로 지정됩니다.

1. 색조는 색상환의 정도입니다 (0에서 360까지).

1.1 0 (또는 360)은 빨간색입니다.

1.2 120은 녹색입니다.

1.3 240은 파란색입니다.

2. 채도는 백분율 값입니다. 100 %는 풀 컬러입니다.

3. 밝기도 백분율입니다. 0 %는 어둡고 (검은 색) 100 %는 흰색입니다.

다음 예제는 다른 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 색상을 정의합니다.

예

#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 */

불투명

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

opacity속성 값이 0.0 (완전 투명), 1.0 (완전 불투명) 사이 여야한다.

다음 예제는 불투명도가 다른 여러 요소를 보여줍니다.

예

#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 */