CSS Color Functions

이 포스트는 Sunkanmi Fafowora가 css-tricks에 올린 CSS Color Functions 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다.

몇 달 전 누군가 저에게 “웹사이트가 돋보이려면 무엇이 필요할까?”라고 물었다면, 아마도 화려한 애니메이션, 창의적인 레이아웃, 멋진 인터렉션, 혹은 전반적인 미적 감각 같은 것을 떠올렸을 것입니다. 하지만 지난 1년 가까이 색상을 다루며 작업해온 지금 동일한 질문을 받는다면, 확신을 가지고 이렇게 말할 수 있습니다. “중요한 건 색깔이야”라고요. 디자인을 구성하는 수많은 요소 중에서도 디자인을 가능한 가장 아름다운 형태를 만들어주는 것은 단연 좋은 컬러 시스템입니다.

하지만 CSS에서 색상은 완전히 이해하기가 쉽지 않은 영역입니다. 동일한 색상을 표현하는 방법이 여러가지이며, 겉보기에는 똑같아보일지라도 그 내부에서는 전혀 다른 기술이 사용되기도 합니다. 그래서 이 가이드에서는 CSS에서 색상을 설정하는 모든 방법과, 관련된 모든 속성들을 하나씩 살펴보려 합니다.

Colors are in everything

색상은 우리가 사용하는 휴대폰에도 있고, 눈으로 인식하는 모든 것에도 있으며, 우리가 바라보는 모든 화면 위에 존재합니다. 말 그대로 세상을 구성하는 거의 모든 요소에 스며들어 있죠. 디자인 관점에서 보면, 저는 awwwards.com에 소개된 사이트들에서 색상을 인상적으로 활용한 사례들을 자주 접합니다.

하지만 모든 색상이 같지는 않습니다. 겉보기에는 비슷할지라도 서로 다른 세계에 속해있을 수도 있죠. 이를 색 공간(color space)이라고 부릅니다. 대표적인 예가 바로 sRGB입니다. sRGB는 웹이 등장한 이후 오랜 시간 동안 사용되어 온 색 공간으로, 가장 널리 알려져있는 색 공간 중 하나입니다.

가장 많이 쓰이기는 하지만, sRGB에는 표현할 수 없는 색상들이 분명히 존재합니다. 이런 한계를 넘기 위해 CIELAB이나 Oklab 같은 새로운 색 공간이 도입되었고, 이를 통해 이전에는 상상조차 할 수 없던 훨씬 넓은 색 영역을 다룰 수 있게 되었습니다. 다만, 이 시점에서 이야기를 너무 앞서 나가지는 않겠습니다.

What’s a color space?

색 공간이란 프린터나 모니터와 같은 디바이스 안에서 존재하는 색상들을 정리하고 표현하는 방식입니다. 미디어 전반에는 Rec2020, Adobe RGB 등 다양한 색 공간이 존재하지만, 이들 모두가 CSS에서 지원되는 것은 아닙니다. 다행히 CSS에서 사용할 수 있는 색 공간만으로도 우리가 필요로 하는 모든 멋지고 아름다운 색상을 표현할 수 있습니다. 이 가이드에서는 CSS에서 사용할 수 있는 세 가지 주요 색 공간인 sRGB, CIELAB, 그리고 OkLab을 중심으로 살펴보려 합니다.

The sRGB Color Space

sRGB는 우리가 가장 먼저 접하게 되는 색 공간 중 하나입니다. 이 색 공간에서는 rgb(), hsl(), hwb()라는 세 가지 색상 함수를 사용해 색을 표현합니다. 이 함수들은 모두 CSS에서 색상을 정의하기 위한 기본적인 표기법입니다.

sRGB는 1996년부터 웹의 표준 색 공간으로 사용되어 왔습니다. 다만 인간이 색을 인지하는 방식보다는, 과거 컴퓨터가 색을 표현하던 방식에 더 가까운 구조를 가지고 있습니다. 그로 인해 현대 디스플레이가 표현할 수 있는 전체 색 영역을 충분히 담아내지 못한다는 한계가 있습니다. 그럼에도 불구하고, 현재까지도 많은 웹사이트와 애플리케이션이 sRGB를 사용하고 있습니다. 즉, sRGB는 다소 오래된 방식이지만 여전히 널리 사용되고 있는 색 공간입니다.

