CSS lab() 함수

정의와 사용법

CSS의 lab() 함수는 CIE Lab 색상 공간에서 색상을 지정합니다. 이 색상 공간은 인간 눈이 볼 수 있는 모든 색상을 나타냅니다.

예

다른 lab() 색상:

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}
#p3 {background-color:lab(40 30% -20% / 20%);}
#p4 {background-color:lab(50 60% 20%);}
#p5 {background-color:lab(60 50% -10%);}
#p6 {background-color:lab(70 70% -80% / 0.3);}
#p7 {background-color:lab(80 70% 20% / 0.5);}
#p8 {background-color:lab(90 80% -20%);}
#p9 {background-color:lab(100 90% -100%);}

직접 테스트해 보세요

CSS 문법

절대 값 문법

lab(L a b / A)
값 설명
L

필수 사항입니다. 색의 밝기를 정의합니다. 0에서 100 사이의 숫자 또는 백분율을 사용할 수 있습니다.

0(또는 0%)은 검은색을, 100(또는 100%)은 흰색을 나타냅니다.

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

필수 사항입니다. -125에서 125 사이의 숫자 또는 -100%에서 100% 사이의 백분율을 정의합니다.

a 축에서의 거리를 정의하여 색의 빨녹 정도를 나타냅니다. -125은 녹색을, 125는 빨간색을 나타냅니다.

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

필수 사항입니다. -125에서 125 사이의 숫자 또는 -100%에서 100% 사이의 백분율을 정의합니다.

b 축에서의 거리를 정의하여 색의 노랑 정도를 나타냅니다.

-125은 파란색을, 125는 노란색을 나타냅니다.

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

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

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

기본 값은 100%입니다.

상대 값 문법

lab(from color L a b / A)
값 설명
from color

키워드 'from'으로 시작하여 원래 색상을 나타내는 색상 값이 이어집니다.

이는 상대 색상이 기반한 원래 색상입니다.
L

필수 사항입니다. 색의 밝기를 정의합니다. 0에서 100 사이의 숫자 또는 백분율을 사용할 수 있습니다.

0(또는 0%)은 검은색을, 100(또는 100%)은 흰색을 나타냅니다.

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

필수 사항입니다. -125에서 125 사이의 숫자 또는 -100%에서 100% 사이의 백분율을 정의합니다.

a 축에서의 거리를 정의하여 색의 빨녹 정도를 나타냅니다.

-125은 녹색을, 125는 빨간색을 나타냅니다.

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

필수 사항입니다. -125에서 125 사이의 숫자 또는 -100%에서 100% 사이의 백분율을 정의합니다.

b 축에서의 거리를 정의하여 색의 노랑 정도를 나타냅니다.

-125은 파란색을, 125는 노란색을 나타냅니다.

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

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

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

기본 값은 100%입니다.

기술 세부 사항

버전: CSS Color Module Level 4

브라우저 지원

표 안의 숫자는 이 함수를 최초로 지원한 브라우저 버전을 나타냅니다.

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

관련 페이지

참조:CSS 색상

참조:CSS hsl() 함수

참조:CSS hwb() 함수

참조:CSS lch() 함수

참조:CSS oklab() 함수

참조:CSS oklch() 함수