CSS oklab() 함수형 표기: Oklab 색 구문

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

Oklab은 인간의 눈이 색을 보는 방식을 모사하는 색공간으로서 다음과 같은 작업에 유용합니다.

• 이미지의 명도를 유지하면서 흑백으로 만들기
• 색상과 명도를 유지하고 채도만 조절하기
• 부드럽고 균일한 그레이디언트 생성하기

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

#color {
  background-color: oklab(0.88 -0.01 0.18);
  /* background-color: oklab(0.57 -0.08 0.03); */
  /* background-color: oklab(0.8 -0.09 0.15 / 0.7); */
  /* background-color: oklab(0.87 -0.23 0.18 / 0.25); */
}

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

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

구문

/* 절대 값 */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);

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

값

절대 값 구문

oklab(L a b[ / A])

L

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

a

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

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

b

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

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

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

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

b

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

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

A (선택사항)

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

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

명세

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

브라우저 호환성