CSS lab() 함수형 표기: L*a*b* 색 구문

lab() 함수형 표기는 CIELAB 색공간의 색을 표현합니다. 선택적으로 알파 성분이 색의 투명도를 나타냅니다.

Lab 색은 밝기, 적/녹축, 청/황축 성분으로 인간이 인지할 수 있는 모든 색을 나타낼 수 있습니다.

lab()은 a축과 b축의 데카르트 좌표계를 사용합니다. 좀 더 이해하기 쉬운 채도와 색상의 극좌표계를 사용하려면 lch()를 사용하세요.

#color {
  background-color: lab(87 3.89 86.23);
  /* background-color: lab(51 -26.76 10.28); */
  /* background-color: lab(78 -25.21 66.76 / 0.7); */
  /* background-color: lab(88 -76.24 81.45 / 0.25); */
}

#color {
  width: 100px;
  height: 100px;
}

<div id="color"></div>

구문

/* 절대 값 */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* 상대 값 */
lab(from green l a b / 0.5)
lab(from #0000FF calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

값

절대 값 구문

lab(L a b[ / A])

L

색의 밝기를 나타내는 0 이상 100 이하의 <number>, 0% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. 100%는 흰색, 0%는 검은색입니다.

a

색의 a축 성분을 나타내는 -125 이상 125 이하의 <number>, -100% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. a축은 색이 얼마나 녹색인지 (-125), 또는 적색인지 (125) 나타냅니다.

이론적으로는 값의 범위에는 제한이 없으므로 ±125 (±100%) 밖의 값도 사용할 수 있습니다. 실제로는 ±160을 벗어나는 색은 없습니다.

b

색의 b축 성분을 나타내는 -125 이상 125 이하의 <number>, -100% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. b축은 색이 얼마나 청색인지 (-125), 또는 황색인지 (125) 나타냅니다.

이론적으로는 값의 범위에는 제한이 없으므로 ±125 (±100%) 밖의 값도 사용할 수 있습니다. 실제로는 ±160을 벗어나는 색은 없습니다.

A (선택사항)

색의 알파 채널을 나타내는 <alpha-value> 값입니다. 0은 0% (완전 투명), 1은 100% (완전 불투명)입니다. none을 사용해 알파 채널이 없음을 명시할 수도 있습니다.

A 값을 생략하면 100%와 같습니다. 생략하지 않을 경우 앞의 세 값과 /로 구분해야 합니다.

상대 값 구문

lab(from <color> L a b[ / A])

from <color>

상대 색의 기준색을 나타내는 <color> 값입니다. 앞의 from까지 포함해야 합니다. 기준색으로는 다른 상대색을 포함한 아무 <color> 값이나 사용할 수 있습니다.

L

색의 밝기를 나타내는 0 이상 100 이하의 <number>, 0% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. 100%는 흰색, 0%는 검은색입니다.

a

색의 a축 성분을 나타내는 -125 이상 125 이하의 <number>, -100% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. a축은 색이 얼마나 녹색인지 (-125), 또는 적색인지 (125) 나타냅니다.

이론적으로는 값의 범위에는 제한이 없으므로 ±125 (±100%) 밖의 값도 사용할 수 있습니다. 실제로는 ±160을 벗어나는 색은 없습니다.

b

색의 b축 성분을 나타내는 -125 이상 125 이하의 <number>, -100% 이상 100% 이하의 <percentage>, 또는 키워드 none (0%와 같음) 값입니다. b축은 색이 얼마나 청색인지 (-125), 또는 황색인지 (125) 나타냅니다.

이론적으로는 값의 범위에는 제한이 없으므로 ±125 (±100%) 밖의 값도 사용할 수 있습니다. 실제로는 ±160을 벗어나는 색은 없습니다.

A (선택사항)

색의 알파 채널을 나타내는 <alpha-value> 값입니다. 0은 0% (완전 투명), 1은 100% (완전 불투명)입니다. none을 사용해 알파 채널이 없음을 명시할 수도 있습니다.

A 값을 생략하면 100%와 같습니다. 생략하지 않을 경우 앞의 세 값과 /로 구분해야 합니다.

명세

• CSS Color Module Level 5
• CSS Color Module Level 4

브라우저 호환성