색상 믹서

이 도구 소개

색상 믹서는 두 개의 16진수 색상을 RGB 공간에서 혼합하여 0~100% 사이 어느 비율에서나 매끄러운 혼합을 생성합니다. 그라디언트 스케일은 두 색상 간에 7개의 균등한 단계를 보여줍니다.

RGB 혼합은 브라우저가 색상을 합성할 때 수행하는 것과 동일한 작업으로 수학적으로 정확합니다. 50%의 혼합 색상은 RGB 공간에서 두 색상의 정확한 중간점입니다.

사용 방법

1. 색상 선택기를 사용하거나 16진수 코드를 직접 입력하여 두 색상을 선택합니다.
2. 프리셋 버튼으로 클래식 색상 조합을 시도해 보세요.
3. 비율 슬라이더를 드래그하여 혼합을 조정합니다. 0%는 색상 1, 100%는 색상 2입니다.
4. 그라디언트 스워치를 클릭하거나 HEX 복사 버튼으로 색상을 복사하세요.

활용 사례

UI 디자이너는 브랜드 색상과 흰색·검은색을 혼합하여 호버, 활성, 비활성 상태 색상을 만듭니다. 모션 디자이너는 키프레임 애니메이션의 중간 색상을 선택합니다. 프론트엔드 개발자는 그래픽 편집기 없이 그라디언트 중간점을 생성합니다.

자주 묻는 질문

• CSS 그라디언트와 동일한가요? — 네. CSS linear-gradient도 기본적으로 sRGB에서 혼합합니다. 여기 단계들은 CSS 그라디언트가 통과하는 중간 지점과 정확히 일치합니다.
• 빨간색과 파란색 혼합이 보라색이 되지 않는 이유는? — RGB에서 빨간색(#ff0000)과 파란색(#0000ff)을 50% 혼합하면 #7f007f(어두운 자홍색)가 됩니다. 선명한 보라색은 #8000ff 같은 보라-파란색과 혼합해야 합니다.
• 더 많은 그라디언트 단계를 얻을 수 있나요? — 스케일은 항상 7단계를 표시합니다. 비율 슬라이더로 특정 중간 지점을 확인하세요.
• 알파/투명도를 지원하나요? — 아니요, 이 도구는 불투명한 16진수 색상에만 작동합니다.