CSS color-mix() 함수

정의와 사용법

CSS의 color-mix() 지정된 색 공간에서 지정된 비율로 두 색상 값을 혼합하는 함수입니다.

예시

예제 1

hsl 색상 공간에서 지정된 비율로 두 가지 색상 값을 혼합합니다:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

직접 시도해 보세요

예제 2

oklab 색상 공간에서 다른 비율로 두 가지 색상 값을 혼합합니다:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

직접 시도해 보세요

CSS 문법

color-mix(color-interpolation-method, color1 %, color2 %)
값 설명
color-interpolation-method

필수입니다. 사용할 색상 인터폴레이션 방법을 정의합니다.

색상 공간 이름을 따르는 키워드 in으로 구성됩니다.

다음 두 가지 유형이 사용 가능합니다:

사각형 색상 공간:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

사각형 색상 공간:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

필수입니다. 색상을 혼합할 색상 값, 그리고 선택적인百分比值(0%에서 100%까지), 색상 비율을 지정하는 데 사용됩니다.

기본百分比为 50%입니다.
color2 %

필수입니다. 색상을 혼합할 색상 값, 그리고 선택적인百分比值(0%에서 100%까지), 색상 비율을 지정하는 데 사용됩니다.

기본百分比为 50%입니다.

기술 세부 사항

버전： CSS Color Module Level 5

브라우저 지원

표에서의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox 사파리 오페라
111 111 113 16.2 97

관련 페이지

참조:CSS 색상