이 문서는 고화질 CSS 색상 가이드의 일부입니다.
CSS 색상 4에서는 CSS 및 색상을 위한 여러 가지 새로운 기능과 도구를 간략하게 설명합니다. 다음 Codepen은 모든 신규 및 이전 색상 구문을 함께 보여줍니다.
레벨 4 사양에서는 이전에 공유한 7가지 새로운 영역 중 색상을 찾기 위한 12가지 새로운 색상 공간을 도입했습니다.
새로운 웹 색상 공간 만나보기
다음 색공간을 사용하면 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 {#linear-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
LCH는 RGB 색 공간 밖의 색상에 액세스하는 문법을 도입합니다. 또한 디스플레이의 색 영역을 벗어난 색상을 매우 쉽게 만들 수 있는 최초의 도구이기도 합니다. 이는 모든 CIE 공간 색상(lch, oklch, lab, oklab)이 사람이 볼 수 있는 전체 색상 스펙트럼을 나타낼 수 있기 때문입니다.
이 색상 공간은 사람의 시각을 따라 모델링되며 이러한 색상 등을 지정하는 문법을 제공합니다. LCH 채널은 밝기, 크로마 및 색조입니다. HSL 및 HWB에서처럼 색조는 각도입니다. 밝기는 0~100 사이의 값입니다. 인간을 중심으로 하는 특별한 '지각 선형' 밝기입니다. 크로마는 채도와 비슷합니다. 범위는 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 {#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년 마이클 포인터가 기술한 실제 표면 색상의 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 화이트 포인트를 사용합니다.
핵심 용어: 화이트 포인트는 색상 공간의 속성으로, 공간 내에 진한 흰색이 존재하는 위치입니다. 전자 화면의 경우 D65가 가장 일반적인 화이트 포인트이며 6500켈빈의 줄임말입니다. 색상 변환에서는 흰색 점이 일치하므로 색상 온도 (따뜻함 또는 차가움)가 영향을 받지 않는 것이 중요합니다.
장점
- 선형 광원 액세스는 편리한 사용 사례가 있습니다.
- 물리적 색상 혼합에 적합합니다.
단점
- 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);
}
그런 다음 한 공간의 색상을 완전히 다른 공간의 색상으로 전환하면 어떻게 되나요?
.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%));
}
다행히 색상 4 사양에는 이러한 교차 색 공간 보간을 처리하는 방법에 관한 안내가 브라우저에 포함되어 있습니다. .gradient의 경우 브라우저가 색공간의 차이를 감지하고 기본 색공간 oklab을 사용합니다.
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가지 새로운 기법이라고 생각하면 됩니다.
다양한 색상 공간의 그라데이션
각 색상 공간은 고유한 모양과 색상 정렬을 고려하여 서로 다른 그라데이션을 생성합니다. 다음 예에서는 각 색상 공간이 특히 파란색에서 흰색으로 어떻게 다르게 처리되는지 살펴보겠습니다. 몇 개가 중간에 보라색으로 바뀌는지 확인하세요. 이를 보간 중 색조 변화라고 합니다.
이러한 공간의 일부 경사는 다른 경사보다 더 선명하거나 사각지대를 덜 통과합니다.
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%));
}
이 예에서는 hwb에 동일한 색상을 사용하지만 hwb 또는 oklab에 보간할 색상 공간을 지정합니다. hwb는 생동감은 높지만 사각지대 또는 밝은 점 (상단 예에서 청록색 핫스팟 참고)에 적합한 색상 공간으로, 포화 상태를 인지하는 선형 그라데이션에 적합합니다. 이 기능은 몇 가지 다른 색상 공간에서 시도하여 가장 마음에 드는 그라데이션을 확인할 수 있어 매우 재미있습니다.
다음은 그라데이션과 색상 공간을 실험하고 조합 전략을 사용하여 가능성을 탐색하는 Codepen입니다. 검은색에서 흰색으로의 전환도 각 색상 공간에서 다릅니다.
색 영역 고정
색상이 색 영역 밖의 무언가를 요구하는 시나리오가 있습니다. 다음 색상을 고려하세요.
rgb(300 255 255)
rgb 색상 공간에서 색상 채널의 최댓값은 255이지만 여기서는 300가 빨간색에 지정되었습니다. 어떤 일이 일어나나요? 색 영역 고정.
고정은 추가 정보를 단순히 삭제하는 것입니다. 300는 색상 엔진 내부적으로 255가 됩니다. 색상이 해당 공간 내에 고정되었습니다.
색 공간 선택
많은 사람들이 이러한 색상 공간과 그 효과에 대해 알게 된 후 부담을 느끼며 어떤 '색상'을 선택해야 할지 고민합니다. 연구와 경험에 비추어 볼 때 모든 작업에 하나의 색공간이 있는 것 같지는 않습니다. 각각은 원하는 결과를 생성하는 순간이 있습니다.
최적의 공간이 하나 있다면 새로운 스페이스가 많이 소개되지 않을 것입니다.
하지만 CIE 공간(lab, oklab, lch, oklch)이 제 출발점이라고 말할 수 있습니다. 그 결과가 제가 원하는 것이 아니라면
다른 공간을 테스트해볼게요. 색상을 혼합하고 그래디언트를 만들 때는 기본 사양인 oklab에 동의합니다. 색상 시스템과 전체 UI 색상에는 oklch가 좋습니다.
다음은 새로운 색상 공간과 기능을 고려하여 업데이트된 색상 전략을 공유한 몇 가지 도움말입니다. 예를 들어 Andrey Sitnik이
oklch에 집중하여 다음과 같이 하도록 설득할 것입니다.
다음 단계
이제 새로운 색상 공간과 도구에 익숙해졌으므로 HD 색상으로 이전할 수 있습니다.
더 활기차고 일관된 조작과 보간이 가능하며 전반적으로 사용자에게 더욱 다채로운 환경을 제공합니다.
가이드에서 색상 리소스에 관해 자세히 알아보세요.