더 많은 색상과 새로운 공간에 액세스하세요.

이 문서는 고화질 CSS 색상 가이드의 일부입니다.

CSS 색상 4는 다양한 CSS 및 색상과 관련된 기능과 도구가 나와 있습니다. 다음 Codepen은 새로운 이전 색상 문법을 함께 사용합니다.

기본 색상 공간 요약 읽어보기

level 4 사양에서는 색을 찾을 수 있는 새로운 색공간을 제공합니다.

• sRGB 선형
• LCH
• okLCH
• LAB
• okLAB
• 디스플레이 P3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ D50
• XYZ D65

새로운 웹 색상 공간 만나보기

다음 색공간은 sRGB보다 큰 색 영역에 액세스할 수 있습니다. 이 display-p3 색공간은 RGB보다 거의 두 배 더 많은 색상을 제공하는 반면 Rec2020은 display-p3보다 거의 두 배 더 많습니다. 정말 다양한 색깔이예요

color() 함수

새로운 color() 드림 함수는 R, G, B로 색상을 지정하는 모든 색상 공간에 사용할 수 있습니다. 있습니다. color()는 먼저 색상 공간 매개변수를 가져온 후 채널 값을 설정할 수 있습니다.

많은 새로운 색상 공간에서는 이 함수를 사용합니다. 왜냐하면 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%처럼 사용됩니다.

장점

• 거의 모든 디스플레이가 이 색상 공간의 범위를 지원합니다.
• 디자인 도구 지원

단점

• 선형으로 인식되지 않음 (예: lch())
• 넓은 색 영역이 없습니다.
• 경사는 종종 사각지대를 통과합니다.

.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);
}

LAB

CIE 색공간에 액세스하기 위해 만들어진 또 다른 색공간은 선형 밝기 (L) 차원 실습의 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);
}

OKLCH

이 색공간은 LCH로 이동합니다. LCH와 마찬가지로 (L)은 계속해서 선형 밝기를 선형으로 표현합니다. 크로마는 H로, 색조는 H로 설정합니다.

이 공간은 이전에 다룬 HSL 또는 LCH입니다. H 색상환에서 각도를 선택하고 밝기 또는 채도 대신 크로마를 얻게 되죠. 밝기와 크로마에 대한 조정은 색이 섞여서 색이 칠해져서 한 쌍으로 되어 있을 수도 있고 그렇지 않을 경우 밝은 톤의 배경에 할 수 있습니다.

장점

• 파란색 및 보라색 색조로 작업할 때 당연한 결과입니다.
• 선형 밝기로 체감되는 밝기입니다.
• 익숙한 채널을 사용합니다.
• 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);
}

OKLAB

이 스페이스는 실험실을 수정합니다. 이미지 처리 품질에도 최적화된 공간으로 알려져 있습니다. CSS에서 us는 그라데이션 및 색상 함수 조작 품질을 의미합니다.

장점

• 애니메이션 및 보간을 위한 기본 공간.
• 선형으로 체감되는 밝기입니다.
• 실험실 같은 색조 변화는 없습니다.
• 일관된 그라데이션

단점

• 새롭고 비교적 해보지 않은 콘텐츠
• 색상 선택 도구가 거의 없습니다.

.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년부터 이어졌습니다. Apple은 또한 2016년부터 CSS를 통해 웹페이지에서 display-p3를 지원했습니다. 2년 이상 앞섰습니다. 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은 UHDTV (초고화질 텔레비전), 4K 및 8K 미디어에서 사용할 수 있는 다양한 색상을 제공합니다. Rec2020은 또 다른 RGB 기반 색 공간으로, display-p3보다 크지만 가장 일반적이지는 않습니다. 디스플레이 P3로 전환할 수 있습니다.

장점

• Ultra 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는 Adobe에서 대부분의 CMYK 프린터에서 얻을 수 있는 색상입니다. 특히 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 년 마이클 포인터에 의해 기록되었습니다.

장점

• 밝기를 변경하면 최소한의 색조가 바뀝니다.
• 선명한 원색입니다.

단점

• 판매하는 색상 중 약 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%));
}

다행히 Color 4 이러한 교차 연결 문제를 처리하는 방법에 대한 선택할 수 있습니다. .gradient의 경우 브라우저는 기본 색상 공간 oklab를 사용합니다.

브라우저가 lch를 색상 공간으로 사용한다고 생각할 수도 있습니다. lch는 아닙니다. 그래서 두 번째 비교 그라데이션을 .lch .lch 그라데이션은 LCH 색상 공간에서의 그라데이션입니다.

