CSS color-mix(). 두 색 보간. 2024+ 모던 디자인.
🎨 색 공간별 보간 비교
📐 단일 결과 (선택한 색 공간)

사용법

  1. 두 색 선택
  2. 비율 조정 (0%=색1, 100%=색2)
  3. 색 공간 비교 (5가지)
  4. CSS 복사 → 모던 브라우저에서 작동

주요 기능

  • 5가지 색 공간 (srgb·oklch·lab·hsl·lch)
  • 실시간 보간 + 색 비교
  • 각 색공간별 결과 시각화
  • CSS color-mix() 코드 생성
  • Hex 값 표시

활용 예시

  • UI 상태 색 — base + danger 30% (warning)
  • 호버 상태 — base + black 10% (어둡게)
  • 그라데이션 중간색 — A↔B 사이 자동 계산
  • 다크모드 변환 — light + #000 mixing
  • 브랜드 변형 — 메인 + 보조 자동 조합

color-mix()란?

2023년 표준화된 CSS Color Module Level 5 함수. color-mix(in oklch, #ec4899 50%, #06b6d4) 형식으로 두 색을 비율로 보간. 핵심은 색 공간 선택:

  • srgb: 전통 RGB. 빠르지만 어두워질 수 있음
  • oklch ⭐ 추천: 사람 눈에 자연스러운 보간 (2024+ 트렌드)
  • lab: 과학적, 인지 균등
  • hsl: 채도 보존

자주 묻는 질문

브라우저 지원?

Chrome 111+, Firefox 113+, Safari 16.2+ (2023+). 2026년 대부분 지원.

왜 색 공간이 중요?

srgb는 회색을 거치며 탁해질 수 있음. oklch는 사람이 보는 대로 자연스럽게 보간.

Tailwind에서?

Tailwind 4부터 color-mix 지원. 또는 arbitrary value `[color:color-mix(...)]`.

무료?

네.