CSS hsla() 함수

예제

불투명도를 가진 다양한 HSL 색상을 정의합니다:

#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);} /* 부드러운 녹색 */

직접 시험해 보세요

정의와 사용법

hsla() 함수는 톤-추가도-빛의 강도-알파(Alpha) 모델(HSLA)을 사용하여 색상을 정의합니다.

HSLA 색상 값은 HSL 색상 값의 확장으로, 알파 채널을 포함합니다 - 이 채널은 색상의 불투명도를 지정합니다.

버전: CSS3

브라우저 지원

표에서 수치는 이 기능을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

함수
hsla() 1.0 9.0 3.0 3.1 10.0

CSS 문법

hsla(톤, 추가도, 빛의 강도, 알파)
값 설명
톤 색상 톤의 각도(0에서 360까지)를 정의합니다 - 0(또는 360)은 빨강, 120는 녹색, 240는 파란색입니다.
추가도 추가도를 정의합니다 - 0％는 회색이며 100％는 전체 색상(완전히 충분한 색상)입니다.
빛의 강도 명확도를 정의합니다 - 0％는 검은색, 50％는 정상, 100％는 흰색.
알파 불투명도를 정의합니다 - 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자.