색 섞기 계산기

두 색을 섞은 색은 섞는 방식에 따라 달라집니다

파랑 #0000FF와 노랑 #FFFF00을 반씩 섞어 보면 차이가 바로 드러납니다. 화면에서 RGB 값을 평균하면 회색 #808080이 나오고, 두 빛을 절반 세기로 함께 비추면 밝은 회색 #BCBCBC가 됩니다. 물감처럼 섞으면 청록빛 #217D90이 되고, 노랑을 75%로 늘리면 초록 #81B265에 가까워집니다. CSS의 color-mix() 기본값인 OKLab으로 섞으면 하늘색 #6CABC7이 나옵니다.

위 계산기는 이 다섯 방식을 한 화면에 나란히 보여 줍니다. 두 색과 비율을 넣으면 방식마다 A에서 B로 이어지는 띠와 지금 비율의 색이 나오고, 고른 방식으로 HEX·RGB·HSL·OKLCH 값과 CSS 코드, 단계 팔레트를 만들 수 있습니다. 아래 섞는 길 지도에서는 섞는 방식마다 색이 지나가는 길이 달라 결과가 탁해지거나 선명해지는 이유를 볼 수 있습니다.

섞은 색을 미리 계산하는 이유와 쓰는 상황

같은 두 색이라도 쓰는 곳에 따라 맞는 섞기 방식이 다릅니다. 화면에 쓸 색인데 물감 결과를 기대하거나, 물감을 섞을 때 화면 평균만 보고 판단하면 예상과 다른 색이 나옵니다.

• 웹·앱 디자인: 버튼 위에 마우스를 올렸을 때 쓸 조금 어두운 색, 브랜드 색에 흰색을 섞은 옅은 배경색을 CSS color-mix()로 만들 때 결과 HEX를 미리 확인합니다.
• 차트·그라데이션: 두 색 사이를 5·7·9단계로 나눠 순서가 있는 색 띠를 만듭니다. 중간이 탁해지지 않는 방식을 고르는 일이 중요합니다.
• 그림·공예·페인트: 물감이나 페인트를 실제로 섞기 전에 어느 쪽 색으로 기울지, 흰색·검정을 얼마나 넣을지 대략 가늠합니다.
• 수업·설명: 빛의 혼합(가산)과 물감의 혼합(감법)이 왜 다른 결과를 내는지 같은 두 색으로 비교해 보여 줍니다.

계산기 쓰는 법

1. 색 A와 색 B 칸에 #3498db, 3498db, #f80 같은 HEX 코드나 rgb(52 152 219), hsl(204 70% 53%), tomato 같은 CSS 표기를 넣습니다. 칸 왼쪽 견본을 누르면 컬러 피커로 고를 수 있고, 가운데 단추는 A와 B를 바꿉니다.
2. B 비율은 섞은 색에서 B가 차지하는 몫입니다. 30을 넣으면 A 70%, B 30%입니다. 다섯 줄 띠 위의 세로 표식을 끌거나, 띠를 누른 뒤 ← → 키로 1%씩 옮길 수도 있습니다.
3. 왼쪽 방식 이름을 누르면 그 방식이 결과 카드와 단계 팔레트에 쓰입니다. 오른쪽 HEX 단추를 누르면 그 방식의 결과만 바로 복사됩니다.
4. 결과 카드에서 HEX·RGB·HSL·OKLCH 값과 CSS color-mix() 코드를 복사합니다. 물감 방식은 CSS에 대응하는 함수가 없어 HEX로 씁니다.
5. 단계 팔레트에서 칸 수를 고르고 HEX 목록, CSS 변수, PNG 이미지로 가져갑니다. 칸 하나를 누르면 그 색 HEX가 복사됩니다.

섞는 방식 다섯 가지

다섯 방식은 모두 같은 두 색과 같은 비율을 받지만, 어떤 값을 평균하는지가 다릅니다. 마지막 열은 파랑 #0000FF와 노랑 #FFFF00을 50 : 50으로 섞은 결과입니다.

화면 평균은 옛 HEX 블렌더들이 쓰던 방식이라 결과가 익숙하지만, 보색에 가까운 두 색을 섞으면 회색 쪽으로 크게 꺾입니다. 빛 방식은 같은 두 색에서 화면 평균보다 늘 같거나 밝게 나옵니다. HEX 숫자는 빛의 세기를 감마 곡선으로 눌러 담은 값이라, 세기 자체를 평균한 뒤 다시 HEX로 바꾸면 중간값이 더 밝아지기 때문입니다.

물감은 왜 화면과 다르게 섞이나

