색상 믹서 — 두 색상 혼합과 그 사이 모든 단계
hex나 rgba 색 두 개를 원하는 비율로 sRGB 또는 지각 균일(OKLab) 공간에서 섞고, 둘 사이의 색을 2~12단계로 한꺼번에 만드세요.
#808080
rgb(128, 128, 128)
hsl(0, 0%, 50.2%)
밝음 — 검정 글자 대비 5.32:1
두 색 사이의 모든 색입니다. 색상 칸을 클릭하면 복사됩니다.
#000000 #404040 #808080 #bfbfbf #ffffff
이 색상 믹서가 하는 일
hex 색상 두 개를 고르고 비율 슬라이더를 움직여 섞으면 0%(색상 A 그대로)부터 정확한 중간값을 지나 100%(색상 B)까지 자유롭게 조절할 수 있습니다. 혼합된 색상이 HEX·RGB·HSL 세 가지 표기로 한꺼번에 표시되고 각각 복사 버튼이 붙으며, 실시간 색상 칸이 슬라이더를 움직일 때마다 갱신됩니다. 두 입력 모두 색상 선택기, 직접 입력한 hex 값, 그리고 투명도가 있는 rgba() 색상을 받습니다 — #ff000080과 rgba(255, 0, 0, 0.5) 둘 다 되고, 혼합 결과에도 알파가 반영되며, 체크무늬 배경 위에 표시되어 투명도가 눈에 보입니다.
한 단계가 아니라 전체 단계
단계 수를 2에서 12 사이로 정하면 A와 B 사이의 모든 색이 한 번에 나옵니다 — 양끝과 그 사이 균등한 단계들이 색상 칸으로 그려지고, 칸을 클릭하면 그 색이 복사되며, 아래에는 전체 목록과 전체 복사 버튼이 있습니다. 목록 표기는 HEX·RGB·HSL 중에 고를 수 있습니다. 단계는 슬라이더와 같은 혼합 공간을 쓰고, 두 색상·비율·혼합 공간·단계 수·표기법이 모두 주소에 담기므로 링크로 같은 색 단계를 다시 열 수 있습니다.
색상을 섞는 방법
각 채널은 RGB 공간에서 단순 선형 보간으로 섞입니다. 색상 A의 빨강·초록·파랑 값이 슬라이더 위치에 비례해 색상 B 쪽으로 이동한 뒤 가장 가까운 8비트 값으로 반올림됩니다. 비율 0.5는 두 색의 정확한 중간이라 검은색과 흰색을 섞으면 중간 회색 #808080이 나옵니다. 혼합 공간을 지각 균일 (OKLab)로 바꾸면 CSS color-mix()와 같은 방식으로 보간되어 검은색과 흰색의 중간이 #636363이 되고, 빨강과 초록을 섞으면 탁한 올리브가 아니라 선명한 금색이 됩니다. 같은 두 색·비율·공간을 넣으면 항상 같은 결과가 나옵니다. 표준 6자리 hex, #fff 같은 축약형, 알파를 담는 4자리·8자리 형식, 앞의 # 없는 값, rgba() 색상 모두 입력할 수 있습니다. 두 색의 알파가 다르면 채널을 알파로 미리 곱한 뒤 보간하는데, CSS color-mix()와 같은 규칙입니다. 그래서 완전히 투명한 색은 결과를 물들이지 않습니다.
자주 묻는 질문
비율 슬라이더는 정확히 무엇을 조절하나요?
혼합이 색상 A에서 색상 B 쪽으로 얼마나 이동하는지를 정합니다. 0%면 색상 A, 100%면 색상 B, 50%면 두 색의 정확한 중간입니다. 그 사이의 모든 단계는 두 색의 단순 선형 혼합입니다.
sRGB와 지각 균일(OKLab) 혼합 공간의 차이는 무엇인가요?
sRGB는 빨강·초록·파랑 원시 값을 섞는 고전적 방식이지만 중간값이 탁해 보일 수 있습니다. 지각 균일(OKLab)은 CSS color-mix()가 쓰는 OKLab 공간에서 섞어 전환이 눈에 고르게 보입니다 — 빨강→초록은 탁한 올리브 대신 선명한 금색을 지나고, 검정→흰색은 #636363이 됩니다. 양끝 색은 두 공간에서 동일합니다.
검은색과 흰색을 50%로 섞었는데 왜 눈에는 정확한 회색으로 안 보이나요?
sRGB에서는 원시 값을 섞기 때문에 #000000과 #ffffff의 50%는 #808080입니다. 디스플레이가 감마 인코딩되어 있어 체감 밝기는 다를 수 있으니, 지각적으로 중앙에 놓인 #636363을 원하면 혼합 공간을 지각 균일(OKLab)로 바꾸세요.
투명도가 있는 색상도 섞을 수 있나요?
네. 두 입력칸 모두 #ff000080 같은 8자리 hex, #f00a 축약형, rgba(255, 0, 0, 0.5) 같은 값을 받고 혼합 결과에도 알파가 반영됩니다. 알파는 따로 보간하고 색 채널은 알파로 미리 곱해 섞는데, CSS color-mix()와 같은 규칙입니다. 그래서 완전히 투명한 빨강을 파랑에 섞으면 보라가 아니라 반투명한 파랑이 나옵니다.
한 가지 색이 아니라 두 색 사이의 모든 색을 얻으려면 어떻게 하나요?
결과 아래의 단계 수를 2에서 12 사이로 정하면 됩니다. A에서 B까지 양끝을 포함해 균등한 간격의 색이 그만큼 그려지고, 색상 칸을 클릭하면 하나씩 복사되며 아래에 전체 목록과 전체 복사 버튼이 있습니다. 목록 표기는 HEX·RGB·HSL 중에 고를 수 있고 선택한 혼합 공간을 따릅니다.
결과는 어떤 표기법으로 나오나요?
HEX·RGB·HSL 세 가지가 동시에 나오고 각각 복사 버튼이 있습니다. 혼합 결과에 알파가 있으면 8자리 hex, rgba(), hsla() 형태가 되고, 불투명한 색에는 불필요한 알파 1을 붙이지 않습니다.