CSS oklab() 함수

정의와 사용법

CSS의 oklab() 함수는 OKLAB 색상 공간에서 색상을 지정하는 데 사용됩니다. 이 색상 공간은 인간의 눈이 색상을 인식하는 방식을 모의합니다.

인스턴스

다른 oklab() 색상:

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

직접 시험해 보세요

CSS 문법

절대 값 문법

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

필수 사항. 색상의 감각 밝기를 정의합니다. 0에서 1 사이의 수치 또는 0%에서 100% 사이의 퍼센트를 사용할 수 있습니다.

0（또는 0%）는 검은색을, 1（또는 100%）는 흰색을 의미합니다.

None（0%에 동일）를 사용할 수도 있습니다.
a

필수 사항. -0.4에서 0.4 사이의 수치 또는 -100%에서 100% 사이의 퍼센트를 정의합니다.

색상이 a 축에 따라 있는 거리를 정의하여 색상의 빨간색-緑색 정도를 나타냅니다.

-0.4은緑색을, 0.4는 빨간색을 의미합니다. none（0%에 동일）를 사용할 수도 있습니다.
b

필수 사항. -0.4에서 0.4 사이의 수치 또는 -100%에서 100% 사이의 퍼센트를 정의합니다.

색상이 b 축에 따라 있는 거리를 정의하여 색상의 노란색-파란색 정도를 나타냅니다.

-0.4은 파란색을, 0.4는 노란색을 의미합니다. none（0%에 동일）를 사용할 수도 있습니다.
/ A

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

none（빛의 투명도 채널을 의미）를 사용할 수도 있습니다. 기본 값은 100%입니다.

상대 값 문법

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

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

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

필수 사항. 색상의 감각 밝기를 정의합니다. 0에서 1 사이의 수치 또는 0%에서 100% 사이의 퍼센트를 사용할 수 있습니다.

0（또는 0%）는 검은색을, 1（또는 100%）는 흰색을 의미합니다.

none（0%에 동일）를 사용할 수도 있습니다.
a

필수 사항. -0.4에서 0.4 사이의 수치 또는 -100%에서 100% 사이의 퍼센트를 정의합니다.

색상이 a 축에 따라 있는 거리를 정의하여 색상의 빨간색-緑색 정도를 나타냅니다.

-0.4은緑색을, 0.4는 빨간색을 의미합니다. none（0%에 동일）를 사용할 수도 있습니다.
b

필수 사항. -0.4에서 0.4 사이의 수치 또는 -100%에서 100% 사이의 퍼센트를 정의합니다.

색상이 b 축에 따라 있는 거리를 정의하여 색상의 노란색-파란색 정도를 나타냅니다.

-0.4은 파란색을, 0.4는 노란색을 의미합니다. none（0%에 동일）를 사용할 수도 있습니다.
/ A

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

none（빛의 투명도 채널을 의미）를 사용할 수도 있습니다. 기본 값은 100%입니다.

기술 세부 사항

버전： CSS Color Module Level 4

브라우저 지원

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

크롬 에지 파이어폭스 사파리 오페라
oklab()
111 111 113 15.4 97
수치와 퍼센트를 매개변수에서 혼합 사용
116 116 113 16.2 102

관련 페이지

참조:CSS 색상

참조:CSS hsl() 함수

참조:CSS hwb() 함수

참조:CSS lch() 함수

참조:CSS lab() 함수

참조:CSS oklch() 함수