두 색상을 비율로 혼합하는 방법

색상 조합을 시작하기 전에

두 색상을 하나의 색으로 조합해야 할 때 이 도구를 활용할 수 있습니다. 첫 번째 색상과 두 번째 색상을 각각 입력하고 비율을 지정하면 두 색상 사이에서 계산된 혼합 결과를 살펴볼 수 있습니다. 같은 입력으로 multiply와 screen 결과도 함께 확인할 수 있어, 하나의 보간 결과만 보는 대신 서로 다른 계산 결과를 비교하기에 편리합니다.

입력 형식은 임의의 색상 표현 전체를 뜻하지 않습니다. 해시 기호로 시작하는 16진수 텍스트와 세 개의 0 이상 정수 채널을 포함하는 rgb 패턴이 사용 대상입니다. 따라서 디자인 시안의 색상 값을 준비할 때는 입력 형식을 먼저 확인하는 것이 좋습니다. 이 글에서는 두 입력을 넣는 순서, 비율이 결과에 미치는 방향, 성공 결과와 입력 오류를 구분하는 방법을 차례로 설명합니다.

입력과 비율을 설정하는 순서

첫 번째 색상 입력란에 해시 기호가 붙은 16진수 텍스트를 입력합니다. #ff6600처럼 여섯 자리로 쓸 수 있고, #abc처럼 세 자리로도 작성할 수 있습니다. 세 자리 입력은 여섯 자리 색상으로 확장되어 해석됩니다.
두 번째 색상 입력란에는 비교할 색상을 넣습니다. 예를 들어 rgb(30, 120, 200)처럼 세 채널이 0 이상인 정수로 이루어진 rgb 패턴을 사용할 수 있습니다. 색상 텍스트의 앞뒤 공백은 정리되고 문자는 소문자 기준으로 처리되므로, 입력 전에 대소문자를 일일이 바꿀 필요는 없습니다.
혼합 비율을 정합니다. 이 값은 첫 번째 색상에서 두 번째 색상으로 이동하는 정도를 나타냅니다. 0이면 첫 번째 색상에 해당하고 1이면 두 번째 색상에 해당하며, 그 사이의 값은 두 색상 사이의 채널별 중간 위치를 만듭니다. 예를 들어 0.25는 첫 번째 색상에서 출발해 두 번째 색상 방향으로 25퍼센트 이동하는 설정입니다.
비율을 입력할 때 0보다 작거나 1보다 큰 수를 넣으면 0부터 1 사이로 조정됩니다. 숫자로 바꿀 수 없는 값이나 형식 문제가 있는 값은 기본 비율인 0.5로 다시 설정됩니다. 비율을 생략한 경우에도 0.5가 사용되며, 색상 입력을 생략하면 첫 번째 색상은 #ff0000, 두 번째 색상은 #0000ff로 간주됩니다.
계산을 실행한 뒤 결과 영역에서 각 항목을 구분해 확인합니다. 두 색상이 모두 해석되면 혼합 색상, multiply 색상, screen 색상이 각각 소문자 여섯 자리 HEX로 제공됩니다. 혼합 색상에는 RGB 형식 값도 함께 표시되므로 HEX 값과 채널별 표현을 나란히 살펴볼 수 있습니다.
결과를 비교할 때는 한 번에 비율 하나만 바꾸어 보세요. 두 입력을 고정하고 비율을 0, 0.5, 1로 차례로 바꾸면 첫 번째 색상에서 두 번째 색상으로 결과가 이동하는 흐름을 확인하기 쉽습니다. 입력 자체를 바꾼 실험과 비율만 바꾼 실험을 나누면 어떤 변화가 어느 설정에서 비롯되었는지도 구별할 수 있습니다.

계산 결과를 비교하고 오류를 구분하는 법

혼합 색상은 두 입력의 각 채널을 따로 계산해 첫 번째 값에서 두 번째 값 쪽으로 옮긴 결과입니다. 그러므로 비율을 높이면 두 번째 색상의 채널 영향이 커지고, 비율을 낮추면 첫 번째 색상의 영향이 상대적으로 크게 남습니다. 이 방식은 단순히 두 텍스트를 이어 붙이는 것이 아니라 채널별 수치를 기준으로 결과를 만듭니다.

