Functions

Editing

lch(<lch()>params)

Lab 색 공간이 사용하는 좌표계에서 L 축은 동일하지만 극좌표의 C(채도)와 H(색조)를 사용하여 색을 생성한다.

설명

LCH와 Lab은 유사한 색 공간이다. 이를 기반으로 한 lab(), lch(), oklab(), oklch() 함수들이 존재하며 서로 기술적인 연관성이 있다보니 함께 설명을 하기로 한다.

Lab 색 공간

CIE(국제조명위원회)에서 규정한 lab 색 공간에서 색상을 생성한다. 'l'은 lightness 채널을 의미하며 명도를 나타낸다. 'a' 채널은 Green과 Red까지 거리, 'b' 채널은 Blue와 Yellow까지 거리를 나타낸다.

관련 함수는 lab(), oklab()이 있다.

LCH 색 공간

H는 색조를 나타내는 각도이며 C는 Saturation/Chroma을 나타내며 L축으로부터의 기하학적 거리이다.

<hue> 값은 hsl() 함수의 인수와 유사하게 해석되지만 색조는 지각적으로 균등한 간격으로 배치되기 때문에 같은 방식으로 각도에 매핑되지 않는다. 대신 양수 "a"축을 따라 0도(자줏빛 빨간색 방향)를 가리키고(360도, 720도 등), 양수 "b"축을 따라 90도(겨자색, 노란색 방향), 음수 "a"축을 따라 180도(녹색, 청록색 방향), 음수 "b"축을 따라 270도(하늘색 방향)을 가리킨다.

관련 함수로는 lch(), oklch()가 있다.

Lab과 LCH 색 공간의 문제점

CIE Lab과 LCH 색 공간은 널리 사용되고 있지만 다음과 같이 몇 가지 문제점을 가지고 있는 것으로 알려져 있다.

색조 선형성
파란색 영역(270도에서 330도 사이의 LCH 색조)에서는 시각적 색조가 LCH가 예측하는 색조에서 벗어난다. 같은 색조와 다른 채도의 파란색 세트를 중립 축에서 일직선상에 놓아야 하지만 곡선을 형성한다. 즉, 채도가 높은 파란색은 채도가 점차 감소함에 따라 눈에 띄게 보라색이 된다.
색조 균일성
LCH의 색조는 일반적으로 균일한 간격을 유지하지만(HSL과 HWB보다 훨씬 좋음) 균일성이 완벽하지 않다.
높은 크로마(chroma) 차이에 대한 과도한 예측
채도가 높은 색상의 경우 채도의 변화가 중립적인 색상에 비해 눈에 잘 띄지 않는다.

이러한 결함은 균일한 간격의 그라디언트 생성, 한 색상 공간에서 더 작은 색상 공간으로의 색 영역 매핑, 두 색상 간의 시각적 차이 계산에 영향을 미친다.

이를 보완하기 위한 두 색상의 시각적 차이(delta E)를 예측하는 공식이 생겼고  시간이 지남에 따라  더 정확해졌지만 계산이 훨씬 더 복잡해지는 문제가 생겼다. 이러한 노력에도 색조 곡률에는 도움이 되지 않았다.

좀더 개선된 Oklab과 Oklch 색 공간

최근에 이를 개선한 Lab과 LCH를 기반으로 한 새로운 Oklab과 Oklch가 등장했다. 시각적으로 유사한 색상의 대규모 데이터 세트를 수치적으로 최적화하여 생성되었다. CIE LCH에 비해 색조 선형성, 색조 균일성 및 채도 균일성이 향상되었다.

관련 함수로는 oklab(), oklch()가 있다.

웹브라우저의 지원 현황을 확인해야 한다. 작성 시점에서 크롬 웹브라우저의 경우 Lab, LCH 색상 공간 기반 함수를 지원하나 색상 설정에서 <percentage>가 유효하지 않으며 일부 W3C의 명세와 다른 점들이 있다.

매개 변수

lch() 함수의 매개 변수를 나타낸다. 

  • CSS Color Module Level 4
    lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
    첫 번째 인수 L(명도)의 경우: <percentage> | <number> | none
    0% = 0.0, 100% = 100.0
    두 번째 인수 c(채도)의 경우: <percentage> | <number> | none
    0% = 0, 100% = 150
    0부터 최대 230까지(음수인 경우 0으로 고정됨)
    세 번째 H(색조)의 경우: <hue> | none
    색조 각도를 <angle> 또는 <number>로 지정한다. 설정 값에 대한 자세한 사항은 위의 LCH Space 그림을 참고한다.
    네 번째 선택 사항 투명도<alpha-value> | none
    /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
    Lch 색 공간에서 색과 투명도 지정
Details

포함된 타입

  • <alpha-value>

    0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

    • <number> | <percentage>
    Details

    포함된 타입

    • <number>

      정수 또는 실수를 표현한다.

    • <percentage>

      어떠한 기준으로 부터 백분율로 표현한다.

  • <hue>

    색상환에서 각도로 표시되는 색조 값을 나타낸다.

    • CSS Color Module Level 4
      <number> | <angle>
    Details

    포함된 타입

    • <angle>

      0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

      <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

      선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • deg

        보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

      • grad

        400grad(그라디안)은 완전한 원을 만든다.

      • rad

        2π(라디안)이 완전한 원을 만든다.

      • turn

        1turn(턴)이 완전한 원을 만든다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <number>

      정수 또는 실수를 표현한다.

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
  • <number>

    정수 또는 실수를 표현한다.

  • <percentage>

    어떠한 기준으로 부터 백분율로 표현한다.

    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

기술 문서

CSS 색상 함수명에서 'h'는 일반적으로 Hue를 의미하며 이것은 색상환의 값(각도)을 나타낸다. 색상환은 색상 값을 각도 값으로 표현하며 국제 표준으로 사용하는 색상 값이다.

버전 명세

Modules
Module NameStatusSummary
CSS Color Module Level 4

Last review date: 2022-11-12

지원 웹브라우저