CSS 색상

CSS 지원 140多种颜色名称또한 십육진수 값, RGB 값, RGBA 값, HSL 값, HSLA 값 및 불투명도를 포함합니다.

RGBA 색상

RGBA 색상 값은 RGB 색상 값의 확장으로, alpha 채널을 포함하고 있습니다 - 이 채널은 색상의 불투명도를 정의합니다.

RGBA 색상 값은 이렇게 정의됩니다: rgba(red, green, blue, alpha) 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);}  /* 불투명도 있는 빨간색 */
#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(hue, saturation, lightness).

색상은 색상바퀴상의 도수(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 {배경색상: hsl(120, 100%, 50%);}  /*绿色发展 */
#p2 {배경색상: hsl(120, 100%, 75%);}  /* 연绿色发展 */
#p3 {배경색상: hsl(120, 100%, 25%);}  /* 검绿色发展 */
#p4 {배경색상: hsl(120, 60%, 70%);}   /* 연绿色发展 */

직접 시도해보세요

HSLA 색상

HSLA 색상 값은 Alpha 채널을 포함한 HSL 색상 값의 확장입니다 - 그것은 색상의 불투명도를 정의합니다.

HSLA 색상 값은 다음 파라미터로 정의됩니다: hsla(hue, saturation, lightness, alpha)，alpha 파라미터는 불투명도를 정의합니다. alpha 파라미터는 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 {배경색상: hsla(120, 100%, 50%, 0.3);}  /* 불투명도가 있는绿色发展 */
#p2 {배경색상: hsla(120, 100%, 75%, 0.3);}  /* 불투명도가 있는 연绿色发展 */
#p3 {배경색상: hsla(120, 100%, 25%, 0.3);}  /* 불투명도가 있는 검绿色发展 */
#p4 {배경색상: hsla(120, 60%, 70%, 0.3);}   /* 불투명도가 있는 연绿色发展 */

직접 시도해보세요

불투명도

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

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

rgb(255, 0, 0); 투명도:0.2;
rgb(255, 0, 0); 투명도:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

위의 텍스트도 투명/불투명일 것입니다!

아래의 예제는 불투명도를 가진 다양한 요소를 보여줍니다:

예제

#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;}  /* 불투명도 있는 파란색 */

직접 시도해보세요