[color-mix()] 기본 색 하나에서 팔레트 전체를 뽑아내는 CSS

한 줄 요약 - 기본 색 하나에 흰색/검정/투명을 섞어(color-mix) 팔레트 전체를 브라우저가 그 자리에서 계산하고, light-dark()로 라이트/다크 색을 한 규칙에 담는 CSS 기법이에요.

이럴 때 필요해요

버튼 하나만 만들어도 기본색, hover색, 눌렀을 때 색, 연한 배경, 테두리 색을 다 정해야 하죠. 보통은 색을 단계별로 손으로 정의하거나(navy-50, navy-100 ...) Sass 같은 전처리기(미리 CSS를 만들어 주는 도구)로 darken/lighten을 돌려요. 그런데 브랜드 색이 바뀌면 그 모든 값을 다시 손봐야 합니다. color-mix()는 기본 색 하나만 바꾸면 나머지가 전부 자동으로 따라오게 해줘요.

어떻게 동작하나

1. 기본 색을 CSS 변수 --base 하나에 담아요. 이 한 곳만 고치면 나머지가 다 따라옵니다.

2. color-mix(in srgb, var(--base) 88%, black) 처럼 기본 색에 검정을 조금 섞으면 살짝 어두운 hover색이, 흰색을 많이 섞으면 연한 배경이, transparent를 섞으면 반투명이 그 자리에서 만들어져요.

3. light-dark(흰색, 어두운색)은 color-scheme가 라이트면 첫 값, 다크면 둘째 값을 자동으로 골라줘서 다크모드용 규칙을 따로 두 번 쓰지 않아도 됩니다.

핵심은 이거예요

색을 여러 벌 손으로 정의하는 게 아니라, 기본 색 하나에서 나머지를 브라우저가 계산하게 맡기는 거예요. --base만 바꾸면 버튼/카드/배지의 모든 톤이 일관되게 한 번에 바뀝니다.

놓치기 쉬운 것

• 인라인 style로는 :hover 색을 줄 수 없어서 hover까지 color-mix()로 바꾸려면 실제 CSS 규칙(클래스)에 넣어야 해요.

• 섞는 색 공간을 정해야 합니다. in srgb는 익숙한 결과를, in oklch는 더 자연스러운 밝기 변화를 줘요. 아주 구형 브라우저는 미지원이니 @supports로 폴백을 두세요.

이런 곳에 써요

• 디자인 시스템의 버튼/배지/알림 색 - 브랜드 색 하나에서 hover/배경/테두리 톤을 자동 생성

• 다크모드 - light-dark()로 라이트/다크 색을 한 규칙에 담아 미디어쿼리 중복 제거