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진수 색상을 기반으로 밝은 테마와 어두운 테마를 만듭니다. 밝은 테마는 진한 파란색 텍스트 색상 2개와 매우 밝은 흰색 배경 표면 색상을 만듭니다. 그런 다음 어두운 환경설정 미디어 쿼리에서 맞춤 속성에 새 색상이 할당되므로 배경이 어둡고 텍스트 색상이 밝아집니다.
: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()를 효과적으로 지원합니다. 또한 구문을 인식하고 강조 표시하고 Styles 창의 스타일 바로 옆에 믹스 미리보기를 만들고, 대체 색상을 선택할 수 있게 해줍니다.
DevTools에 다음과 같이 표시됩니다.
모두 잘 어울리시네요.