CSS color-mix()

Adam Argyle

CSS color-mix() 함수를 사용하면 지원되는 색상 공간에서 CSS를 통해 바로 색상을 혼합할 수 있습니다.

color-mix() 이전에는 색상을 어둡게 하거나 밝게 하거나 채도를 낮추기 위해 개발자가 CSS 전처리기 또는 calc() 색상 채널에서 사용했습니다.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass는 색상 CSS 사양을 앞서 나가기 위해 많은 노력을 기울였습니다. 그러나 CSS에서 색상을 혼합하는 실제 방법은 없었습니다. 색상을 혼합하려면 부분 색상 값을 계산해야 합니다. 다음은 CSS가 오늘날 혼합을 시뮬레이션하는 방법을 보여주는 축소된 예입니다.

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() 는 CSS에 색상을 혼합하는 기능을 제공합니다. 개발자는 혼합할 색상 공간과 혼합에서 각 색상이 얼마나 지배적이어야 하는지 선택할 수 있습니다.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

이것이 바로 우리가 원하는 것입니다. 유연성, 성능, 모든 기능을 갖춘 API. 정말 멋지네요.

CSS에서 색상 혼합

CSS는 여러 색상 공간과 색 영역에 존재하며, 이로 인해 혼합할 색상 공간을 지정하는 것은 선택사항이 아닙니다. 또한 색상 공간에 따라 혼합 결과가 크게 달라질 수 있으므로 색상 공간의 효과를 알면 필요한 결과를 얻는 데 도움이 됩니다.

대화형 소개를 보려면 이 color-mix() 도구를 사용해 보세요. - 각 색상 공간의 효과를 살펴봅니다. - 원통형 색상 공간 (lch, oklch, hsl, hwb)에서 혼합할 때 색조 보간의 효과를 살펴봅니다. - 상단의 두 색상 상자 중 하나를 클릭하여 혼합할 색상을 변경합니다. - 슬라이더를 사용하여 혼합 비율을 변경합니다. - 하단에서 생성된 color-mix() CSS 코드를 확인할 수 있습니다.

다양한 색상 공간에서 혼합

혼합 (및 그라데이션)의 기본 색상 공간은 oklab입니다. 일관된 결과를 제공합니다. 혼합을 필요에 맞게 조정하기 위해 대체 색상 공간을 지정할 수도 있습니다.

예를 들어 black과 white를 사용해 보겠습니다. 혼합할 색상 공간은 큰 차이를 만들지 않겠죠? 아닙니다.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

큰 영향을 미칩니다.

다른 예로 blue와 white를 사용해 보겠습니다. 색상 공간의 모양이 결과에 영향을 미칠 수 있는 경우이므로 특별히 이 색상을 선택했습니다. 이 경우 대부분의 색상 공간은 흰색에서 파란색으로 이동하는 동안 보라색으로 변합니다. 또한 oklab이 혼합에 매우 안정적인 색상 공간인 이유도 보여줍니다. 흰색과 파란색을 혼합할 때 대부분의 사람들이 기대하는 결과 (보라색 없음)에 가장 가깝습니다.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

color-mix()를 사용하여 색상 공간의 효과를 학습하는 것은 그라데이션을 만드는 데도 유용한 지식입니다. 색상 4 구문을 사용하면 그라데이션이 색상 공간을 지정할 수도 있습니다. 여기서 그라데이션은 공간 영역에서 혼합을 보여줍니다.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

어떤 색상 공간이 '최고'인지 궁금하다면 '최고'는 없습니다. 그래서 옵션이 많은 것입니다. 또한 '최고'가 있다면 새로운 색상 공간이 발명되지도 않을 것입니다 (oklch 및 oklab 참고). 각 색상 공간은 고유한 순간을 빛내고 올바른 선택이 될 수 있습니다.

예를 들어 생생한 혼합 결과를 원한다면 hsl 또는 hwb를 사용하세요. 다음 데모에서는 두 가지 생생한 색상 (자홍색과 라임색)이 혼합되어 hsl과 hwb 모두 생생한 결과를 생성하는 반면 srgb와 oklab은 채도가 낮은 색상을 생성합니다.

일관성과 미묘함을 원한다면 oklab을 사용하세요. 파란색과 검은색을 혼합하는 다음 데모에서 hsl과 hwb는 지나치게 생생하고 색조가 이동된 색상을 생성하는 반면 srgb와 oklab은 더 어두운 파란색을 생성합니다.

color-mix() 놀이터에서 5분 동안 다양한 색상 과 공간을 테스트하면 각 공간의 장점을 파악할 수 있습니다. 또한 사용자 인터페이스에서 색상 공간의 잠재력에 모두 적응함에 따라 색상 공간에 관한 추가 안내가 제공될 것으로 예상됩니다.

색조 보간 방법 조정

원통형 색상 공간(기본적으로 각도를 허용하는 h 색조 채널이 있는 색상 공간)에서 혼합하도록 선택한 경우 보간이 shorter, longer, decreasing, increasing으로 이동하는지 지정할 수 있습니다. 자세한 내용은 이 HD 색상 가이드에서 잘 설명되어 있습니다.

다음은 동일한 파란색에서 흰색으로 혼합하는 예이지만 이번에는 색조 보간 방법이 다른 원통형 공간에만 있습니다.

