🧪 색상 혼합기
두 색 사이의 혼합색과 7단계 중간색 스펙트럼을 계산합니다.
사용 방법
- 섞을 색 A와 색 B를 선택합니다.
- 혼합 비율 슬라이더를 움직입니다. 50%면 정확히 중간색입니다.
- 혼합 결과 HEX를 복사하거나, 스펙트럼의 중간색을 클릭해 복사합니다.
이럴 때 유용해요
- 브랜드 색 두 개의 중간 톤이 필요할 때
- hover·pressed 상태 색을 배경색과 섞어 자연스럽게 만들 때
- 그라데이션의 특정 지점 색상값을 정확히 알아야 할 때
알아두면 좋은 팁
- 이 도구는 빛(RGB) 기준 혼합입니다. 물감처럼 섞으면 더 어두워지는 감산혼합과는 결과가 다릅니다.
- 어떤 색이든 흰색과 섞으면 파스텔톤, 검정과 섞으면 셰이드가 됩니다. 색 B를 #ffffff나 #000000으로 지정해 보세요.
- CSS를 직접 쓸 수 있다면 color-mix(in srgb, #a 60%, #b) 함수로 같은 계산을 브라우저가 해 줍니다.
자주 묻는 질문
빨강과 파랑을 섞으면 보라가 나오나요?
RGB 혼합에서는 #ff0000과 #0000ff를 50%로 섞으면 #800080(어두운 보라)이 나옵니다. 물감 혼합과 비슷해 보이지만 밝기가 절반으로 떨어지는 점이 다릅니다.
비율 슬라이더는 어느 쪽 기준인가요?
슬라이더 값이 커질수록 색 B의 비중이 커집니다. 0%면 색 A 그대로, 100%면 색 B 그대로, 30%면 A 70% + B 30% 혼합입니다.
물감 섞는 것과 왜 결과가 다른가요?
화면의 색은 빛을 더하는 가산혼합, 물감은 빛을 흡수하는 감산혼합이라 원리가 다릅니다. 예컨대 물감의 노랑+파랑=초록이지만, RGB에서 노랑(#ffff00)+파랑(#0000ff)의 중간은 회색빛(#808080)에 가깝습니다.
세 가지 이상 색도 섞을 수 있나요?
이 도구는 두 색 전용입니다. 세 색을 섞으려면 먼저 두 색을 50%로 섞고, 그 결과와 세 번째 색을 33% 비율로 다시 섞으면 산술적으로 동일한 결과가 됩니다.