The rgb() function

rgb() 함수는 r, g, b 세 가지 값을 사용해 색상을 표현합니다. 각각은 빨강(red), 초록(green), 파랑(blue)의 강도를 의미합니다.

이 세 값은 모두 음수가 될 수 없으며, 0부터 255까지의 범위를 가집니다.

.element {
  color: rgb(245 123 151);
}

rgb()에는 선택적으로 알파(alpha) 값을 함께 지정할 수 있습니다. 알파 값은 슬래시(/) 뒤에 작성하며, 색상의 불투명도를 결정합니다. 값의 범위는 0 또는 0%부터 완전히 불투명한 1 또는 100%까지입니다.

.element {
  color: rgb(245 123 151 / 20%);
}

rgb()를 작성하는 방식에는 두 가지가 있습니다. 하나는 값들을 쉼표로 구분하는 기존(legacy) 문법이고, 다른 하나는 공백으로 구분하는 최신(modern) 문법입니다.

이 두 문법을 섞어 쓰는 것은 허용되지 않습니다. 실제로 동작하지도 않습니다.

/* 동작하지 않음 */
.element {
  color: rgb(225, 245, 200 / 0.5);
}

/* 이것도 동작하지 않음 */
.element {
  color: rgb(225 245 200, 0.5);
}

/* 이것 역시 동작하지 않음 */
.element {
  color: rgb(225, 245 200 / 0.5);
}

한 가지 문법을 일관되게 사용하는 것이 중요합니다. 기존 문법에 익숙하다면 계속 쉼표 기반 문법을 사용해도 되고, 새로운 방식에 익숙해지고 싶다면 공백 기반의 최신 문법을 사용하는 것이 좋습니다.

/* 유효함 (최신 문법) */
.element {
  color: rgb(245 245 255 / 0.5);
}

/* 유효함 (기존 문법) */
.element {
  color: rgb(245, 245, 255, 0.5);
}

The rgba() function

rgba() 함수는 기본적으로 rgb()와 동일하며, 여기에 투명도를 나타내는 알파(alpha) 값을 하나 더 포함한 형태입니다.

문법 측면에서 rgba()는 두 가지 방식으로 작성할 수 있습니다. 하나는 값을 쉼표로 구분하는 기존 문법이고, 다른 하나는 값을 공백으로 구분하고 알파 값을 슬래시(/) 뒤에 작성하는 최신 문법입니다.

.element {
  color: rgba(100, 50, 0, 0.5);
}

.element {
  color: rgba(100 50 0 / 0.5);
}

그렇다면 rgba()와 rgb()의 차이는 무엇일까요?

결론부터 말하면, 차이는 없습니다. 과거에는 투명도를 지정하려면 rgba()를 사용해야 했지만, 최근에는 rgb() 역시 슬래시(/) 문법을 통해 알파 값을 지원합니다.

또한 rgb()는 기존 쉼표 기반 문법과 최신 공백 기반 문법을 모두 지원합니다. 이로 인해 현재 시점에서는 rgba()를 사용할 명확한 이유가 거의 없습니다. 실제로 W3C에서도 rgba() 사용을 권장하지 않는 사례로 언급하고 있습니다.

정리하자면, rgb()와 rgba()는 동일하게 동작하며, 앞으로는 rgb()만 사용해도 충분합니다.

/* 정상 동작 */
.element-1 {
  color: rgba(250 30 45 / 0.8);
}

/* 동일하게 동작함 */
.element-2 {
  color: rgb(250 30 45 / 0.8);
}

The hexadecimal notation

CSS에서 사용하는 16진수 색상 코드는 sRGB 색 공간을 기반으로 하며, 3자리, 4자리, 6자리, 그리고 최대 8자리 형식을 가집니다. 개념적으로는 rgb()를 더 짧게 표현한 방식이라고 볼 수 있습니다. 16진수 색상은 #으로 시작하며, 0부터 9까지의 숫자와 a부터 f까지의 문자를 사용합니다. 이때 a는 10, b는 11, …, f는 15를 의미합니다.

