색상 혼합기

계량컵으로 색상을 시각적으로 혼합하세요. 색상을 고르고 양을 조절하면 RGB, HSL, HEX 혼합 결과를 확인할 수 있습니다.

혼합 영역

컵 1

5

컵 2

5

혼합 결과

입력 비율

50%

RGB 구성

빨강: 142 (35.9%)

초록: 114 (28.8%)

파랑: 140 (35.4%)

혼합 색상

색상 상세

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

색상 혼합기 – 작동 원리

색상 혼합이 가능한 이유

색상 혼합에는 크게 두 가지 방식이 있습니다.

가산 혼합은 모니터, 조명 등 빛을 사용하는 시스템에서 쓰입니다. 유색 빛이 겹치면 빛이 더해져 밝아집니다. 빨강 + 초록 = 노랑, 빨강 + 파랑 = 마젠타, 초록 + 파랑 = 시안이 됩니다. 세 가지 색을 최대 밝기로 모두 겹치면 흰색이 됩니다.

감산 혼합은 물감, 잉크, 안료와 같은 물질에서 쓰입니다. 재료가 특정 파장의 빛을 흡수하고 나머지를 반사하는 방식으로 색이 만들어집니다. 감산 혼합의 3원색은 시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 즉 CMY입니다. 많이 섞을수록 결과는 검정에 가까워집니다.

이 도구는 디지털 화면과 웹 디자인의 표준인 가산 RGB 모델을 사용합니다.

RGB 색상 모델

RGB는 세 가지 채널로 색상을 정의합니다.

빨강(R): 0–255
초록(G): 0–255
파랑(B): 0–255

화면의 각 픽셀에는 빨강, 초록, 파랑의 서브픽셀이 포함되어 있습니다. 각 채널의 밝기를 조절하면 1,677만 가지 이상의 색을 표현할 수 있습니다（ $256^3 = 16{,}777{,}216$ ）.

주요 색상 형식

형식	예시	설명
HEX	#FF6B35	CSS에서 자주 사용되는 6자리 16진수 형식
RGB	rgb(255, 107, 53)	빨강, 초록, 파랑을 10진수로 나타낸 형식
HSL	hsl(16, 100%, 60%)	색조, 채도, 명도로 표현한 형식. 시각적으로 조절하기 쉬움

혼합 결과 계산 방법

혼합기는 각 RGB 채널의 가중 평균을 계산하여 결과를 산출합니다. 입력 색상이 $N$ 개이고 각 색의 양이 $a_1, a_2, \ldots, a_N$ , RGB 값이 $(r_i, g_i, b_i)$ 일 때 결과는 다음과 같습니다.

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

쉽게 말해, 양(레벨)이 많은 색일수록 최종 결과에 더 큰 영향을 미칩니다.

예시: 빨강(#FF0000) 3 과 파랑(#0000FF) 1 을 혼합할 경우:

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

혼합된 색상은 약 #BF0040이며, 짙은 붉은 자주색입니다.

활용 분야

웹 디자인 및 UI

색상 혼합을 활용해 팔레트를 구성하고, 투명한 오버레이 효과를 테스트하며, 기본 색상에서 강조 색상을 만들 수 있습니다.

교육

빛, 인간의 색 지각, 그리고 색상 수학이 어떻게 연결되는지를 직관적으로 배울 수 있습니다.

디지털 아트

일러스트, 디자인, 사진 편집 작업에서 화면 위에서 색상이 어떻게 합쳐지는지 미리 파악하는 데 유용합니다.

더 나은 혼합을 위한 팁

3원색부터 시작하세요 — 빨강, 초록, 파랑은 RGB 혼합의 기초입니다.
레벨을 조절하세요 — 레벨이 높을수록 해당 색이 혼합 결과에 미치는 영향이 커집니다.
출력 형식을 비교하세요 — CSS, 디자인 툴, 코드 작업에 맞게 HEX, RGB, HSL을 구분해서 사용하세요.
RGB가 같으면 회색이 됩니다 — 빨강, 초록, 파랑의 값이 모두 같으면 무채색(회색)이 됩니다.

자주 묻는 질문

가산 혼합과 감산 혼합의 차이는 무엇인가요? 가산 혼합은 빛을 사용하며 색을 더할수록 밝아져 흰색으로 향합니다. 감산 혼합은 안료를 사용하며 색을 더할수록 어두워져 검정으로 향합니다.

물감을 섞을 때와 색이 다르게 나오는 이유는 무엇인가요? 이 도구는 물감이 아닌 RGB 빛 혼합 모델을 사용하기 때문입니다. 화면에서는 빨강 + 파랑 = 마젠타가 되지만, 물감에서는 안료가 빛을 흡수하는 방식이 달라 결과가 다르게 보입니다.

결과 색상 코드를 CSS에서 바로 사용할 수 있나요? 네. 출력되는 HEX, RGB, HSL 값은 CSS 및 대부분의 디자인 툴에서 바로 사용할 수 있습니다.

각 유리컵의 "레벨"은 무엇을 의미하나요? 해당 색이 혼합에서 차지하는 상대적인 양을 나타냅니다. 레벨 8인 색은 레벨 4인 같은 색보다 혼합 결과에 두 배의 영향을 미칩니다.