CSS 색상 4는 더 많은 색상, 조작 기능, 개선된 그라데이션 등 다양한 색 영역 도구와 기능을 웹에 제공합니다.
25년 넘게 sRGB(표준 빨간색 녹색 파란색)는 rgb(), hsl(), 16진수와 같은 색상 공간을 제공하는 CSS 경사 및 색상의 유일한 색상 영역이었습니다. 디스플레이에서 가장 일반적인 색 영역 기능으로, 공통 분모입니다. 이 영역 내에서 색상을 지정하는 데 매우 익숙해졌습니다.
디스플레이가 더 다양한 색상을 표시할 수 있게 됨에 따라 CSS는 이러한 더 넓은 범위 내에서 색상을 지정하는 방법이 필요합니다. 현재 색상 형식에는 넓은 색상 범위를 위한 언어가 없습니다.
CSS가 업데이트되지 않으면 90년대 색상 범위에서 영원히 멈춰 이미지 및 동영상에서 볼 수 있는 넓은 색 영역과 일치하지 않을 수 밖에 없습니다. 트랩됨: 사람의 눈으로 볼 수 있는 색상의 30%만 표시됩니다. 이 함정을 탈출할 수 있도록 도와준 CSS Color Level 4에게 감사드립니다. 주로 레아 베루와 크리스 릴리가 작성했습니다.
Chrome 111부터 CSS 색상 4 영역 및 색상 공간이 지원되며, 2016년부터 display-p3를 지원하던 Safari에 추가되었습니다. CSS는 이제 HD (고화질) 디스플레이를 지원하여 HD 영역에서 색상을 지정하는 동시에 전문화된 색상 공간도 제공할 수 있습니다. 이 가이드에서는 이 새로운 색상의 세계를 활용하는 방법을 설명합니다.
직접 사용해 보기
지원되는 브라우저에서는 50% 더 많은 색상을 선택할 수 있습니다. 1,600만 가지 색상이 대단하다고 생각한 것 같았는데, 이 새로운 공간에서 얼마나 많은 색상을 보여줄 수 있는지 확인해 볼 때까지 기다려 보세요. 또한 비트 심도가 충분하지 않아 리졸브되었기 때문에 밴딩된 모든 경사도 생각해 보세요.
더 많은 색상, 아마도 디스플레이에서 지원하는 가장 선명한 색상 외에도 새로운 색상 공간은 색상 시스템을 관리하고 만드는 고유한 도구와 메서드를 제공합니다. 예를 들어 지금까지는 HSL과 HSL의 'lightness' 채널이 있었는데, 이 채널은 최고의 웹 개발자였습니다. 이제 CSS에는 LCH의 '인지 밝기'가 있습니다.
또한 그라데이션과 혼합은 색상 공간 지원, 색조 보간 옵션, 적은 밴딩과 같은 일부 업그레이드를 제공합니다. 다음 이미지는 몇 가지 혼합 업그레이드를 보여줍니다. 상위 두 가지 색상 조합은 sRGB입니다. 하단의 두 색상 조합은 디스플레이 p3에 있습니다. 디스플레이 p3는 색상이 더 생생하고 혼합으로 중앙이 완전한 흑백이 됩니다. 여기서 sRGB는 약간 흐려 보이고 중간 믹스가 완전한 검은색 또는 흰색 결과가 아닙니다.
https://codepen.io/web-dot-dev/pen/poZgXQb
이 가이드에서는 색상이의 변화와 앞으로의 방향, CSS가 웹 개발자의 색상을 관리하고 지원하는 방법을 다룹니다.
개요
색상과 웹의 문제는 CSS가 고화질 준비가 되지 않는 반면, 대부분의 사용자가 주머니에 있거나 더 꺼내거나 벽에 붙어 있는 디스플레이는 넓은 색 영역, 고화질 컬러를 사용할 수 있다는 점입니다. 디스플레이의 색상 기능이 CSS보다 빠르게 성장했으며 이제 CSS가 이에 대응합니다.
'더 많은 색상' 외에도 이 도움말을 마치면 더 많은 색상을 지정하고, 그라데이션을 강화하고, 각 작업에 가장 적합한 색상 공간과 색 영역을 선택할 수 있습니다.
색 공간이란 무엇인가요?
gamut은 무언가의 크기를 나타냅니다. '수백만 가지 색상'이라는 문구는 디스플레이 영역 또는 선택해야 하는 색상 범위에 관한 주석입니다. 다음 이미지에서는 3가지 색 영역이 비교되며, 크기가 클수록 더 많은 색상이 제공됩니다.
색 영역에도 이름이 있을 수 있습니다. 농구 대 야구, 벤트 커피 컵, 그란데 비교처럼 크기의 이름은 사람들이 소통하는 데 도움이 될 수 있습니다. 이러한 색 영역 이름을 학습하면 다양한 색을 소통하고 빠르게 이해하는 데 도움이 됩니다.
이 문서에서는 sRGB보다 넓은 범위의 7가지 새로운 색 영역을 소개하고 사용할 항목을 선택하는 데 도움이 되는 다양한 기능을 설명합니다.
인간의 가시 영역
색 영역은 종종 인간의 시각적 영역, 즉 인간의 눈으로 볼 수 있다고 믿는 전체 색 영역과 비교됩니다. HVS는 보통 다음과 같은 색도 다이어그램으로 표현됩니다.
가장 바깥쪽 모양은 인간으로 볼 수 있는 모양이고 안쪽 삼각형은 rgb() 함수 범위(sRGB 색공간이라고도 함)입니다.
위에서 삼각형을 살펴봤듯이 색 영역 크기를 비교하면 아래에서 삼각형을 찾을 수 있습니다. 이는 업계에서 색 영역에 관해 소통하고 비교하는 방법입니다.
색 공간이란 무엇인가요?
색 공간은 색 영역의 배열로, 도형과 색상 액세스 방법을 설정합니다. 대부분은 큐브나 원통 같은 단순한 3D 도형입니다. 이 색상 배열은 어떤 색상이 서로 인접해 있는지, 색상에 액세스하고 보간하는 방식이 어떻게 작동하는지를 결정합니다.
RGB는 3축의 좌표를 지정하여 색상에 액세스하는 직사각형 색상 공간과도 같습니다. HSL은 원통형 색상 공간으로, 색상에 색조 각도와 두 축의 좌표로 액세스됩니다.
수준 4 사양은 이전에 공유된 7가지 새로운 색 영역에서 색상을 찾기 위한 12개의 새로운 색 공간을 도입합니다.
이 색상은 이전에 사용할 수 있었던 4가지 색상 공간 외에 추가로 제공됩니다.
색 영역 및 색 공간 요약
색 공간은 색 영역이 색상 범위인 색상의 매핑입니다. 색 영역은 총 입자의 총합으로, 색 공간은 이 범위의 입자를 담기 위해 만들어진 병이라고 간주하세요.
다음은 알렉세이 아르도프의 대화형 시각 자료로서 색공간을 보여줍니다. 이 데모에서 가리키고 드래그하고 확대/축소해 보세요. 다른 공간을 시각적으로 표시하려면 색상 공간을 변경합니다.
- 색 영역을 사용하여 낮은 범위 또는 좁은 색 영역 대 높은 범위 또는 넓어진 색 영역과 같은 색 범위에 관해 이야기합니다.
- 색상 공간을 사용하여 색상 정렬, 색상 지정에 사용되는 문법, 색상을 조작하고 색상을 통해 보간하는 방법을 설명합니다.
더 많은 색상, 새로운 공간, 디버그 결과에 액세스하는 방법
CSS 색상 4에서는 CSS 및 색상을 위한 여러 가지 새로운 기능과 도구를 간략하게 설명합니다. 먼저 새로운 기능 이전의 색상에 관한 요약입니다 그런 다음 새로운 색상 공간, 구문, 도구를 개략적으로 살펴봅니다.
다음 Codepen은 신규 및 이전 색상 구문을 모두 함께 보여줍니다.
고전적인 색상 공간에 대한 리뷰
2000년대부터 색상을 값으로 허용하는 모든 CSS 속성에 16진수 (16진수), rgb(), rgba(), hotpink와 같은 이름 또는 currentColor와 같은 키워드와 함께 사용할 수 있었습니다.
2010년경, 브라우저에 따라 CSS는 hsl() 색상을 사용할 수 있었습니다. 그런 다음 2017년에는
알파가 있는 16진수가 등장했습니다. 마지막으로, 최근에 hwb()가 브라우저에서 지원되기 시작했습니다.
이러한 고전적인 색상 공간은 모두 동일한 색 영역(sRGB) 내의 색상을 참조합니다.
HEX
16진수 색상 공간은 R, G, B, A를 16진수 숫자로 지정합니다. 다음 코드 예는 이 구문으로 빨간색, 녹색, 파란색과 불투명도를 지정할 수 있는 모든 방법을 보여줍니다.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
RGB 색상 공간은 빨간색, 녹색 및 파란색 채널에 직접 액세스할 수 있습니다. 0~255 사이의 값 또는 0~100의 백분율로 지정할 수 있습니다. 이 구문은 사양에 일부 구문 정규화가 적용되기 전에 존재했으므로, 실제로 쉼표 및 쉼표 구문이 표시되지 않습니다. 앞으로 쉼표는 더 이상 필요하지 않습니다.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
인간의 언어와 소통을 지향하는 최초의 색상 공간 중 하나인 HSL (색채 채도 및 밝기)은 sRGB 영역의 모든 색상을 제공하는 동시에 뇌가 빨간색, 녹색, 파란색이 어떻게 상호작용하는지 알 필요가 없습니다. RGB와 마찬가지로 원래 구문에 쉼표도 있었지만 앞으로 이동하면 쉼표가 더 이상 필요하지 않습니다.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
하드웨어 하드웨어 공급업체
인간이 색상을 설명하는 방식에 중점을 둔 또 다른 sRGB 색 공간은 HWB(색조, 흰색, 흑백)입니다. 작성자는 색조를 선택하고 흰색 또는 검은색으로 혼합하여 원하는 색상을 찾을 수 있습니다.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
새로운 웹 색상 공간 만나보기
다음 색공간을 사용하면 sRGB보다 큰 색 영역에 액세스할 수 있습니다. display-p3 색공간은 RGB보다 거의 두 배 많은 색상을 제공하는 반면, Rec2020은 display-p3보다 거의 두 배 많은 색상을 제공합니다. 정말 많은 색이네요!
color() 함수
새로운 color() 함수는 R, G, B 채널로 색상을 지정하는 모든 색상 공간에 사용할 수 있습니다. color()는 먼저 색상 공간 매개변수를 가져온 다음 RGB의 일련의 채널 값 및 선택적으로 일부 알파를 가져옵니다.
rgb, srgb, hsl, hwb 등의 특수 함수가 긴 목록으로 커져서 색상 공간을 매개변수가 되도록 하기가 쉬웠기 때문에 많은 새로운 색상 공간에서 이 함수를 사용합니다.
장점
- RGB 채널을 사용하는 색 공간에 액세스하기 위한 정규화된 공간입니다.
- 넓은 색 영역 RGB 기반 색공간까지 확장 가능
단점
- HSL, HWB, LCH, okLCH, okLAB와 호환되지 않음
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
color()를 통한 sRGB
이 색상 공간은 rgb()와 동일한 기능을 제공합니다. 또한 0과 1 사이의 소수를 제공하며 정확히 0~100%를 사용합니다.
장점
- 거의 모든 디스플레이가 이 색 공간의 범위를 지원합니다.
- 디자인 도구 지원
단점
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
color()를 통한 선형 sRGB
RGB의 이 선형 대안은 예측 가능한 채널 강도를 제공합니다.
장점
- RGB 채널에 직접 액세스하여 게임 엔진 또는 조명 쇼와 같은 작업에 편리합니다.
단점
- 인지적으로 선형적이지 않습니다.
- 흑백은 가장자리에 가득 차 있습니다.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
그라데이션에 대해서는 나중에 자세히 설명하겠지만
차이를 보여주기 위해 srgb 및 linear-srgb 흑백 그라데이션을 확인하면
큰 의미가 있습니다.
LCH
이 게시물의 첫 번째 공간은 RGB 영역 밖의 색상에 액세스하기 위한 문법을 소개합니다. 또한 디스플레이의 색 영역 색상을 매우 쉽게 생성할 수 있는 최초의 도구이기도 합니다. 이는 모든 CIE 공간 색상 (lch, oklch, lab, oklab)이 사람이 볼 수 있는 색상 스펙트럼 전체를 나타낼 수 있기 때문입니다.
이 색상 공간은 사람의 시각을 따라 모델링되며 이러한 색상 등을 지정하는 문법을 제공합니다. LCH 채널은 밝기, 크로마 및 색조입니다. HSL 및 HWB에서처럼 색조는 각도입니다. 밝기는 0~100 사이의 값이지만 HSL의 밝기와는 달리 특별한'인식 선형' 인간 중심의 밝기입니다. 크로마는 채도와 비슷합니다. 범위는 0~230이지만 기술적으로 제한되지 않습니다.
장점
- 인지적으로 선형적이기 때문에 예측 가능한 색상 조작이 가능합니다 (oklch 참고).
- 익숙한 채널을 사용합니다.
- 그라데이션이 생생한 경우가 많습니다.
단점
- 색 영역을 쉽게 벗어날 수 있습니다.
- 드물지만 색조 변화를 방지하기 위해 그라데이션에 중간점이 조정될 수 있습니다.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
실험실
인지 가능한 선형 밝기 (L) 차원을 사용하여 CIE 영역에 액세스하기 위해 만들어진 또 다른 색상 공간 LAB의 A와 B는 인간 색맹의 고유한 축인 빨강-녹색, 파랑-노란색을 나타냅니다. A에 양수 값이 지정되면 빨간색을 추가하고 0 미만이면 녹색을 추가합니다. B에 양수가 주어지면 노란색이 추가되며, 음수 값은 파란색에 가깝습니다.
장점
- 일관된 경사 인식
- HDR(High Dynamic Range)
단점
- 색조가 변경될 가능성이 있습니다.
- 값을 읽을 때 손으로 직접 작성하거나 색상을 추측하기가 어렵습니다.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
오클라호마
이 색상 공간은 LCH를 보정합니다. LCH와 마찬가지로 (L)은 계속해서 인지적으로 선형 밝기, C는 크로마, H는 색조를 나타냅니다.
HSL 또는 LCH로 작업한 적이 있다면 이 분야가 익숙하게 느껴질 것입니다. 색상환에서 H의 각도를 선택하고 L를 조정하여 밝기나 어두움 정도를 선택합니다. 그러면 채도 대신 크로마가 사용됩니다. 밝기와 크로마 조정은 쌍으로 이루어지는 경향이 있거나 타겟 영역을 벗어나는 높은 크로마 색상을 요청하기가 쉬울 수 있다는 점을 제외하면 상당히 동일합니다.
장점
- 파란색과 보라색 색조로 작업할 때도 놀라운 일이 아닙니다.
- 선형으로 인지하는 밝기입니다.
- 익숙한 채널을 사용합니다.
- HDR(High Dynamic Range)
- Evil Martians가 제작한 현대적인 색상 선택 도구가 있습니다.
단점
- 색 영역을 쉽게 벗어날 수 있습니다.
- 새롭고 상대적으로 탐색되지 않았습니다.
- 색상 선택 도구가 거의 없습니다.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
오클라브
이 스페이스는 실습용으로 보정됩니다. 이는 이미지 처리 품질에 최적화된 공간으로도 표현됩니다. CSS에서는 그라디언트와 색상 함수 조작 품질을 의미합니다.
장점
- 애니메이션 및 보간을 위한 기본 공간
- 선형으로 인지하는 밝기입니다.
- 실험실처럼 색조 변화가 없습니다.
- 일관된 경사 인식
단점
- 새롭고 상대적으로 탐색되지 않았습니다.
- 색상 선택 도구가 거의 없습니다.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
디스플레이 P3
디스플레이 P3 색 공간 및 색 공간은 Apple이 2015년부터 iMac에서 지원한 이후 인기가 많아졌습니다. Apple은 또한 2016년부터 CSS를 통해 웹페이지에서 display-p3를 지원했으며, 이는 다른 브라우저보다 5년 앞선 것입니다. sRGB에서 온 경우 스타일을 더 높은 다이내믹 범위로 이동할 때 작업을 시작하기에 좋은 색상 공간입니다.
장점
- HDR 디스플레이의 기준으로 간주되는 훌륭한 지원입니다.
- sRGB보다 50% 더 많은 색상을 사용합니다.
- DevTools는 훌륭한 색상 선택기를 제공합니다.
단점
- Rec2020 및 CIE 분야를 결국 추월하게 될 것입니다.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020은 4K 및 8k 미디어에서 사용할 수 있는 다양한 색상을 제공하는 UHDTV (초고화질 텔레비전)로의 움직임입니다. Rec2020은 또 다른 RGB 기반 영역으로 display-p3보다 크지만 Display P3만큼 소비자 사이에서 흔하지는 않습니다.
장점
- 울트라 HD 색상.
단점
- (아직) 소비자는 그렇게 흔하지 않습니다.
- 휴대기기나 태블릿에서는 일반적으로 찾을 수 없습니다.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Adobe 1998 RGB의 약자인 A98 RGB는 CMYK 프린터에서 얻을 수 있는 대부분의 색상을 표현하기 위해 Adobe에서 만들었습니다. sRGB보다 더 많은 색상을 제공하며, 특히 청록색과 녹색을 사용합니다.
장점
- sRGB 및 Display P3 색 공간보다 큽니다.
단점
- 디지털 디자이너가 작업하는 일반적인 공간이 아닙니다.
- CMYK에서 팔레트를 포팅하는 사람은 많지 않습니다.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Kodak에서 만든 이 넓은 색 영역 공간은 매우 넓은 범위의 기본 색상을 고유하게 제공하며 밝기를 변경할 때 색조 변화를 최소화합니다. 또한 1980년 마이클 포인터(Michael Pointer)의 설명대로 실제 표면 색상의 100% 를 커버한다고 주장합니다.
장점
- 밝기를 변경하면 색조가 약간 변합니다.
- 생생한 원색
단점
- 제공되는 색상의 약 13% 는 가상 색상이며 인간의 가시 스펙트럼 내에 있지 않습니다.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
CIE XYZ 색상 공간은 시력이 보통인 사람이 볼 수 있는 모든 색상을 포함합니다. 따라서 다른 색상 공간의 표준 참조로 사용됩니다. Y는 휘도이고, X 및 Z는 지정된 Y 휘도 내에서 가능한 크로마입니다.
d50과 d65의 차이는 화이트 포인트입니다. 여기서 d50은 d50 화이트 포인트를, d65는 d65 화이트 포인트를 사용합니다.
장점
- 선형 광원 액세스는 편리한 사용 사례가 있습니다.
- 물리적 색상 혼합에 적합합니다.
단점
- lch, oklch, lab, oklab과 같이 지각적으로 선형적이지 않습니다.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
맞춤 색상 공간
CSS 색상 5 사양에도 브라우저에 맞춤 색상 공간을 알려주는 경로가 있습니다. 브라우저에 색상 분해 방법을 알려주는 ICC 프로필입니다.
@color-profile --foo {
src: url(path/to/custom.icc);
}
로드가 완료되면 color() 함수를 사용하여 이 맞춤 프로필의 색상에 액세스하고 채널 값을 지정합니다.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
색상 보간 유형
한 색상에서 다른 색상으로 전환하는 것은 애니메이션, 그라데이션 및 색상 혼합에서 찾을 수 있습니다. 이 전환은 일반적으로 시작 색과 끝 색으로 지정되며, 브라우저는 이 두 색 사이를 보간합니다. 이 경우 보간은 즉시 전환 대신 부드러운 전환을 만들기 위해 일련의 사이에 색상을 생성하는 것을 의미합니다.
그라데이션을 사용하면 보간이 도형을 따라 일련의 색상으로 표시됩니다. 애니메이션에서는 시간이 지나면서 일련의 색상이 표시됩니다.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
그라데이션을 사용하면 중간에 있는 색상이 한 번에 모두 표시됩니다.
색상 보간의 새로운 기능
새로운 영역과 색 공간이 추가됨에 따라 보간을 위한 새로운 옵션이 추가되었습니다. in hsl 색상을 파란색에서 흰색으로 전환하면 sRGB와 매우 다른 결과가 됩니다.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Codepen 데모가 보이지 않나요?
그런 다음 한 공간의 색상을 완전히 다른 공간의 색상으로 전환하면 어떻게 되나요?
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Codepen 데모가 보이지 않나요?
다행히 색상 4 사양에는 이러한 교차 색 공간 보간을 처리하는 방법에 관한 안내가 브라우저에 포함되어 있습니다. 위의 .gradient 사례에서 브라우저는 색상 공간 차별화를 감지하고 기본 색 공간 oklab를 사용합니다.
lch가 첫 번째 색상이므로 브라우저에서 lch를 색상 공간으로 사용할 것이라고 생각할 수 있지만 lch는 그렇지 않기 때문에 두 번째 비교 그라데이션 .lch를 표시합니다. .lch 그라데이션은 lch 색 공간의 그라데이션입니다.
16비트 컬러 덕분에 밴딩 감소
이 색상이 작동하기 전에는 빨간색, 녹색, 파란색, 알파와 같은 네 개의 채널을 모두 나타내기 위해 모든 색상이 하나의 32비트 정수에 저장되었습니다. 채널당 8비트이며 가능한 2^ 24가지 색상입니다 (알파 무시). 2 ^ 24 = 16,777,216, '수백만 가지의 색상'
이 색상이 적용된 후 4개의 16비트 부동 소수점 값은 각 채널이 하나로 묶이지 않고 자체 부동 소수점을 가집니다. 이는 총 64비트 데이터이므로 수백만 개가 넘는 색상이 있습니다.
이 작업은 HD 색상을 지원하는 데 필요합니다. 이렇게 하면 저장할 수 있는 색상 정보의 양이 늘어나므로 브라우저에서 그라데이션에 사용할 색상이 더 많아지는 부작용이 발생합니다.
그라데이션 밴딩은 부드러운 그라데이션을 만들기 위한 색상이 충분하지 않고 색상의 '스트립'이 표시되는 경우입니다. 고해상도 색상으로 업그레이드하면 밴딩이 크게 완화됩니다.
보간 제어
두 지점 간의 최단 거리는 항상 직선입니다. 색상 보간을 사용하면 브라우저는 기본적으로 짧은 경로를 사용합니다. HSL 색상 원통에 두 개의 점이 있는 시나리오를 생각해 보세요. 그라데이션은 두 점 사이의 선을 따라 이동하여 색상 단계를 얻습니다.
linear-gradient(to right, #94e99c, #e06242)
색상 중지 지점 사이에 선이 있는 HSL 실린더의 하향식 뷰
위의 그라데이션 선이 색 공간의 중심을 지나 녹색과 붉은 색 사이에서 직선으로 이어집니다. 위의 내용은 초기 이해를 돕는 데 유용하지만 실제로는 그렇지 않습니다. 다음은 다음 Codepen의 그라데이션입니다. 모의 데모에서처럼 중간 부분이 흰색이 아닌 것이 분명합니다.
하지만 그라데이션의 중간 부분은 선명하게 느껴지지 않습니다. 가장 선명한 색상이 보간이 이동한 중앙이 아니라 색상 공간 도형의 가장자리에 있기 때문입니다. 이를 일반적으로 '사각지대'라고 합니다. 이 문제를 해결하거나 해결할 수 있는 몇 가지 방법이 있습니다.
사각지대를 피하기 위해 더 많은 경사 정류장 지정
현재 사각지대를 방지하는 기법은 보간 유형이 색상 공간의 생생한 범위 내에 있도록 의도적으로 인도하는 그라데이션에 색상 중단을 추가하는 것입니다. 추가 경유지가 사각지대를 우회하는 데 도움이 되기 때문에 말 그대로 우회입니다.
에릭 케네디가 만든 그래디언트 도구는 추가 색상 중단을 계산해 주므로 사각지대에 끌리는 색상 공간에서도 사각지대를 피할 수 있습니다. 이를 사용하여 첫 번째 예와 동일한 색상을 전달하되 색상 보간 유형을 HSL로 변경하면 다음과 같이 생성됩니다.
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
9개 색상 경유지를 포함한 곡선이 있는 HSL 실린더의 하향식 뷰
가이드가 있는 경유지를 사용하면 보간이 더 이상 직선이 아닌 사각지대 주변에서 곡선으로 표시되어 채도를 유지하는 데 도움이 되므로 훨씬 더 선명한 그라데이션이 가능합니다.
이 도구는 훌륭한 기능을 제공하지만 CSS에서 바로 이와 비슷하거나 더 높은 수준의 제어 기능을 가질 수 있다면 어떨까요?
색상 보간 유형 방향 지정
Color 4에서는 색조 보간 전략을 제어하는 기능이 추가되었으며, 이는 데드 영역을 우회하는 새로운 방법입니다. 색조 각도를 생각해보고 각도만 변경하는 2스톱 그라데이션(예: 140deg에서 240deg으로 색조 이동)을 생각해 보세요.
짧은 색조와 긴 색조 보간 유형
경사는 longer 경로를 사용하도록 지정하지 않는 한 기본적으로 shorter 경로를 사용합니다. 색조 보간 옵션은 누군가에게 오른쪽이 아닌 왼쪽으로 돌리라고 지시하는 등 각도 회전을 유도합니다.
위의 색상 보간 거리의 시각적 예에서는 차이를 보여주기 위해 짧은 경로와 긴 경로가 시뮬레이션되었습니다. 짧은 거리는 가능한 가장 짧은 거리를 이동하므로 거리 사이의 색조가 적습니다. 장거리가 더 많은 색조를 거치게 됩니다.
색조 보간 증가 및 감소
색상 4에는 색조 보간 전략이 두 가지 더 있지만 원통 색상 공간 전용입니다. 이전 예의 두 가지 색상을 유지하면서 이제 시각적 효과를 통해 증가 및 감소의 원리를 알 수 있습니다.
위의 Codepen은 ColorJS를 사용하여 예상 결과를 보여주었습니다. JavaScript 라이브러리 없이 동일한 효과를 얻기 위해 작성하는 CSS는 다음과 같습니다.
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
색조 보간을 종료하기 위해 2가지 색상 중단 간에 색조를 변경하고 색조 보간 선택의 효과와 색상 공간이 그라데이션 결과를 변경하는 방식을 확인할 수 있는 재미있는 플레이그라운드가 있습니다. 효과는 매우 다를 수 있습니다. 색상 도구 벨트에 추가된 4가지 새로운 기법이라고 생각하면 됩니다.
다양한 색상 공간의 그라데이션
각 색상 공간은 고유한 모양과 색상 배열을 바탕으로 다른 그라데이션을 생성합니다. 특히 '파란색에서 흰색'으로 된 아래 예를 살펴보세요. 각 색공간이 이를 어떻게 다르게 처리하는지 살펴보세요. 몇 개가 중간에 보라색으로 전환되는지 확인하세요. 이를 보간 중 '색조 변화'라고 합니다.
Codepen 데모가 보이지 않나요?
표시된 이미지는 Codepen의 여러 예 중 하나에 불과합니다. Canary 또는 Safari Tech Preview를 사용해 직접 확인해 보는 것도 좋습니다.
이러한 공간의 일부 경사는 다른 경사보다 더 선명하거나 사각지대를 덜 통과합니다.
lab와 같은 공간은 hwb()와 같이 사람이 색을 쓰도록 최적화된 공간과 달리 채도에 최적화된 방식으로 색상을 함께 포함합니다.
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
위 데모는 결과에 미묘하지만 실습과의 일관된 보간을 보여줍니다. 그러나 실습의 문법은 읽기가 간단하지 않습니다. rgb나 hsl에서 나올 때 매우 익숙하지 않은 음수가 있습니다. 좋은 소식입니다. 익숙한 문법에 hwb를 사용할 수 있지만 그라데이션을 oklab과 같은 다른 색상 공간 내에서 완전히 보간하도록 요청합니다.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Codepen 데모가 보이지 않나요?
이 예에서는 hwb에 동일한 색상을 사용하지만 hwb 또는 oklab에 보간할 색상 공간을 지정합니다. hwb는 생동감은 높지만 사각지대 또는 밝은 점 (상단 예에서 청록색 핫스팟 참고)에 적합한 색상 공간으로, 포화 상태를 인지하는 선형 그라데이션에 적합합니다. 이 기능은 몇 가지 다른 색상 공간에서 시도하여 가장 마음에 드는 그라데이션을 확인할 수 있어 매우 재미있습니다.
다음은 그라데이션과 색상 공간을 실험하고 조합 전략을 사용하여 가능성을 탐색하는 Codepen입니다. 검은색에서 흰색으로의 전환도 각 색상 공간에서 다릅니다.
Codepen 데모가 보이지 않나요?
색 영역 고정
색상이 색 영역 밖의 무언가를 요구하는 시나리오가 있습니다. 다음 색상을 고려하세요.
rgb(300 255 255)
rgb 색상 공간에서 색상 채널의 최댓값은 255이지만 여기서는 300가 빨간색에 지정되었습니다. 어떤 일이 일어나나요? 색 영역 고정.
고정은 추가 정보를 단순히 삭제하는 것입니다. 300는 색상 엔진 내부적으로 255가 됩니다. 색상이 해당 공간 내에 고정되었습니다.
색 공간 선택
많은 사람들이 이러한 색상 공간과 그 효과에 대해 알게 된 후 부담을 느끼며 어떤 '색상'을 선택해야 할지 고민합니다. 연구와 경험에 비추어 볼 때 모든 작업에 하나의 색공간이 있는 것 같지는 않습니다. 각각은 원하는 결과를 생성하는 순간이 있습니다.
최적의 공간이 하나 있다면 새로운 스페이스가 많이 소개되지 않을 것입니다.
하지만 CIE 공간(lab, oklab, lch, oklch)이 제 출발점이라고 말할 수 있습니다. 그 결과가 제가 원하는 것이 아니라면
다른 공간을 테스트해볼게요. 색상을 혼합하고 그래디언트를 만들 때는 기본 사양인 oklab에 동의합니다. 색상 시스템과 전체 UI 색상에는 oklch가 좋습니다.
다음은 새로운 색상 공간과 기능을 고려하여 업데이트된 색상 전략을 공유한 몇 가지 도움말입니다. 예를 들어 Andrey Sitnik이
oklch에 집중하여 다음과 같이 하도록 설득할 것입니다.
HD CSS 색상으로 이전
넓은 색 영역 디스플레이를 지원하도록 웹 프로젝트 색상을 업데이트하는 두 가지 기본 전략이 있습니다.
단계적 성능 저하
새로운 색상 공간을 사용하고 브라우저와 운영체제가 디스플레이 기능에 따라 표시할 색상을 파악하도록 합니다.점진적 개선
@supports및@media를 사용하여 사용자 브라우저의 기능을 평가하고 조건이 충족되면 넓은 색 영역을 제공합니다.
브라우저가 display-p3 색상을 이해하지 못하는 경우:
color: red;
color: color(display-p3 1 0 0);
브라우저가 display-p3 색상을 이해하는 경우:
color: red;
color: color(display-p3 1 0 0);
각각에는 장단점이 있습니다. 다음은 장단점을 나열한 예시입니다.
단계적 성능 저하
- 장점
- 가장 간단한 경로입니다.
- 넓어진 색 영역 디스플레이가 아닌 경우 브라우저는 색 영역을 매핑하거나 sRGB로 고정하므로 책임은 브라우저에 있습니다.
- 단점
- 브라우저에서 마음에 들지 않는 색상으로 색 영역 클램프 또는 색 영역을 조정할 수 있습니다.
- 브라우저가 색상 요청을 이해하지 못해 완전히 실패할 수 있습니다. 그러나 색상을 두 번 지정하여 이해한 이전 색상으로 대체하도록 하여 완화할 수 있습니다.
점진적 개선
- 장점
- 관리형 색상 재현으로 더 세밀한 제어가 가능합니다.
- 현재 색상에 영향을 주지 않는 추가 전략
- 단점
- 별도의 색상 문법 두 개를 관리해야 합니다.
- 별도의 색 영역 두 개를 관리해야 합니다.
색 영역 및 색 공간 지원 확인
브라우저에서 CSS 및 JavaScript의 폭넓은 색 영역 기능과 색 구문 지원을 확인할 수 있습니다. 사용자가 가진 정확한 색상 영역은 제공되지 않고 사용자 개인 정보 보호를 유지하기 위해 일반화된 답변이 제공됩니다. 하지만 색 공간은 사용자의 하드웨어 기능(예: gamut)과 관련이 없으므로 정확한 색 공간 지원이 제공됩니다.
색 영역 지원 쿼리
다음 코드 예에서는 디스플레이에서 방문하는 사용자의 색상 범위를 확인합니다.
CSS에서 확인 중
가장 구체적인 지원 문의는 dynamic-range 미디어 쿼리입니다.
@media (dynamic-range: high) {
/* safe to use HD colors */
}
color-gamut 미디어 쿼리로 대략적인 지원 또는 그 이상의 지원을 요청할 수 있습니다.
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
지원 확인을 위한 추가 미디어 쿼리 2개가 있습니다.
JavaScript에서 확인
JavaScript의 경우 window.matchMedia() 함수를 호출하여 평가를 위한 미디어 쿼리를 전달할 수 있습니다.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
위 패턴은 나머지 미디어 쿼리에도 복사할 수 있습니다.
색상 공간 지원 쿼리
다음 코드 예에서는 방문하는 사용자의 브라우저와 작업할 색상 공간 선택을 확인합니다.
CSS에서 확인 중
개별 색상 공간 지원 여부는 @supports 쿼리를 사용하여 문의할 수 있습니다.
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
JavaScript에서 확인
자바스크립트의 경우 CSS.supports() 함수를 호출하고 속성과 값 쌍을 전달하여 브라우저가 이해하는지 확인할 수 있습니다.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
하드웨어 및 파싱 확인 함께 사용하기
각 브라우저에서 새로운 색상 기능을 구현할 때까지 기다리는 동안 하드웨어 기능과 색상 파싱 기능을 모두 확인하는 것이 좋습니다. 다음은 색상을 고화질로 점진적으로 개선할 때 주로 사용합니다.
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome DevTools로 색상 디버깅
Chrome DevTools가 업데이트되었으며 개발자가 HD 색상을 생성, 변환, 디버그하는 데 도움이 되는 새로운 도구가 제공됩니다.
색상 선택 도구 업데이트됨
색상 선택 도구가 이제 새로운 색상 공간을 모두 지원합니다. 작성자가 채널 값과 같은 방식으로 상호작용할 수 있습니다.
영역 경계
색 영역 경계선도 추가되어 srgb와 display-p3 색 영역 사이에 선이 그려졌습니다. 선택한 색상이 속하는 색 영역을 명확히 합니다.
이를 통해 작성자는 HD 색상과 HD가 아닌 색상을 시각적으로 구분할 수 있습니다.
color() 함수와 새 색공간은 HD가 아닌 색과 HD 색을 모두 생성할 수 있기 때문에 특히 유용합니다. 특정 색상이 속한 색 영역을 확인하려면 색상 선택 도구를 팝업으로 표시합니다.
색상 변환
DevTools는 수년 동안 hsl, hwb, rgb, 16진수와 같은 지원되는 형식 간에 색상을 변환할 수 있었습니다. 스타일 창의 정사각형 색상 견본에서 shift + click를 사용하여 이 변환을 실행합니다. 새로운 색상 도구는 전환을 순환할 뿐 아니라 작성자가 원하는 변환을 보고 선택할 수 있는 팝업을 표시합니다.
변환할 때 변환이 공간에 맞게 잘렸는지 아는 것이 중요합니다. 이제 DevTools에 변환된 색상으로 표시되는 경고 아이콘이 이 클리핑을 알립니다.
최근 공지에서 DevTools의 CSS 디버깅 기능에 대해 자세히 알아보세요.
결론
웹의 sRGB 이외의 색상 공간은 초기 단계에 있지만 시간이 지남에 따라 디자이너와 개발자의 사용이 증가할 것으로 예상됩니다. 예를 들어 디자인 시스템을 구축할 때 기초가 되는 색상 공간을 아는 것은 제작자 도구 벨트의 역할을 할 수 있는 강력한 도구입니다. 각 색 공간은 고유한 기능과 CSS 사양에 추가된 이유를 제공합니다. 작은 크기로 시작하여 필요에 따라 추가해도 됩니다.
새로운 컬러 장난감으로 즐겁게 놀아요! 더 활기차고 일관된 조작과 보간이 이루어지며 전반적으로 사용자에게 더욱 다채로운 환경을 제공합니다.
추가 자료
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/