가장 일반적인 형식은 6자리 16진수 표기입니다. 이 방식은 두 자리씩 묶어 색을 표현하며, 각각 빨강(RR), 초록(GG), 파랑(BB)을 의미합니다. 각 쌍의 값은 00부터 FF까지 가질 수 있고, 이는 rgb()에서의 0부터 255에 대응합니다.

앞선 예제에서는 알파벳을 소문자가 아닌 대문자(F)로 사용했습니다. 이는 CSS에서 16진수 색상 코드가 대소문자를 구분하지 않기 때문입니다. 따라서 16진수 색상을 사용할 때는 대문자와 소문자 중 어떤 것을 사용해도 결과에는 차이가 없습니다.

• 3자리 16진수 : 3자리 16진수 표기는 6자리 표기의 축약형입니다. 각 자리는 각각 빨강, 초록, 파랑 값을 나타냅니다. 실제로는 각 자릿값이 한 번씩 반복되어 해석됩니다.

.element {
  color: #abc; /* #AABBCC와 동일 */
}

이 방식은 표현할 수 있는 색상의 범위가 매우 제한적입니다. 예를 들어 빨강 값을 213으로 지정하거나, 파랑 값을 103으로 지정하는 것은 불가능합니다. 그 결과 3자리 표기로 표현할 수 있는 색상은 총 4,096개에 불과하며, 6자리 표기가 제공하는 약 1,600만 가지 색상에 비해 현저히 적습니다. 그럼에도 불구하고 빠르게 대략적인 색상을 지정하고 싶을 때는 여전히 유용할 수 있습니다.

• 4자리 16진수 : 4자리 16진수 표기는 3자리 표기에 알파(alpha) 값을 추가한 형태입니다. 이는 8자리 표기의 축약형으로, 모든 값은 해석 과정에서 두 번 반복됩니다.

.element {
  color: #abcd; /* #AABBCCDD와 동일 */
}

알파 값에서 0은 00으로 해석되어 완전히 투명한 상태를 의미하고, F는 FF로 해석되어 완전히 불투명한 상태를 의미합니다.

• 8자리 16진수 : 8자리 16진수 표기는 빨강, 초록, 파랑 값에 더해 알파 값을 함께 지정할 수 있는 방식입니다. sRGB 색 공간에서 색상과 투명도를 모두 제어할 수 있는 가장 완전한 형태입니다.

.element {
  color: #faded101;
}

The hsl() function

hsl()과 rgb()는 모두 sRGB 색 공간에 속하지만, 색상에 접근하는 방식은 서로 다릅니다. 일반적으로는 hsl()이 rgb()보다 직관적이라는 의견이 많지만, 결국 어떤 방식을 선호하는지는 개인의 선택에 달려 있습니다.

hsl()은 h, s, l 세 가지 값을 사용하며, 각각 색상(hue), 채도(saturation), 명도(lightness)를 의미합니다.

• 색상(hue)은 기준이 되는 색을 의미하며, 색상환(color wheel)에서의 방향을 각도로 표현합니다. 값의 범위는 0deg부터 360deg까지입니다.

• 채도(saturation)는 기준 색이 얼마나 강하게 나타나는지를 나타내며, 0 또는 0%부터 100 또는 100%까지의 값을 가집니다.

• 명도(lightness)는 색상이 흰색이나 검은색에 얼마나 가까운지를 나타냅니다.

여기서 흥미로운 점은 색상(hue) 값이 반드시 0deg에서 360deg 사이일 필요는 없다는 점입니다. 음수 각도나 360deg를 초과하는 값도 정상적으로 동작하며, 색상환을 기준으로 다시 순환합니다. 이는 무한 색상 애니메이션을 구현할 때 특히 유용합니다.

또한 색상환에서 현재 색상의 정반대 방향, 즉 색상 값에 180deg를 더하면 보색(complementary color)을 쉽게 구할 수 있습니다.

/* 현재 색상 */
.element {
  color: hsl(120deg 40 60 / 0.8);
}

