CSS3 색상(Color)

CSS3색상 값 정의에 새로운 방법을 제공했습니다.

CSS3에서 색상을 정의합니다

이전 장에서는 다음과 같이 사용하는 방법을 배웠습니다.color 키워드와 RGB 표기법색상 정의. 이에 더하여 CSS3요소 색상 값 설정에 사용되는 새로운 기호 rgba(), hsl(), hsla()를 추가했습니다.

다음 부분에서는 이 색상 모델들을 차례로 논의할 것입니다.

RGBA 색상 값

rgba() 기능 기호를 사용하여 RGBA 모델(빨간-녹색-파란색-alpha)에서 색상을 정의합니다. RGBA 색상 모델은 Alpha 채널을 가진 RGB 색상 모델의 확장입니다. Alpha 채널은 색상의 불투명도를 지정합니다.

alpha 매개변수는 0.0(완전 투명)에서1.0(완전 투명) 값입니다.

h1　{
　　　　color:　rgba(0,0,255,0.5);
}
p　{
　　　　background-color:　rgba(0%,0%,100%,0.3);
}

HSL 색상 값

색상은 hsl() 기능 기호를 사용하여 HSL 모델(톤)-채도-0）。색상의 톤은 색环 또는 원(즉, 원으로 표현된虹)의 각도로 표현됩니다(0에서360）。이 각도는 덜한 단위로 주어집니다.因为这个角度通常以度为单位进行度量，所以单位隐含在CSS中。

채도와 밝기는 백분율로 표현됩니다.100% 채도는 전체 색상을 의미하며, 0%는 회색 그림자입니다. 그러나,100% 밝기는 흰색이며, 0% 밝기는 검은색입니다.50% 밝기는 정상입니다. 다음 예제를 확인하세요：

h1　{
　　　　color:　hsl(360,70%,60%);
}
p　{
　　　　background-color:　hsl(480,50%,80%);
}

HSLA 색상 값

hsla() 기능 기호를 사용하여 HSLA 모델(톤, 채도)-밝기-alpha)에서 색상을 정의합니다. HSLA 색상 모델은 Alpha 채널을 가진 HSL 색상 모델의 확장입니다. Alpha 채널은 색상의 불투명도를 지정합니다.

alpha 매개변수는 0.0(완전 투명)에서1.0(완전 투명) 값입니다.

h1　{
　　　　color:　hsla(360,80%,50%,0.5);
}
p　{
　　　　background-color:　hsla(480,60%,30%,0.3);
}