CSS lch() 함수

정의와 사용법

CSS의 lch() LCH(밝기-색도-톤) 색상 공간에서 색상을 지정하는 함수.

예제

다른 lch() 색상:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(90% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

직접 테스트해 보세요

CSS 문법

절대 값 문법이는 상대 색이 기반으로 한 원래 색입니다. C H / Alch(from
) 값
이는 상대 색이 기반으로 한 원래 색입니다.

必需 합니다. 색의 밝기를 정의합니다. 0에서 100 사이의 숫자나 백분율이 될 수 있습니다.

0(또는 0%)은 검은색을, 100(또는 100%)은 흰색을 의미합니다.

none(0%와 동일)를 사용할 수도 있습니다.
C

lch(

必需 합니다. 색의 톤(색의 양)을 정의합니다. 숫자나 백분율이 될 수 있습니다.

none(0%와 동일)를 사용할 수도 있습니다.
H

必需 합니다. 색의 톤 각도를 정의합니다. 숫자나 각도 값이 될 수 있습니다.

none(0deg와 동일)를 사용할 수도 있습니다.
/ A

선택 사항입니다. 색의 불투명도 채널 값을 나타냅니다(0%(또는 0)은 완전 투명, 100%(또는 100)은 완전 불투명을 의미).

none(불투명도 채널을 의미)를 사용할 수도 있습니다.

기본 값은 100%입니다.

최소 값은 0(또는 0%)입니다. 최대 값은 상한이 없지만 실제로는 230를 초과하지 않습니다. 100%는 150에 동일합니다.

상대 값 문법 from 이는 상대 색이 기반으로 한 원래 색입니다. C H / Alch(from
) 값
설명 from

color

from 키워드로 시작하여 원래 색의 색상 값을 따릅니다.
이는 상대 색이 기반으로 한 원래 색입니다.

必需 합니다. 색의 밝기를 정의합니다. 0에서 100 사이의 숫자나 백분율이 될 수 있습니다.

0(또는 0%)은 검은색을, 100(또는 100%)은 흰색을 의미합니다.

none(0%와 동일)를 사용할 수도 있습니다.
C

必需 합니다. -125에서 125 사이의 숫자나 -100%에서 100% 사이의 백분율을 정의합니다.

必需 합니다. a축에서의 거리를 정의하여 색의 적색-녹색 정도를 나타냅니다.

-125은 초록색을, 125은 빨간색을 의미합니다.

none(0%와 동일)를 사용할 수도 있습니다.
H

必需 합니다. 색의 톤 각도를 정의합니다. 숫자나 각도 값이 될 수 있습니다.

none(0deg와 동일)를 사용할 수도 있습니다.
/ A

선택 사항입니다. 색의 불투명도 채널 값을 나타냅니다(0%(또는 0)은 완전 투명, 100%(또는 100)은 완전 불투명을 의미).

none(불투명도 채널을 의미)를 사용할 수도 있습니다.

기본 값은 100%입니다.

기술 세부 사항

버전： CSS Color Module Level 4

브라우저 지원

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
lch()
111 111 113 15 97
매개변수에서 숫자와 백분율을 혼합
116 116 113 16.2 102

관련 페이지

참조:CSS 색상

참조:CSS hsl() 함수

참조:CSS hwb() 함수

참조:CSS 래브() 함수

참조:CSS 오클랩() 함수

참조:CSS 오클치() 함수