/* 보색 */
.element {
  color: hsl(300deg 40 60 / 0.8);
}

rgb()와 마찬가지로 hsl() 역시 문법을 섞어 쓰는 것은 허용되지 않습니다. 쉼표 기반 문법과 공백 기반 문법을 함께 사용하면 동작하지 않습니다.

/* 동작하지 않음 */
.element {
  color: hsl(130deg, 50, 20 / 0.5);
}

/* 이것도 동작하지 않음 */
.element {
  color: hsl(130deg 50 20, 0.5);
}

/* 이것 역시 동작하지 않음 */
.element {
  color: hsl(130deg 50, 20 / 0.5);
}

The hsla() function

hsla() 함수는 본질적으로 hsl()과 동일합니다. 색상의 색상(h), 채도(s), 명도(l)를 나타내는 세 가지 값에 더해, 투명도를 제어하기 위한 알파(alpha) 값(a)을 포함합니다.

hsla() 역시 두 가지 방식으로 작성할 수 있습니다. 하나는 값을 쉼표로 구분하는 기존 문법이고, 다른 하나는 값을 공백으로 구분하고 알파 값을 슬래시(/) 뒤에 작성하는 최신 문법입니다.

.element {
  color: hsla(120deg, 100%, 50%, 0.5);
}

.element {
  color: hsla(120deg 100% 50% / 0.5);
}

그렇다면 hsla()와 hsl()의 차이는 무엇일까요?

결론부터 말하면, 차이는 없습니다. hsl()과 hsla()는 다음과 같은 공통점을 가집니다.

• 기존 문법과 최신 문법을 모두 지원합니다.

• 알파 값을 통해 색상의 투명도를 제어할 수 있습니다.

그럼에도 불구하고 hsla()가 여전히 존재하는 이유는 역사적인 배경 때문입니다. 초기에는 hsl()에서 투명도를 지정할 수 있는 방법이 없었기 때문에, 이를 보완하기 위해 hsla()가 사용되었습니다. 현재 시점에서는 CSS 설계상의 실수에 가깝다고 볼 수 있습니다.

정리하자면, hsla()를 사용할 이유는 거의 없습니다. 기능적으로 완전히 동일하면서도 더 간결한 hsl()을 사용하는 것이 바람직합니다.

/* 정상 동작 */
.element-1 {
  color: hsla(120deg 80 90 / 0.8);
}

/* 동일하게 동작함 */
.element-2 {
  color: hsl(120deg 80 90 / 0.8);
}

The hwb() function

hwb() 함수는 첫 번째 값으로 색상(hue)을 사용한다는 점에서 hsl()과 유사하지만, 이후에 색을 결정하는 방식은 다릅니다. hwb()는 흰색의 비율(whiteness)과 검은색의 비율(blackness)을 사용해 최종 색상을 결정합니다. 또한 rgb()나 hsl()과 마찬가지로 선택적으로 투명도를 지정하기 위한 알파(alpha) 값도 지원합니다.

.element {
  color: hwb(80deg 20 50 / 0.5);
}

• 첫 번째 값인 h는 hsl()에서의 색상 값과 동일하며, 색상환에서의 위치를 각도로 표현합니다. 범위는 0deg부터 360deg까지입니다.

• 두 번째 값인 w는 색상에 포함된 흰색의 비율을 나타냅니다. 값의 범위는 0 또는 0%부터 100 또는 100%까지이며, b 값이 0일 경우 100%는 완전한 흰색을 의미합니다.

• 세 번째 값인 b는 색상에 포함된 검은색의 비율을 나타냅니다. 역시 0 또는 0%부터 100 또는 100%까지의 값을 가지며, w 값이 0일 때 100%는 완전한 검은색을 의미합니다.

• 마지막으로 선택적인 값인 a는 색상의 불투명도를 나타내는 알파 값입니다. 슬래시(/) 뒤에 작성하며, 0.0 또는 0%는 완전히 투명한 상태를, 1.0 또는 100%는 완전히 불투명한 상태를 의미합니다.

