CSS color-mix() — 디자인 토큰을 동적으로 섞는 표준 함수

디자인 토큰을 정의해 두고도 "이 색의 60% + 흰색 40%" 같은 변형이 필요할 때, 예전에는 SCSS의 mix()나 별도 변수를 만드는 방법밖에 없었습니다. CSS color-mix()는 이 작업을 표준 CSS만으로 해결합니다. 토큰을 늘리지 않아도 hover, disabled, 반투명 같은 변형을 표현할 수 있습니다.

1. 기본 문법

1.card {
2  background: color-mix(in srgb, #8b5cf6 20%, transparent);
3  /* accent의 20% + 투명 80% = 반투명 accent */
4}

in <color-space> 다음에 비율을 가진 두 색을 넣습니다. srgb, oklch, hsl 등 어떤 색공간에서 섞을지 지정합니다. oklch가 시각적으로 가장 자연스러운 결과를 줍니다.

2. 토큰과 함께 — hover / disabled

CSS 변수를 함께 쓰면 진짜 위력이 나옵니다.

1:root {
2  --accent: #8b5cf6;
3  --bg: #0a0a0f;
4}
5
6.btn {
7  background: var(--accent);
8  color: white;
9}
10.btn:hover {
11  /* accent를 살짝 밝게 */
12  background: color-mix(in oklch, var(--accent) 88%, white);
13}
14.btn:disabled {
15  /* accent를 배경에 섞어 흐리게 */
16  background: color-mix(in oklch, var(--accent) 40%, var(--bg));
17  color: color-mix(in oklch, white 50%, var(--bg));
18}

--accent-hover, --accent-disabled 같은 토큰을 만들 필요가 없습니다.

3. accent-soft 패턴

블로그/대시보드에서 자주 쓰는 "버튼 hover 시 살짝 보이는 accent 배경" — 이걸 토큰 없이 만들 수 있습니다.

1.menu-item:hover {
2  background: color-mix(in srgb, var(--accent) 12%, transparent);
3}

기존 --accent-soft: rgba(139,92,246,.12)를 두지 않아도 됩니다. accent 토큰만 바꾸면 hover 색도 자동으로 따라갑니다.

4. 다크/라이트 변형

light-dark()와 조합하면 한 줄로 두 모드 모두 처리됩니다.

1.card {
2  background: color-mix(
3    in oklch,
4    light-dark(white, #131824) 100%,
5    transparent
6  );
7}

light-dark()는 별도 글에서 다루지만, color-mix()와 자주 같이 쓰입니다.

5. 주의할 점

• 색공간 선택이 결과를 크게 바꿉니다. in srgb는 빠르지만 보라+노랑 같은 보색을 섞으면 칙칙해집니다. oklch가 가장 자연스럽습니다.
• 비율 합이 100%가 안 되면 자동 정규화되지만, 의도와 다를 수 있으니 명시적으로 적습니다.
• 브라우저 지원: 모든 모던 브라우저 OK. Safari 16.2+, Chrome 111+, Firefox 113+. 구형 브라우저용 fallback은 단순 var(--accent-soft) 같은 정적 색.

1.menu-item:hover {
2  background: rgba(139, 92, 246, 0.12); /* fallback */
3  background: color-mix(in srgb, var(--accent) 12%, transparent);
4}

6. 정리

사용처	패턴
hover 살짝 밝게	color-mix(in oklch, accent 88%, white)
disabled 흐리게	color-mix(in oklch, accent 40%, bg)
accent 반투명 배경	color-mix(in srgb, accent 12%, transparent)
보색 섞기	oklch 권장

토큰 1개로 hover/active/disabled/soft까지 자동으로 얻어집니다. 디자인 시스템이 단순해지고, accent를 바꾸면 모든 변형이 함께 바뀝니다.

참고: MDN — color-mix() / Web.dev color-mix 가이드.