화면은 빨강·초록·파랑 빛을 더해 색을 만듭니다(가산 혼합). 물감은 반대로 비친 빛에서 어떤 파장을 흡수하고 나머지를 돌려보냅니다(감법 혼합). 파랑 물감은 주로 짧은 파장을, 노랑 물감은 중간 이상 파장을 돌려보내므로, 둘을 섞으면 양쪽이 함께 돌려보내는 초록 근처 파장만 남습니다. 그래서 화면 평균에서는 회색이 되는 파랑 + 노랑이 물감에서는 초록 계열이 됩니다.

이 계산기의 물감 방식은 Scott Allen Burns가 공개한 계산 절차를 따릅니다. 먼저 각 색을 380~730 nm 가시광선을 10 nm 간격으로 나눈 36개 반사율 값으로 바꿉니다. 같은 RGB를 내는 곡선은 무수히 많으므로, 그중 곡선이 가장 매끄러운 것(이웃한 값의 로그 차이 제곱합이 가장 작고 반사율이 0~1인 곡선)을 고릅니다. 그다음 두 곡선을 파장마다 가중 기하 평균, 곧 반사율 A^{1 − t} × 반사율 B^t(t는 B 비율)로 섞고, CIE 1931 등색함수와 주광 D65로 다시 sRGB를 계산합니다.

기하 평균은 곱셈이라 어두운 색의 영향이 큽니다. 파랑 #0000FF는 빛의 양(상대 휘도)이 노랑의 10분의 1에도 못 미쳐서, 반씩 섞으면 아직 파랑 쪽인 청록이 나옵니다. 노랑을 늘려 갈수록 초록으로 옮겨 갑니다.

자주 묻는 조합 색 섞기 표

아래 표는 모두 50 : 50으로 섞은 결과입니다. 같은 행에서도 방식마다 색이 크게 다르므로, 결과를 쓸 곳에 맞는 열을 보세요. 위 계산기의 '자주 찾는 조합'을 누르면 같은 조합을 바로 불러옵니다.

물감 열에서 빨강 + 초록은 갈색, 빨강 + 파랑은 어두운 보라가 됩니다. 실제로 두 물감을 섞을 때 흔히 보는 결과와 방향이 같습니다. 빛 열은 어떤 조합에서도 화면 평균보다 같거나 밝습니다.

화면에서 섞으면 왜 탁해지나

색이 탁하다는 것은 채도가 낮다는 뜻입니다. 섞는 길 지도는 색 공간을 위에서 내려다본 OKLab a·b 평면이라, 가운데에 가까울수록 회색이고 바깥 띠에 가까울수록 선명합니다. 화면 평균은 A와 B를 RGB 상자 안에서 곧게 잇기 때문에, 보색에 가까운 두 색이면 길이 가운데 회색을 지나갑니다. OKLCH는 색상환 둘레를 따라 돌아서 채도를 유지합니다.

괄호 안은 두 색 채도의 평균에 대한 비율입니다. 차트처럼 단계마다 색이 또렷해야 하면 OKLCH가 낫습니다. 빛 방식은 빨강 + 파랑처럼 보색이 아닌 쌍에서는 채도를 잘 지키지만, 파랑 + 노랑 같은 보색 쌍에서는 화면 평균처럼 회색이 됩니다. 다만 OKLCH는 선명한 두 색 사이에서 화면이 낼 수 없는 색까지 가기 쉬워, 위 표의 OKLCH 파랑 + 노랑처럼 잘라 낸 값이 나올 수 있습니다.

흰색·검정을 섞을 때(틴트·셰이드)

색에 흰색을 섞어 옅게 만든 색을 틴트, 검정을 섞어 어둡게 만든 색을 셰이드라고 부릅니다. 화면 평균은 흰색이 늘어나는 만큼 고르게 옅어지지만, 물감 방식은 흰색을 꽤 많이 넣어야 분홍으로 바뀝니다.

검정은 반대로 물감 방식에서 아주 강합니다. 흰색에 검정을 10%만 섞어도 #A9A9A9, 25%면 #595959가 되고, 반씩 섞으면 거의 검정인 #191919가 됩니다. 같은 비율을 화면 평균으로 섞으면 #E6E6E6, #BFBFBF, #808080입니다. 실제 물감에서도 검정은 조금만 넣는 것이 보통입니다.

CSS color-mix()로 쓰기

