CSS color-mix() 계산기
두 색과 비율, 혼합 색공간을 넣으면 CSS color-mix() 함수의 결과 색을 미리 계산해 코드와 함께 보여줍니다.
색 1
색 2
혼합 결과 미리보기
결과 색
#BA00C2
color-mix(in oklch, #FF0000 50%, #0000FF 50%)지원 색공간은 sRGB · sRGB Linear · HSL · HWB · OKLab · OKLCH 여섯 가지입니다. CIE Lab · LCh · Display P3 등은 아직 지원하지 않습니다. 색공간에 따라 같은 두 색이라도 결과가 크게 달라질 수 있습니다 — 특히 채도가 다른 두 색을 sRGB에서 섞으면 탁해지지만 OKLCH에서 섞으면 채도가 유지됩니다.
사용 방법
- 1섞을 색 2개와 각각의 비율(%)을 입력합니다.
- 2혼합할 색공간(sRGB · OKLCH 등)을 고릅니다. 색상각이 있는 공간은 보간 방향도 고를 수 있습니다.
- 3결과 색과 그대로 붙여 쓸 수 있는 color-mix() 코드가 나옵니다.
자주 묻는 질문
CSS Color Module Level 4에 추가된 함수로, 두 색을 지정한 색공간에서 비율대로 섞어 새 색을 만듭니다. RGB 채널을 그냥 평균 내는 것과 달리 혼합 색공간에 따라 결과가 크게 달라집니다.
sRGB에서 빨강과 파랑을 섞으면 채도가 떨어진 탁한 자주색이 나오지만, OKLCH처럼 사람의 밝기·채도 감각에 맞춘 공간에서 섞으면 채도가 유지된 선명한 보라가 나옵니다. sRGB는 채널을 직선으로 잇기만 해서 눈으로 보는 밝기 변화와 어긋나기 때문입니다.
합이 100%보다 적으면(예: 40%+40%) 두 색은 50:50으로 정규화되지만 결과의 알파(불투명도)가 그 합만큼(0.8배) 낮아집니다. 합이 100%를 넘으면 비율만 줄여 100%로 맞추고 알파는 바뀌지 않습니다.
아니요. 모든 계산은 브라우저에서 이루어지며 입력값은 서버로 전송되지 않습니다.
알아두면 좋은 점
- 지원 색공간은 sRGB · sRGB Linear · HSL · HWB · OKLab · OKLCH 여섯 가지입니다. CIE Lab · LCh · Display P3 등은 아직 지원하지 않습니다.
- 색상각이 있는 공간(HSL·HWB·OKLCH)에서 무채색(흰·회색·검정)을 섞으면 상대 색의 색상각을 그대로 물려받습니다.
- OKLab·OKLCH로 채도가 높은 색을 섞으면 sRGB 화면이 표현할 수 있는 색역을 벗어날 수 있습니다. 이 경우 미리보기는 잘라낸(clip) 값으로 보여줍니다.
함께 보면 좋은 도구
마지막 검증: 2026년 9월 8일 · 결과는 참고용 추정치입니다.