🎨
color-mix()
두 색상을 비율로 혼합하여 동적 색상 생성
디자인 시스템에서 메인 컬러의 다양한 변형(hover 상태, disabled 상태 등)을 만들 때 각각의 색상 값을 수동으로 지정하는 것은 번거롭습니다. color-mix(in srgb, color1, color2 percentage)를 사용하면 두 색상을 원하는 비율로 혼합한 새 색상을 CSS에서 직접 생성할 수 있습니다.
CSS 커스텀 프로퍼티와 결합하면 하나의 브랜드 컬러에서 전체 색상 시스템을 동적으로 파생시킬 수 있습니다.
적용 방법
1
color-mix(in srgb, color1, color2 percentage) 형태로 작성한다
2
CSS 커스텀 프로퍼티에 기본 색상을 정의한다
3
hover, active, disabled 상태별 색상을 color-mix로 파생한다
4
다양한 색상 공간(srgb, oklch 등)을 실험하여 최적의 혼합 결과를 찾는다
장점
- ✓ 하나의 기본 색상에서 다양한 변형을 동적으로 생성할 수 있다
- ✓ opacity와 달리 배경과의 혼합 없이 정확한 색상을 얻을 수 있다
단점
- ✗ 혼합 결과가 색상 공간에 따라 달라 예측이 어려울 수 있다
- ✗ 디자인 도구(Figma 등)의 색상과 정확히 일치하지 않을 수 있다
사용 사례
브랜드 컬러 하나로 전체 UI 색상 팔레트 자동 생성
투명도 대신 color-mix로 배경색과 자연스러운 블렌딩 구현