hwb()는 실제로 많이 사용되는 색상 함수는 아니지만, CSS에서 완전히 유효한 방식입니다. 따라서 사용 여부는 전적으로 개인의 취향과 작업 방식에 따라 선택하면 됩니다.

Named colors

CSS의 이름이 있는 색상(named colors)은 sRGB 색 공간을 기반으로 미리 정의된 색상을 키워드 형태로 제공하는 방식입니다. white, blue, black, red처럼 익숙한 색상들이 여기에 해당합니다. 하지만 실제로는 훨씬 더 많은 색상이 정의되어 있으며, Color Modules Level 4 명세 기준으로 총 147개의 이름이 있는 색상이 존재합니다.

다만 이름이 있는 색상은 사용을 권장하지 않는 경우가 많습니다. 색상 이름이 실제로 떠올리는 색과 일치하지 않는 경우가 적지 않기 때문입니다. 이로 인해 디자인 의도를 정확히 전달하기 어렵고, 색상 관리 측면에서도 예측 가능성이 떨어질 수 있습니다.

The CIELAB Color Space

CIELAB 색 공간은 웹에서 비교적 최근에 도입된 색 공간으로, sRGB보다 훨씬 넓은 색 영역을 표현할 수 있습니다. 인간의 시각에 더 가까운 방식으로 색을 표현하기 때문에, sRGB가 담아낼 수 없는 다양한 색상들을 포함하고 있습니다.

The lab() function

lab() 색상 함수는 공백으로 구분된 세 개의 축 값을 사용해 색상을 정의합니다. 여기에 선택적으로 알파(alpha) 값을 추가할 수 있습니다.

.element {
  color: lab(50 20 20 / 0.9);
}

• 첫 번째 값인 l은 색상이 검은색에서 흰색으로 얼마나 가까운지를 나타내는 명도(lightness) 값입니다. 범위는 0 또는 0%(완전한 검은색)부터 100 또는 100%(완전한 흰색)까지입니다.

• 두 번째 값인 a는 초록색에서 빨간색 방향으로의 정도를 나타냅니다. 값이 음수일수록 초록색에 가까워지고, 양수일수록 빨간색에 가까워집니다. 실무적으로는 -125(또는 0%)부터 125(또는 100%) 범위로 사용됩니다.

• 세 번째 값인 b는 파란색에서 노란색 방향으로의 정도를 나타냅니다. 이 값 역시 음수일수록 파란색에, 양수일수록 노란색에 가까워지며, 일반적으로 -125부터 125 범위에서 사용됩니다.

• 마지막으로 선택적인 네 번째 값은 색상의 불투명도를 나타내는 알파 값입니다. 0.0 또는 0%는 완전히 투명한 상태를, 1.0 또는 100%는 완전히 불투명한 상태를 의미합니다.

lab() 함수는 sRGB보다 넓은 색 영역을 지원하는 디스플레이에서 새로운 색상을 표현할 때 특히 유용합니다. 현재는 대부분의 디스플레이와 주요 브라우저가 lab()을 지원하고 있기 때문에, 실무에서 사용해도 큰 제약은 없습니다.

참고로 CSS의 lab() 함수에서 a와 b 값은 이론적으로는 제한이 없는(unbounded) 값입니다. 다만 실제로는 명세에서 정의한 범위 내에서 사용하는 것이 일반적이며, 해당 범위를 벗어나는 값은 실질적인 의미를 가지지 않습니다.

The lch() function

CSS의 lch() 색상 함수는 lab()보다 더 직관적이고 사용하기 쉽다고 평가받습니다.

.element {
  color: lch(10 30 300deg);
}

lch()와 lab()는 동일한 색 공간을 사용하지만, 색상을 표현하는 방식은 다릅니다. lab()가 l, a, b 축을 사용하는 반면, lch()는 명도(lightness), 채도(chroma), 색상(hue)을 기준으로 색을 정의합니다.

• 첫 번째 값인 l은 색상이 검은색에서 흰색으로 얼마나 가까운지를 나타냅니다. 범위는 0 또는 0%(완전한 검은색)부터 100 또는 100%(완전한 흰색)까지입니다.