16비트 컬러로 인한 밴딩 감소

이 색상이 작동하기 전에는 모든 색상이 하나의 32비트 정수에 저장되어 4개 채널을 모두 나타냅니다. 세 가지 색깔이 있습니다. 이는 초당 8비트입니다. 채널 및 2^ 24개의 가능한 색상 (알파 무시)입니다. 2 ^ 24 = 16,777,216, "수백만 가지 색깔"

이 색상이 적용된 후 네 개의 16비트 부동 소수점 값은 각 채널에 함께 병합되는 것이 아니라 자체 부동 소수점 수입니다. 이것은 총 64비트의 데이터이며, 그 결과 수백만 개의 색상이 생성됩니다.

이 작업은 HD 색상을 지원하는 데 필요합니다. 이렇게 하면 이미지의 정보를 저장할 수 있는데, 이는 데이터 암호화가 브라우저에서 그라데이션에 사용할 색상을 더 많이 추가할 수 있습니다.

그라데이션 밴딩은 부드러운 그라데이션을 만들기에 색상이 충분하지 않은 경우입니다. 및 'strips' 색깔이 보입니다. 디코더로 밴딩을 고해상도 색상으로 업그레이드하세요.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

보간 유형 제어

두 지점 간의 최단 거리는 항상 직선입니다. 색상 포함 보간 유형에서는 기본적으로 짧은 경로를 사용합니다. 시나리오 고려 HSL 색상 원통에 두 개의 점이 있습니다. 경사는 두 지점 사이의 선을 따라 이동하면서 색상 단계를 처리합니다.

linear-gradient(to right, #94e99c, #e06242)

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">

위의 그라데이션 선이 녹색과 붉은색 사이를 직선으로 지나갑니다. 색상 공간의 중심을 통과합니다. 위에서 설명한 내용은 그것이 정확히 발생하는 것은 아닙니다. 여기에서 그라데이션을 입고 있고, 가운데 부분이 흰색이 아닌 보여드렸습니다

하지만 그라데이션의 중간 영역은 생동감을 잃었습니다. 이는 가장 선명한 색깔은 색 공간 셰이프의 가장자리에 있고 보간된 지점의 중심을 추정합니다. 이를 일반적으로 '사각 지대'라는 텍스트입니다. 거기 이 문제를 해결하거나 해결할 수 있는 몇 가지 방법이 있습니다.

사각지대를 피하기 위해 더 많은 그라데이션 정류장을 지정

오늘날 사각지대를 피하는 한 가지 기법은 보간을 의도적으로 안내하는 그라데이션이 색 공간의 생생한 범위를 보여줍니다. 말 그대로 우회적이라는 말처럼 사각지대를 우회하는 데 도움이 됩니다.

추가 색상을 계산하는 에릭 케네디가 만든 그라데이션 도구가 있습니다. 색상 공간에서도 사각지대를 피할 수 있도록 끌어당기는 것이 중요합니다. 이를 사용하여 첫 번째 예의 색상과 동일한 색상을 전달합니다. 색상 보간을 HSL로 변경하면 다음과 같은 결과가 생성됩니다.

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">

안내된 중지점을 사용하면 보간은 더 이상 직선이 아니지만 사각지대를 중심으로 곡선을 그리면서 포화를 유지하는 데 도움이 되고, 훨씬 더 선명한 그라데이션이 되죠.

이 도구가 훌륭하기는 하지만, 유사하거나 더 큰 검색어를 사용할 수 있다면 어떨까요? 제어할 수 있을까요?

색상 보간 유형 지정

색상 4에서 색조 보간 전략을 제어하는 기능 이 추가되었으며 사각지대를 우회하는 새로운 방식 (:wink:)입니다. 색조에 대해 생각하기 2개의 정지 그라데이션을 고려하여 각도만 변경하여 색조가 변하는 경우를 고려해 보세요. 예를 들어 140deg에서 240deg로 변경할 수 있습니다.

짧은 색조와 긴 색조 보간 유형

그라데이션은 기본적으로 shorter 다음을 제외하고는 라우팅할 수 없습니다. 인코더-디코더가 가져온 longer 노선. 색조 보간 옵션은 사용자가 각도를 회전하도록 지시하는 것과 같이 오른쪽이 아닌 왼쪽이 표시됩니다.

색조 보간 거리의 예에서는 짧은 경로와 차이를 설명하기 위해 긴 경로가 시뮬레이션됩니다. 짧은 거리는 색깔이 옅은 색으로 바뀌었습니다. 빛을 발산할 수 있습니다.

색조 보간 증가 및 감소

색상 4에는 두 가지 색조 보간 전략이 더 있지만 원통형에만 사용됩니다. 살펴보겠습니다. 이전 예의 두 가지 색상을 유지하면서 증감이 어떻게 작동하는지 보여드리겠습니다.

위의 Codepen은 ColorJS를 사용하여 표시됩니다. 별도의 코드 없이 동일한 효과를 얻기 위해 작성하는 CSS는 JavaScript 라이브러리는 다음과 같습니다.

.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가지 색상 중지 사이에서 색조를 조정하는 것과 같이, 색조 보간 선택의 효과를 색상 공간이 그라데이션 결과를 어떻게 변경하는지 잘 보여줍니다. 그 효과는 different; 네 가지 새로운 기법이 색상 도구 벨트에 들어왔다고 생각해 보세요.

다양한 색상 공간의 그라데이션

각 색상 공간은 고유한 모양과 색상 배열을 고려할 때 사용합니다. 다음 예에서 각 색상 공간이 특히 파란색과 흰색에서 다르게 처리합니다. 얼마나 많은 사람들이 가운데가 보라색으로 변합니다. 색조 변경이라고 합니다.

이 공간의 일부 경사는 다른 공간보다 더 선명하거나 이동 거리가 적습니다. 사각지대를 통과할 수 있습니다. 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));
}