다음은 색조 보간을 시각화하는 데 도움이 되도록 만든 또 다른 Codepen이지만 특히 그라데이션에 관한 것입니다. 색조 보간이 지정된 경우 각 색상 공간이 혼합 결과를 생성하는 방법을 이해하는 데 도움이 될 것이라고 생각합니다. 한번 살펴보세요.

다양한 색상 구문으로 혼합

지금까지는 blue 및 white와 같은 CSS 이름 지정 색상을 주로 혼합했습니다. CSS 색상 혼합은 두 가지 다른 색상 공간의 색상을 혼합할 준비가 되었습니다. 이는 혼합할 색상 공간을 지정하는 것이 중요한 또 다른 이유입니다. 두 색상이 동일한 공간에 없는 경우 공통 공간을 설정하기 때문입니다.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

이전 예에서는 hsl 및 display-p3이 oklch로 변환된 후 혼합됩니다. 매우 멋지고 유연합니다.

혼합 비율 조정

지금까지 대부분의 예에서 보여준 것처럼 혼합할 때마다 각 색상의 동일한 부분을 원하는 것은 아닐 것입니다. 좋은 소식은 결과 혼합에서 각 색상이 얼마나 표시되어야 하는지 명확하게 설명하는 구문이 있다는 것입니다.

이 주제를 시작하기 위해 모두 동일한 혼합 샘플 (사양에서 가져옴)을 소개합니다.

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

이러한 예는 엣지 케이스를 잘 보여줍니다. 첫 번째 예시 세트는 50% 가 필수는 아니지만 선택적으로 지정할 수 있음을 보여줍니다. 마지막 예는 비율을 합산했을 때 100% 를 초과하는 흥미로운 경우를 보여줍니다. 비율은 모두 100%로 동일하게 고정됩니다.

또한 한 색상만 비율을 지정하는 경우 다른 색상은 100%에서 남은 것으로 간주됩니다. 이 동작을 설명하는 데 도움이 되는 몇 가지 예를 더 소개합니다.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

이러한 예는 두 가지 규칙을 보여줍니다. 1. 비율이 100%를 초과하면 고정되고 동일하게 분배됩니다. 1. 비율이 하나만 제공되는 경우 다른 색상은 100에서 해당 비율을 뺀 값으로 설정됩니다.

마지막 규칙은 약간 덜 명확합니다. 두 색상 모두에 백분율이 제공되고 합산해도 100%가 되지 않으면 어떻게 될까요?

color-mix(in lch, purple 20%, plum 20%)

color-mix()의 이 조합은 투명도(40% 투명도)를 생성합니다. 비율을 합산해도 100%가 되지 않으면 결과 혼합이 불투명하지 않습니다. 두 색상 모두 완전히 혼합되지 않습니다.

color-mix() 중첩

모든 CSS와 마찬가지로 중첩은 예상대로 잘 처리됩니다. 내부 함수가 먼저 확인되고 값을 상위 컨텍스트에 반환합니다.

color-mix(in lch, purple 40%, color-mix(plum, white))

원하는 결과를 얻기 위해 필요한 만큼 자유롭게 중첩하세요.

밝은 색 구성표와 어두운 색 구성표 빌드

color-mix()를 사용하여 색 구성표를 빌드해 보겠습니다.

기본 색 구성표

다음 CSS에서는 브랜드 16진수 색상을 기반으로 밝은 테마와 어두운 테마가 생성됩니다. 밝은 테마는 두 가지 진한 파란색 텍스트 색상과 매우 밝은 흰색 배경 표면 색상을 만듭니다. 그런 다음 어두운 환경설정 미디어 쿼리에서 맞춤 속성에 새 색상이 할당되어 배경이 어둡고 텍스트 색상이 밝아집니다.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

이 모든 것은 브랜드 색상에 흰색 또는 검은색을 혼합하여 이루어집니다.

중간 색 구성표

밝은 테마와 어두운 테마를 추가하여 한 단계 더 나아갈 수 있습니다. 다음 데모에서는 라디오 그룹을 변경하면 HTML 태그 [color-scheme="auto"]의 속성이 업데이트되어 선택기가 색상 테마를 조건부로 적용할 수 있습니다.

이 중간 데모에서는 모든 테마 색상이 :root에 나열되는 색상 테마 지정 기법도 보여줍니다. 이렇게 하면 모든 테마 색상을 한 번에 쉽게 확인하고 필요한 경우 조정할 수 있습니다. 나중에 스타일시트에서 변수를 정의된 대로 사용할 수 있습니다. 이렇게 하면 색상 조작을 위해 스타일시트를 검색할 필요가 없습니다. 모든 색상 조작이 초기 :root 블록에 포함되어 있기 때문입니다.

더 흥미로운 사용 사례

Ana Tudor는 학습을 위한 몇 가지 사용 사례 가 포함된 멋진 데모를 제공합니다.

DevTools로 color-mix() 디버깅

Chrome DevTools는 color-mix()를 잘 지원합니다. 구문을 인식하고 강조표시하며, 스타일 창의 스타일 바로 옆에 혼합 미리보기를 만들고 대체 색상을 선택할 수 있습니다.

DevTools에서 다음과 같이 표시됩니다.

모두 즐거운 혼합을 하세요.