색상 혼합기
두 색상을 비율대로 섞어 결과 색을 바로 확인하세요.
슬라이더를 움직여 두 색의 비중을 조절하세요.
혼합 결과
저장한 조합 (이 브라우저에만 저장됩니다)
설명
슬라이더로 비율을 조절하면 두 색상이 섞인 중간 색을 실시간으로 만들어 줍니다. 결과는 HEX와 RGB로 함께 표시되고, 복사 버튼으로 바로 가져다 쓸 수 있습니다.
관련 도구
두 가지 물감을 섞으면 중간 색이 나오듯, 색상 혼합기는 두 HEX 색상을 원하는 비율로 섞었을 때 결과 색이 어떻게 되는지 실시간으로 확인할 수 있는 도구입니다. 그라디언트 중간 값을 맞추거나, 특정 톤을 조금 더 따뜻하게/차갑게 보정할 때 감으로만 색을 고르는 시행착오를 크게 줄여 줍니다.
사용 방법
색상 A와 색상 B를 컬러 피커로 고르거나, 옆 칸에 HEX 코드를 직접 입력합니다. 비율 슬라이더를 움직이면 혼합 결과 색이 즉시 업데이트되고, 슬라이더 옆 배지에 'A 70% · B 30%'처럼 현재 비중이 표시됩니다. 가운데(A 50% · B 50%)이면 두 색의 정중간 색, 슬라이더를 오른쪽으로 옮길수록 색상 B에 가까운 색이 됩니다. 결과 HEX 값을 복사 버튼으로 복사해 디자인 툴에 바로 적용하세요.
이럴 때 유용해요
CSS 그라디언트를 직접 코딩할 때 중간 색 정류장(color stop) 값이 필요한 경우 이 도구로 정확한 HEX를 구할 수 있습니다. 기존 브랜드 컬러에 흰색(#FFFFFF)이나 검정(#000000)을 일정 비율 섞어 더 밝거나 어두운 변형 컬러를 만들 때도 활용됩니다. 또한 다른 시스템에서 가져온 두 팔레트를 자연스럽게 이어 붙여야 할 때, 경계 색을 두 팔레트 끝 색의 혼합으로 만들면 부드러운 전환을 만들 수 있습니다.
알아두면 좋은 점
이 도구는 RGB 색 공간에서 선형 보간(linear interpolation)으로 혼합을 계산합니다. 실제 물감 혼합은 감산 혼합(CMYK 기반)이기 때문에 결과가 다를 수 있습니다. 예를 들어 파랑과 노랑을 섞으면 물감은 초록이 나오지만, RGB 혼합에서는 올리브 계열의 색이 나옵니다. 화면 디자인 용도라면 RGB 혼합이 정확하지만, 인쇄물이라면 CMYK 모드에서 별도로 확인하는 것이 좋습니다.
자주 묻는 질문
비율 50%로 섞으면 정확히 두 색의 중간 색이 나오나요?
흰색을 섞으면 파스텔 톤이 나오나요?
세 가지 이상의 색을 혼합할 수 있나요?
CSS에서 색을 혼합하려면 어떻게 하나요?
투명도(알파 값)가 있는 색도 혼합할 수 있나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 저장한 조합은 이 브라우저의 로컬 저장소에만 보관됩니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
색상 혼합기 사용법
두 개의 색을 골라 섞은 결과를 즉시 확인하는 도구입니다. 먼저 색상 A와 색상 B를 각각 선택합니다. 컬러 피커를 클릭해 고르거나, 그 옆 칸에 HEX 코드(예: #FF5733)를 직접 입력해도 됩니다. 그다음 혼합 비율 슬라이더를 움직여 A와 B의 비중을 조절합니다. 슬라이더가 가운데면 5:5, 색상 A 쪽으로 붙이면 A가 더 진하게, B 쪽으로 붙이면 B가 더 진하게 반영됩니다. 결과 색은 실시간으로 미리보기 박스에 나타나며, 그 아래에 결과의 HEX와 RGB 값이 함께 표시되어 복사 버튼으로 그대로 복사해 쓸 수 있습니다.
어떻게 계산되나
이 도구는 두 색의 R·G·B 각 채널을 혼합 비율대로 선형 보간(linear interpolation)해서 결과를 만듭니다. 비율이 t(0~1, 색상 B의 비중)일 때 각 채널은 결과 = A×(1−t) + B×t 로 계산됩니다. 예를 들어 빨강 #FF0000(255,0,0)과 파랑 #0000FF(0,0,255)를 5:5로 섞으면 (128,0,128)인 보라색이 됩니다. 이는 화면의 RGB 값을 산술 평균하는 방식이라, 물감을 실제로 섞을 때(감산 혼합)와는 결과가 다를 수 있습니다. 물감에서는 빨강+파랑이 진한 보라~자주로 나오지만, 노랑+파랑을 화면에서 이렇게 섞으면 초록이 아니라 회색빛 중간색이 나오는 것이 대표적인 차이입니다.
이럴 때 씁니다
브랜드 색과 배경색 사이의 중간 톤을 뽑아 그래프나 카드의 보조 색으로 쓸 때, 밝은 색과 검정을 섞어 그림자(shade)를, 흰색과 섞어 밝은 변형(tint)을 만들 때 유용합니다. UI에서 hover 상태처럼 기존 색을 살짝만 어둡게/밝게 조정한 값이 필요할 때, 두 색을 8:2 정도로 섞으면 자연스러운 변형 색을 얻습니다. 두 브랜드 색을 이어주는 그라데이션의 중간 정지점 색을 찾을 때도 5:5, 3:7 등으로 나눠 각 지점 색을 추출할 수 있습니다.
활용 팁
| 목적 | 추천 방법 |
|---|---|
| 어두운 변형(shade) | 원본과 검정(#000000)을 7:3~8:2로 혼합 |
| 밝은 변형(tint) | 원본과 흰색(#FFFFFF)을 7:3~8:2로 혼합 |
| 채도 낮추기 | 원본과 회색(#808080)을 섞어 톤 다운 |
| 중간 색 찾기 | 두 색을 5:5로 두고 미세 조정 |
결과가 예상보다 탁하게(회색빛으로) 나온다면 두 색의 색상환 각도 차이가 크기 때문입니다. RGB 평균은 두 색 사이를 직선으로 가로지르므로 원색끼리 섞을수록 중간에서 채도가 떨어집니다. 선명한 중간색이 필요하면 두 색을 비슷한 계열로 좁혀서 섞으세요.
자주 묻는 질문
화면 결과가 물감 색과 다른 이유는?
화면은 빛을 더하는 가산 혼합(RGB), 물감은 빛을 빼는 감산 혼합입니다. 이 도구는 RGB 값을 보간하므로 모니터 표시용 색에 맞습니다. 실제 도색이나 인쇄 결과와는 차이가 날 수 있으니 참고 값으로 쓰는 것이 좋습니다.
비율을 정확한 숫자로 넣을 수 있나요?
숫자 입력란은 없지만, 슬라이더를 움직이면 옆 배지에 'A 70% · B 30%'처럼 현재 비중이 1% 단위로 표시되어 5:5·3:7 같은 비율을 정확히 맞출 수 있습니다. 슬라이더에 포커스를 둔 뒤 좌우 방향키를 누르면 1%씩 미세 조정됩니다. 각 채널은 그 비율대로 선형 계산되므로 같은 위치면 항상 같은 결과가 나옵니다.
세 가지 이상 색도 섞이나요?
이 도구는 두 색 혼합 전용입니다. 여러 색이 필요하면 먼저 두 색을 섞어 결과 HEX를 복사한 뒤, 그 값을 색상 A의 HEX 칸에 붙여 넣고 세 번째 색을 색상 B로 지정해 단계적으로 이어가면 됩니다.
결과 색을 다른 곳에 그대로 쓸 수 있나요?
네. 결과에 표시되는 HEX와 RGB 값을 복사해 CSS, 디자인 툴, 문서 등에 그대로 붙여 넣으면 동일한 색이 재현됩니다. 결과를 정사각형 이미지로 저장하거나, 지금 조합을 그대로 여는 링크를 복사해 공유할 수도 있습니다.