위의 데모는 미묘한 결과를 보여주지만 보다 일관된 모습을 보여줍니다. 보간 유형입니다. 실습의 문법은 읽기 쉽지 않지만 사용할 수 없습니다. 좋음 익숙한 구문에 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은 높은 해상도에 적합한 색상 공간입니다. 흐릿하게 보이지만 사각 지대나 밝은 지점이 있을 수 있습니다. 위 예). oklab은 선형으로 된 인식이 그대로 유지되는 그래디언트에 강렬하게 만들 수 있습니다. 이 기능은 몇 가지 다른 색상을 사용해 볼 수 있어 매우 재미있습니다. 가장 좋아하는 그라데이션을 확인할 수 있습니다.

이것은 그라데이션과 색상 공간을 실험하는 Codepen으로 가능성을 탐색해 보세요 검은색에서 전환해도 각 색상 공간에서 다릅니다.

색 영역 고정

색상이 색 영역 밖의 무언가를 요구할 수 있는 시나리오가 있습니다. 다음 색상을 고려하세요.

rgb(300 255 255)

rgb 색상 공간에서 색상 채널의 최댓값은 255이지만 다음과 같습니다. 빨간색으로 300가 지정되었습니다. 어떤 일이 일어나나요? 색 영역 고정.

고정은 추가 정보를 단순히 제거하는 것입니다. 300이(가) 255(으)로 변경됨 색상 엔진에 내부적으로 전달됩니다. 이제 색상이 공간 내에 고정되었습니다.

색상 공간 선택

많은 사람들이 이러한 색상 공간과 그 효과에 대해 알게 된 후 부담스러워하면서 어떤 '고객'이 선택할 수 있습니다. 내 연구와 하나의 색상 공간이 모든 작업의 단일 색상 공간이라고 볼 수는 없습니다. 각 원하는 결과를 도출하는 순간이 있습니다

가장 좋은 스페이스가 하나라면 새로운 스페이스가 그렇게 많지 않을 것입니다. 도입됩니다

하지만 CIE 스페이스(lab, oklab, lch, oklch)는 시작할 수 있습니다. 만약 내가 원하는 결과가 아니라면 다른 공간을 테스트합니다. 색상을 혼합하고 그라데이션을 만드는 것에 대해서는 oklab의 기본 사양 선택 항목입니다. 색상 시스템과 전체 UI 색상의 경우 oklch

업데이트된 색상과 관련해 사람들이 공유한 몇 가지 기사를 확인해 보세요. 몇 가지 전략을 소개합니다. 예: Andrey Sitnik oklch에 모두 사용한 경우 다음과 같이 하도록 설득할 수도 있습니다.

1. CSS의 OKLCH: Google이 RGB 및 HSL에서 이전한 이유 안드레이 시트니크
2. 색상 형식 작성자: Josh W. Comeau
3. OK, OKLCH 크리스 코이어

다음 단계

이제 새로운 색상 공간과 도구에 익숙해졌으므로 HD 컬러로 이전할 수 있습니다.

보다 생동감 있고, 일관된 조작 및 보간을 통해 전반적으로 사용자에게 더 다채로운 환경을 제공할 수 있습니다.

색상 리소스 자세히 알아보기 를 참조하세요.