• 두 번째 값인 c는 색상의 크로마(chroma), 즉 색의 선명도를 나타냅니다. 개념적으로는 채도와 유사합니다. 실무적으로는 0부터 약 150(또는 100%) 범위에서 사용됩니다.

• 세 번째 값인 h는 색상의 색조(hue)를 의미하며, 색상환에서의 각도로 표현됩니다. 값의 범위는 0deg부터 360deg까지입니다.

• 네 번째이자 선택적인 값은 색상의 불투명도를 나타내는 알파(alpha) 값입니다. 0.0 또는 0%는 완전히 투명한 상태를, 1.0 또는 100%는 완전히 불투명한 상태를 의미합니다.

참고로 lch()에서 사용하는 크로마(c) 값은 이론적으로는 상한선이 없는 값입니다. 즉, 명세상으로는 제한이 없지만, 실제로는 위에서 언급한 범위가 현실적인 한계로 사용됩니다.

The OkLab Color Space

OkLab 색 공간은 Björn Ottosson이 기존 lab 색 공간을 개선하기 위해 만든 색 공간입니다. 이름 그대로 “괜찮은(OK)” 수준을 넘어, 더 나은 lab 색 공간을 목표로 설계되었습니다. CIELAB 색 공간이 가지고 있던 한계, 예를 들어 lab() 기반 이미지 처리에서의 문제나 지각적 균일성(perceptual uniformity)의 부족을 해결하기 위해 만들어졌습니다. CSS에서는 이 색 공간에 대응하는 두 가지 색상 함수인 oklab()과 oklch()를 제공합니다.

지각적 균일성이란, 그라디언트에서 한 지점에서 다른 지점으로 색상이 변화할 때 시각적으로 부드럽고 일정하게 느껴지는 특성을 의미합니다. 만약 색상이 변화하는 과정에서 특정 구간만 유독 대비가 강하게 느껴진다면, 이는 지각적으로 균일하지 않은 색상 맵(perceptually non-uniform colormap)이라고 합니다. rgb()에서 색상 간 전환 시 이러한 현상이 두드러지게 나타나는 경우가 대표적인 예입니다.

oklab()에서는 rgb()와 달리 색상 간 전환이 매우 부드럽게 이루어지며, 눈에 띄는 대비 구간이 거의 나타나지 않습니다. 이는 OkLab 색 공간이 기존에 존재하던 급격한 색상 대비 문제를 해결하고, sRGB에는 존재하지 않는 훨씬 더 많은 색상에 접근할 수 있게 해주기 때문입니다.

OkLab은 CIELAB이 제공하던 색조(hue)와 명도(lightness)의 일관성을 유지하면서도, 더 나은 채도 표현을 제공합니다. 그 결과 색상 간 전환이 더욱 자연스럽고, 그라디언트 역시 한층 매끄럽게 표현됩니다.

The oklab() function

oklab() 색상 함수는 lab()과 마찬가지로 명도, 빨강/초록 축, 파랑/노랑 축을 기준으로 색상을 생성하며, 여기에 선택적으로 불투명도를 위한 알파(alpha) 값을 포함합니다. 다만 oklab()에서 사용하는 값의 범위와 스케일은 lab()과 다르기 때문에 이 점은 주의가 필요합니다.

.element {
  color: oklab(30% 20% 10% / 0.9);
}

• 첫 번째 값인 l은 색상의 명도를 나타내며, 검은색에서 흰색까지의 정도를 의미합니다. 값의 범위는 0 또는 0%(완전한 검은색)부터 1 또는 100%(완전한 흰색)까지입니다.

• 두 번째 값인 a는 초록색에서 빨간색 방향으로의 정도를 나타냅니다. 음수 값은 초록색 쪽으로, 양수 값은 빨간색 쪽으로 이동하며, 일반적으로 -0.4(또는 -100%)부터 0.4(또는 100%) 범위에서 사용됩니다.

• 세 번째 값인 b는 파란색에서 노란색 방향으로의 정도를 나타냅니다. 값이 음수일수록 파란색에, 양수일수록 노란색에 가까워지며, 범위 역시 -0.4부터 0.4입니다.

