색상 믹서 — 두 색상 혼합과 그 사이 모든 단계
색상 두 개(hex 또는 rgba)를 원하는 비율로 섞고 결과를 HEX·RGB·HSL로 읽고, 두 색 사이 전체 단계를 한 번에 복사하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
#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을 붙이지 않습니다.