Lab 색 공간이 사용하는 좌표계에서 L 축은 동일하지만 극좌표의 C(채도)와 H(색조)를 사용하여 색을 생성한다.
LCH와 Lab은 유사한 색 공간이다. 이를 기반으로 한 lab()
, lch()
, oklab()
, oklch()
함수들이 존재하며 서로 기술적인 연관성이 있다보니 함께 설명을 하기로 한다.
CIE(국제조명위원회)에서 규정한 lab 색 공간에서 색상을 생성한다. 'l'은 lightness 채널을 의미하며 명도를 나타낸다. 'a' 채널은 Green과 Red까지 거리, 'b' 채널은 Blue와 Yellow까지 거리를 나타낸다.
관련 함수는 lab()
, oklab()
이 있다.
H는 색조를 나타내는 각도이며 C는 Saturation/Chroma을 나타내며 L축으로부터의 기하학적 거리이다.
<hue> 값은 hsl(
) 함수의 인수와 유사하게 해석되지만 색조는 지각적으로 균등한 간격으로 배치되기 때문에 같은 방식으로 각도에 매핑되지 않는다. 대신 양수 "a"축을 따라 0
도(자줏빛 빨간색 방향)를 가리키고(360
도, 720
도 등), 양수 "b"축을 따라 90도(겨자색, 노란색 방향), 음수 "a"축을 따라 180
도(녹색, 청록색 방향), 음수 "b"축을 따라 270
도(하늘색 방향)을 가리킨다.
관련 함수로는 lch()
, oklch()
가 있다.
CIE Lab과 LCH 색 공간은 널리 사용되고 있지만 다음과 같이 몇 가지 문제점을 가지고 있는 것으로 알려져 있다.
이러한 결함은 균일한 간격의 그라디언트 생성, 한 색상 공간에서 더 작은 색상 공간으로의 색 영역 매핑, 두 색상 간의 시각적 차이 계산에 영향을 미친다.
이를 보완하기 위한 두 색상의 시각적 차이(delta E)를 예측하는 공식이 생겼고 시간이 지남에 따라 더 정확해졌지만 계산이 훨씬 더 복잡해지는 문제가 생겼다. 이러한 노력에도 색조 곡률에는 도움이 되지 않았다.
최근에 이를 개선한 Lab과 LCH를 기반으로 한 새로운 Oklab과 Oklch가 등장했다. 시각적으로 유사한 색상의 대규모 데이터 세트를 수치적으로 최적화하여 생성되었다. CIE LCH에 비해 색조 선형성, 색조 균일성 및 채도 균일성이 향상되었다.
관련 함수로는 oklab()
, oklch()
가 있다.
lch()
함수의 매개 변수를 나타낸다.
lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
0%
= 0.0
, 100%
= 100.0
0%
= 0, 100%
= 150
0
부터 최대 230
까지(음수인 경우 0
으로 고정됨)/
로 구분된 네 번째 인수 0
~1
)를 지정한다.0
에서 1
까지의 소수로 설정이 가능하며 0
은 투명, 0.5
는 반투명, 1
은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%
에서 100%
까지 설정이 가능하며 0%
는 투명, 100%
는 불투명을 의미한다.
<number> | <percentage>
색상환에서 각도로 표시되는 색조 값을 나타낸다.
<number> | <angle>
0~360도 범위의 각도 값을 deg
(도), grad
(그레이드), rad
(라디안), turn
(턴) 단위로 표현한다.
<angle>
데이터 타입은 <number>
타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0
인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +
, -
부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
정수 또는 실수를 표현한다.
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
CSS 색상 함수명에서 'h'는 일반적으로 Hue를 의미하며 이것은 색상환의 값(각도)을 나타낸다. 색상환은 색상 값을 각도 값으로 표현하며 국제 표준으로 사용하는 색상 값이다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Color Module Level 4 | Last review date: 2022-11-12 |