• 네 번째이자 선택적인 값은 색상의 불투명도를 나타내는 알파 값입니다. 0.0 또는 0%는 완전히 투명한 상태를, 1.0 또는 100%는 완전히 불투명한 상태를 의미합니다.

oklab()은 lab()의 주요 한계 중 하나였던 지각적 균일성 문제를 해결합니다. 따라서 lab()의 대안을 찾고 있다면, 더 나은 선택은 oklab()입니다.

참고로 CSS의 oklab() 함수에서 a와 b 값은 이론적으로는 상한과 하한이 없는 값입니다. 즉, 기술적으로는 제한이 없지만, 실제 사용과 명세 기준에서는 위에서 언급한 범위가 현실적인 한계로 간주됩니다.

The oklch() function

oklch() 색상 함수는 lch()와 마찬가지로 명도(lightness), 크로마(chroma), 색상(hue), 그리고 선택적인 알파(alpha) 값을 기준으로 색상을 생성합니다. 가장 큰 차이점은 lab()와 lch()에서 존재하던 문제들을 해결한 색 공간을 기반으로 한다는 점입니다.

.element {
  color: oklch(40% 20% 100deg / 0.7);
}

• 첫 번째 값인 l은 색상의 명도를 나타내며, 검은색에서 흰색으로의 정도를 의미합니다. 범위는 0.0 또는 0%(완전한 검은색)부터 1.0 또는 100%(완전한 흰색)까지입니다.

• 두 번째 값인 c는 색상의 크로마(chroma), 즉 색의 선명도를 나타냅니다. 일반적으로는 0 또는 0%부터 약 0.4 또는 100%까지의 범위에서 사용되며, 이론적으로는 0.5를 넘지 않습니다.

• 세 번째 값인 h는 색상의 색조(hue)를 의미하며, 색상환에서의 각도로 표현됩니다. 값의 범위는 0deg부터 360deg까지입니다.

• 네 번째이자 선택적인 값은 색상의 불투명도를 나타내는 알파 값입니다. 0.0 또는 0%는 완전히 투명한 상태를, 1.0 또는 100%는 완전히 불투명한 상태를 의미합니다.

참고로 CSS의 oklch() 함수에서 크로마(c) 값은 이론적으로는 상한과 하한이 없는 값입니다. 즉, 기술적으로는 제한이 없지만, 명세 기준과 실제 사용에서는 위에서 언급한 범위가 현실적인 한계로 간주됩니다.

The color() function

color() 함수는 앞서 살펴본 색상 함수들과 달리, 하나의 색 공간에만 국한되지 않고 여러 색 공간에 직접 접근할 수 있는 함수입니다. 이 함수를 통해 총 아홉 가지 색 공간의 색상을 사용할 수 있습니다.

color() 함수를 사용하기 위해서는 다음과 같은 매개변수 구조를 이해해야 합니다.

• 첫 번째 값은 색상을 가져올 색 공간(color space) 을 지정합니다. 사용할 수 있는 값은 srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65입니다.

• 그 다음 세 개의 값(c1, c2, c3)은 선택한 색 공간 내에서의 색상 좌표를 의미합니다. 각 값의 범위는 0.0부터 1.0까지입니다.

• 마지막으로 선택적인 여섯 번째 값은 색상의 불투명도를 나타내는 알파(alpha) 값입니다. 값의 범위는 0.0 또는 0%부터 1.0 또는 100%까지입니다.

The color-mix() function

color-mix() 함수는 지정한 색 공간 안에서 서로 다른 두 색상을 혼합하는 함수입니다. 색상의 타입에 제한이 없기 때문에, 이 방식을 사용하면 기존의 어떤 색상 함수보다도 훨씬 다양한 색을 만들어낼 수 있습니다. CSS에서 상당히 강력한 색상 관련 함수라고 볼 수 있습니다.

.element {
  color: color-mix(in oklab, hsl(40 20 60) 80%, red 20%);
}

이 함수는 말 그대로 하나의 색 공간 안에서 두 색상을 섞는 방식으로 동작합니다. 이때 주의할 점은, color() 함수에서 사용할 수 있는 색 공간과 color-mix()에서 사용할 수 있는 색 공간이 서로 다르다는 점입니다.

