CSS oklch() 함수

정의와 사용법

CSS에서 oklch() 함수는 OKLCH 색상 공간에서 색상을 지정합니다.

oklch() 함수는 매우 직관적입니다: 사용할 밝기/명도(L)의 양, 색조(회색)의 강도(C), 그리고 색상 자체(H)를 고려해야 합니다. 또한, 투명도 채널 값(A)을 추가하여 색상의 불투명도를 선택할 수 있습니다.

예제

다른 oklch() 색상:

/* 다른 밝기의 녹색 */
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ 다른 밝기의 노란색 /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ 다른 밝기의 빨간색 */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

직접 시험해 보세요

CSS 문법

절대 값 문법

oklch(L C H / A)
값 설명
L

필수. 색상의 감각 밝기를 정의하는 것이며, 0에서 1 사이의 수치나 0%에서 100% 사이의 백분율이 될 수 있습니다.

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

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

필수. 색상의 톤(색상의 양)을 정의하는 것이며, 수치나 백분율이 될 수 있습니다.

수치는 -0.4에서 0.4 사이의 수치나 -100%에서 100% 사이의 백분율이어야 합니다.

최소 값(0% 또는 -0.4) 시, 색상은 더 가까운 회색에 가깝습니다.

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

필수. 색상을 정의하는 것이며, 수치나 각도(0에서 360까지)가 될 수 있습니다.

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

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

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

기본 값은 100%입니다.

상대 값 문법

oklch(from color L C H / A)
값 설명
from color

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

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

필수. 색상의 감각 밝기를 정의하는 것이며, 0에서 1 사이의 수치나 0%에서 100% 사이의 백분율이 될 수 있습니다.

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

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

필수. 색상의 톤(색상의 양)을 정의하는 것이며, 수치나 백분율이 될 수 있습니다.

수치는 -0.4에서 0.4 사이의 수치나 -100%에서 100% 사이의 백분율이어야 합니다.

최소 값(0% 또는 -0.4) 시, 색상은 더 가까운 회색에 가깝습니다.

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

필수. 색상을 정의하는 것이며, 수치나 각도(0에서 360까지)가 될 수 있습니다.

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

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

또한 none(투명도 채널을 의미)를 사용할 수 있습니다. 기본 값은 100%입니다.

기술 세부 사항

버전: CSS Color Module Level 4

브라우저 지원

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

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

관련 페이지

참조:CSS 색상

참조:CSS hsl() 함수

참조:CSS hwb() 함수

참조:CSS lab() 함수

참조:CSS lch() 함수

참조:CSS oklab() 함수