전체 도구 ↗

색상 혼합기

두 색상을 비율대로 섞어 결과 색을 바로 확인하세요.

  • 설치 없이 브라우저에서
  • 기기 안에서만 처리
  • HEX·RGB 함께 표시
자주 쓰는 색
A 50% · B 50%

슬라이더를 움직여 두 색의 비중을 조절하세요.

혼합 결과

A
B
#8956C2

이 색을 이어서 쓰기 · 그라데이션 생성기 · 명도대비 검사 · 색상 팔레트

설명

슬라이더로 비율을 조절하면 두 색상이 섞인 중간 색을 실시간으로 만들어 줍니다. 결과는 HEX와 RGB로 함께 표시되고, 복사 버튼으로 바로 가져다 쓸 수 있습니다.

오늘의 타로 한 장, 30초타로타로 · 78장 카드 · 가입 없이 무료카드 뽑기

관련 도구

그라데이션 생성기그림자 생성기색상 팔레트명도대비 검사HEX·RGB·HSL 변환랜덤 색상 생성명도 대비 검사기(WCAG)CSS 둥근 모서리 생성기

두 가지 물감을 섞으면 중간 색이 나오듯, 색상 혼합기는 두 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%로 섞으면 정확히 두 색의 중간 색이 나오나요?
RGB 색 공간에서 각 채널(R, G, B)을 산술 평균한 값이 결과로 나오므로, 수치상 정중간 색이 맞습니다. 다만 사람 눈에 따라 지각적 중간과 차이가 있을 수 있습니다.
흰색을 섞으면 파스텔 톤이 나오나요?
네. 색상 B를 흰색(#FFFFFF)으로 설정하고 비율을 조정하면 채도가 낮아지고 밝아지는 파스텔 계열 색이 만들어집니다.
세 가지 이상의 색을 혼합할 수 있나요?
이 도구는 두 가지 색의 혼합만 지원합니다. 세 가지 이상이 필요하다면, 먼저 두 색을 섞어 결과를 얻은 뒤 그 결과 색을 다시 세 번째 색과 섞는 방식으로 단계별로 진행하면 됩니다.
CSS에서 색을 혼합하려면 어떻게 하나요?
CSS의 color-mix() 함수(Chrome 111+, Firefox 113+ 지원)를 사용하면 브라우저가 두 색을 직접 혼합합니다. 이 도구는 그 결과를 미리 확인하거나 구형 브라우저를 위한 고정 HEX 값을 얻는 용도로 쓸 수 있습니다.
투명도(알파 값)가 있는 색도 혼합할 수 있나요?
현재 도구는 알파 채널 없이 순수 RGB(HEX 6자리) 기반 혼합만 지원합니다. 투명도를 고려한 혼합은 별도로 RGBA 계산기를 사용하는 것을 권장합니다.
화면 결과가 물감 색과 다른 이유는?
화면은 빛을 더하는 가산 혼합(RGB), 물감은 빛을 빼는 감산 혼합입니다. 이 도구는 RGB 값을 보간하므로 모니터 표시용 색에 맞습니다. 실제 도색이나 인쇄 결과와는 차이가 날 수 있으니 참고 값으로 쓰는 것이 좋습니다.
비율을 정확한 숫자로 넣을 수 있나요?
숫자 입력란은 없지만, 슬라이더를 움직이면 옆 배지에 'A 70% · B 30%'처럼 현재 비중이 1% 단위로 표시되어 5:5·3:7 같은 비율을 정확히 맞출 수 있습니다. 슬라이더에 포커스를 둔 뒤 좌우 방향키를 누르면 1%씩 미세 조정됩니다. 각 채널은 그 비율대로 선형 계산되므로 같은 위치면 항상 같은 결과가 나옵니다.
세 가지 이상 색도 섞이나요?
이 도구는 두 색 혼합 전용입니다. 여러 색이 필요하면 먼저 두 색을 섞어 결과 HEX를 복사한 뒤, 그 값을 색상 A의 HEX 칸에 붙여 넣고 세 번째 색을 색상 B로 지정해 단계적으로 이어가면 됩니다.
결과 색을 다른 곳에 그대로 쓸 수 있나요?
네. 결과에 표시되는 HEX와 RGB 값을 복사해 CSS, 디자인 툴, 문서 등에 그대로 붙여 넣으면 동일한 색이 재현됩니다. 결과를 정사각형 이미지로 저장하거나, 지금 조합을 그대로 여는 링크를 복사해 공유할 수도 있습니다.

개인정보처리방침

모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 저장한 조합은 이 브라우저의 로컬 저장소에만 보관됩니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의는 문의 페이지를 이용해 주세요.

색상 혼합기 사용법

두 개의 색을 골라 섞은 결과를 즉시 확인하는 도구입니다. 먼저 색상 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 평균은 두 색 사이를 직선으로 가로지르므로 원색끼리 섞을수록 중간에서 채도가 떨어집니다. 선명한 중간색이 필요하면 두 색을 비슷한 계열로 좁혀서 섞으세요.