HEX와 RGB로 표시되는 혼합 결과의 채널 값은 반올림됩니다. HEX로 표시되는 채널은 추가로 0부터 255 사이로 제한되므로, 표시된 값은 계산 결과를 읽기 쉬운 색상 표현으로 정리한 값입니다. multiply와 screen은 혼합 결과와 같은 입력에서 제공되는 별도 결과이므로, 어느 하나가 혼합 결과를 대신한다고 보지 말고 세 항목을 각각 비교해야 합니다.

두 색상 입력이 모두 해석되지 않으면 계산된 색상 값 대신 오류 표시가 반환될 수 있습니다. 이 경우 입력에 색상 이름을 넣었는지, 해시 기호가 필요한 형식을 빠뜨렸는지, rgb 패턴의 채널이 0 이상인 정수인지 확인해 보세요. 해시 기호로 시작하는 텍스트가 16진수 형식에 맞지 않으면 일반적인 잘못된 입력 표시가 아니라 변환 단계에서 처리가 중단될 수도 있습니다.

따라서 결과가 나오지 않을 때는 비율만 다시 조정하기보다 두 색상의 표기부터 점검하는 편이 맞습니다. 세 자리 또는 여섯 자리의 유효한 해시 기반 HEX를 사용하거나, 세 개의 0 이상 정수를 가진 rgb 패턴으로 바꾸면 입력 해석 범위에 맞출 수 있습니다. 이 도구에서 확인할 수 있는 결과는 제공된 입력과 비율에 따른 계산값이며, 지원 범위 밖의 색상 표기나 다른 색상 체계까지 판정하는 기능으로 확대해서 해석해서는 안 됩니다.

사용 예시

디자인 시안에서 주황색에 파란색의 영향을 25퍼센트 반영한 혼합 결과와 두 가지 추가 결과를 비교하려고 합니다.

주황색 #ff6600과 파란 계열 rgb(30, 120, 200)을 입력하고 비율을 0.25로 설정한 다음 계산을 실행합니다.

두 색상을 해석할 수 있으면 혼합 색상의 소문자 여섯 자리 HEX와 RGB 표현, multiply와 screen의 소문자 여섯 자리 HEX가 함께 표시됩니다.

제한 사항

지원되는 입력 범위는 해시 기호가 붙은 16진수 텍스트와 세 개의 0 이상 정수 채널을 포함한 rgb 패턴입니다. 인식되지 않는 입력은 오류 표시가 될 수 있고, 잘못된 해시 기반 16진수는 변환 과정에서 처리가 중단될 수 있습니다.

자주 발생하는 오류

red 같은 색상 이름이나 16진수 규칙에 맞지 않는 텍스트를 넣으면 색상으로 해석되지 않을 수 있습니다. 해시 기호가 붙은 유효한 세 자리 또는 여섯 자리 HEX, 혹은 세 개의 0 이상 정수를 포함한 rgb 패턴으로 입력을 바꾸세요.

자주 묻는 질문

어떤 색상 입력 형식을 사용할 수 있나요?

해시 기호로 시작하는 세 자리 또는 여섯 자리 16진수 텍스트와 세 개의 0 이상 정수 채널을 포함한 rgb 패턴을 사용할 수 있습니다. 색상 이름이나 지원 범위 밖의 임의 표기는 색상으로 해석되지 않을 수 있습니다.

혼합 비율을 생략하거나 잘못 입력하면 어떻게 되나요?

비율을 생략하면 0.5가 적용되고, 숫자로 변환할 수 없는 값은 0.5로 다시 설정됩니다. 0보다 작거나 1보다 큰 숫자는 0부터 1 사이로 조정되므로, 두 색상 사이의 위치를 원하면 해당 범위의 값을 입력하세요.

잘못된 색상을 입력하면 어떤 결과가 나오나요?

두 색상 중 하나가 해석되지 않으면 계산된 색상 값 대신 오류 표시가 반환될 수 있습니다. 해시 기호로 시작하는 텍스트 자체가 잘못된 16진수라면 변환이 별도로 보호되지 않아 처리가 중단될 수도 있으므로, 유효한 세 자리 또는 여섯 자리 값을 다시 입력해야 합니다.