color-mix()를 사용하려면 다음 세 가지 요소를 이해해야 합니다.

• 첫 번째 값인 in <colorspace>는 색상을 혼합할 때 사용할 보간(interpolation) 기준 색 공간을 지정합니다. 사용할 수 있는 색 공간은 다음과 같습니다 : srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklch

• 두 번째와 세 번째 값은 각각 혼합할 색상 값과 해당 색상이 차지하는 비율을 의미합니다. 비율은 0%부터 100%까지 지정할 수 있습니다.

The Relative Color Syntax

상대 색상(relative color) 문법은 다음과 같은 형태로 동작합니다.

.element {
  color-function(from origin-color c1 c2 c3 / alpha)
}

• 첫 번째 값인 from은 필수 키워드로, origin-color로부터 색상 값을 추출하겠다는 의미입니다.

• 두 번째 값인 origin-color는 기준이 되는 색상입니다. rgb(), hsl() 같은 색상 함수일 수도 있고, 색상 키워드나 또 다른 상대 색상 표현일 수도 있습니다.

• 그 다음에 오는 c1, c2, c3 값은 현재 사용 중인 색상 함수의 색상 채널에 해당합니다. 각 값은 해당 색상 함수에서 유효한 채널 값과 매칭됩니다.

• 마지막으로 선택적인 값인 alpha는 색상의 불투명도를 나타냅니다. 값의 범위는 0.0 또는 0%부터 1.0 또는 100%까지이며, 기준 색상(origin-color)에서 그대로 가져올 수도 있고 직접 지정할 수도 있습니다.

예를 들어 rgb() 색상을 lab() 색 공간으로 변환하는 경우는 다음과 같습니다.

.element {
  color: lab(from rgb(255 210 1 / 0.5) l a b / a);
}

위 예제에서는 rgb()의 색상 값이 lab()의 l, a, b 값으로 변환되며, 알파 값 역시 원본 색상의 값을 그대로 사용합니다. 이번에는 rgb() 색상을 oklch()로 변환해 보겠습니다.

.element {
  color: oklch(from rgb(255 210 1 / 0.5) 50% 20% h / a);
}

이 예제에서는 l과 c 값은 새로 지정했지만, h(색상)와 a(알파 값)는 원본 색상인 rgb(255 210 1 / 0.5)에서 그대로 가져옵니다. 결과적으로 기준이 되는 연한 노란색의 색조와 투명도를 유지한 채, 명도와 크로마만 조정한 색상이 만들어집니다.

상대 색상 문법은 수학 함수와 함께 사용하는 것도 가능합니다. 모든 CSS 색상 함수는 이 상대 색상 문법을 지원합니다. 간단히 말해, 한 색상에서 값을 가져와 다른 색상 함수의 값으로 변환하는 방식이라고 이해하면 됩니다. 기본 구조는 항상 from <color> 형태입니다.

.element {
  color: oklch(
    from rgb(255 210 1 / 0.5)
    calc(50% + var(--a))
    calc(20% + var(--b))
    h / a
  );
}

다만 color() 함수에서의 상대 색상 문법은 약간 다릅니다. 색 공간 이름을 명시한 뒤, 모든 채널 값을 완전히 작성해야 합니다.

.element {
  color: color(from origin-color colorspace c1 c2 c3 / alpha);
}

마지막으로 주의할 점이 하나 있습니다. color-mix() 함수 자체는 상대 색상 문법을 직접 지원하지 않습니다. 다만 color-mix()에 전달하는 개별 색상 값 안에서 상대 색상 문법을 사용하는 것은 가능합니다. 즉, 상대 색상은 색상 함수 내부에서만 사용 가능하며, color-mix()의 문법 일부는 아닙니다.

Color gradients

CSS는 하나의 색상에서 다른 색상으로 자연스럽게 전환하는 기능을 충분히 지원합니다. 다양한 그라디언트 유형과 실제 예제를 포함한 자세한 내용은 “CSS Gradients Guide”를 참고하면 됩니다.