CSS에서는 color-mix(in oklab, #3498DB, #E74C3C)처럼 섞을 공간과 두 색을 적습니다. 결과 카드의 CSS 줄은 고른 방식에 맞는 공간(srgb-linear·srgb·oklab·oklch)으로 이 코드를 만들어 줍니다. 백분율은 아래처럼 정리됩니다.

CSS Color 5 초안은 공간을 생략하면 oklab으로 섞도록 정했지만, 오래된 브라우저를 생각하면 in oklab까지 적는 편이 안전합니다. 극좌표 공간(oklch·hsl)은 색상각을 짧은 쪽으로 돌고, in oklch longer hue처럼 쓰면 긴 쪽으로 돕니다.

자주 틀리는 경우

• HEX 평균을 물감 결과로 믿는 경우: 파랑 + 노랑이 회색으로 나오는 것은 계산 실수가 아니라 화면 평균의 성질입니다. 물감 결과가 궁금하면 물감 줄을 보세요.
• 비율을 반대로 읽는 경우: 이 계산기와 CSS 모두 B 비율 30%는 A 70%를 뜻합니다. color-mix()에서 백분율은 바로 앞 색의 몫입니다.
• 빛 혼합을 더하기로 생각하는 경우: 빨강 빛과 초록 빛을 모두 켜면 노랑 #FFFF00이 되지만, 이 계산기의 빛 방식은 두 빛을 비율대로 나눠 켠 평균이라 #BCBC00입니다.
• OKLCH 결과를 그대로 믿는 경우: 선명한 두 색 사이는 sRGB 밖으로 나가기 쉽습니다. 결과 카드에 잘라 냈다는 안내가 나오면 실제 화면 색은 그 HEX입니다.
• 검정을 많이 넣는 경우: 물감 방식에서 흰색에 검정을 30% 섞으면 이미 진한 회색 #474747이고, 빨강에 검정 10%만 넣어도 #AA0D0B까지 어두워집니다(화면 평균은 #E60000). 어둡게 만들 때는 10% 안쪽부터 조금씩 늘려 보세요.
• 흰색 몇 방울로 파스텔을 기대하는 경우: 물감 방식에서 빨강을 분홍으로 바꾸려면 흰색이 75% 안팎은 되어야 합니다.

한계와 주의

• 물감 방식은 화면 색을 '가장 매끄러운 반사율'을 가진 가상의 물감으로 보고 섞는 근사입니다. 실제 물감은 안료마다 반사 곡선과 착색력(섞었을 때 색을 끌어오는 힘)이 달라, 같은 HEX라도 브랜드·안료에 따라 결과가 다릅니다.
• 0인 채널은 0.0001로 바꿔 계산하므로 순수한 검정 #000000도 반사율 0.0001인 아주 어두운 물감으로 다룹니다. 양 끝 비율 0%와 100%는 입력한 색을 그대로 돌려줍니다.
• 결과가 화면 색(sRGB) 범위를 벗어나면 채널을 0~255로 잘라 보여 줍니다. Chrome 151이 color-mix() 결과를 그리는 방식과 같으며, CSS Color 4가 권하는 채도 줄이기 방식과는 다를 수 있습니다.
• 투명도는 빼고 불투명한 두 색으로 섞습니다. 반투명 색을 넣으면 투명도를 무시한다는 안내가 나옵니다.
• 화면에 보이는 색은 모니터의 색 영역과 밝기 설정에 따라 달라 보일 수 있습니다. 인쇄 색이 필요하면 RGB CMYK 변환기로 인쇄 조건에 맞춰 확인하세요.

기준: 물감 방식은 Scott Allen Burns의 반사율 곡선(380~730 nm, 10 nm) + 가중 기하 평균 절차와 CIE 1931 2° 등색함수·주광 D65로, 나머지 네 방식은 CSS Color 4·5의 color-mix() 정의로 계산합니다. CSS 결과는 2026년 10월 21일 Chrome 151에서 확인했습니다.

출처

• 01Scott Allen Burns — Subtractive Color Mixture ComputationRGB를 반사율 곡선으로 바꾸고 가중 기하 평균으로 섞은 뒤 RGB로 되돌리는 절차, 파랑 + 노랑 예시
• 02Scott Allen Burns — Generating Reflectance Curves from sRGB Triplets380~730 nm 10 nm 36점, 가장 매끄러운 곡선(LLSS·ILLSS), 반사율 0~1
• 03W3C — CSS Color Module Level 5color-mix() 문법, 방법을 생략하면 oklab, 백분율 정규화와 합이 100% 미만일 때의 알파
• 04W3C — CSS Color Module Level 4색 보간 기본 공간 Oklab, 색상각 보간 기본값 shorter, sRGB 전달 함수와 OKLab 변환 행렬
• 05CIE — CIE 1931 colour-matching functions, 2 degree observer반사율 곡선을 XYZ로 바꾸는 등색함수 데이터
• 06CIE — Components of relative spectral distribution of daylight주광 D65(6504 K) 분광 분포를 만드는 S0·S1·S2 성분
• 07Björn Ottosson — A perceptual color space for image processingOKLab 색 공간의 정의와 설계 의도
• 08MDN — color-mix()문법 예시와 브라우저 지원(Chrome 111, Firefox 113, Safari 16.2)

자주 묻는 질문

함께 쓰는 도구