왜 만들었나요
그라데이션에 쓸 중간색이 필요한데, 눈대중으로 색깔 섞기를 해 보면 어딘가 어색하고 디자인 툴을 켜기엔 과했습니다. 두 색만 정하면 사이 값이 균등하게 나오면 되겠다 싶어 만들었습니다.
컬러 믹서
두 색 사이를 여러 단계로 나눠 중간색을 만들어 줍니다. 각 색은 클릭 한 번으로 복사됩니다.
로딩 중...
Note
고른 색 값은 서버로 전송되지 않습니다. 계산이 전부 브라우저 안에서 이뤄집니다.
컬러 믹서 사용 방법
-
왼쪽에서 기준 색상 1과 기준 색상 2를 정합니다. 색상 원을 클릭하면 팔레트가 열리고, 정확한 값이 있으면
#bf1d1d처럼 HEX 코드를 직접 넣어도 됩니다.
-
오른쪽 위 Step 수에서 몇 단계로 나눌지 고릅니다. 양 끝 색을 포함한 전체 칸 수입니다. 그 옆에는 두 색을 이은 그라데이션 띠가 함께 보입니다.
-
만들어진 색을 클릭하면 코드가 복사됩니다. 복사 형식은 오른쪽 위에서 HEX와 RGB 중 고를 수 있습니다.
이렇게 나옵니다
검정과 흰색을 8단계로 나누면 이렇게 나옵니다.
#000000 #242424 #494949 #6D6D6D #929292 #B6B6B6 #DBDBDB #FFFFFF
두 색의 빨강·초록·파랑 값을 각각 균등하게 나누기 때문에 한 칸마다 같은 폭으로 움직입니다. 고를 수 있는 단계 수가 모두 짝수라 정중앙 한 칸은 나오지 않습니다.
알아두면 좋은 것
어떻게 섞나
컬러 믹서의 두 색 섞기는 두 색의 빨강·초록·파랑 값을 각각 따로 놓고, 시작값에서 끝값까지 정해진 단계만큼 균등하게 나누는 방식입니다. 계산이 단순하고 결과가 예측 가능해 그라데이션에 가장 널리 쓰이는 방식입니다.
몇 단계가 적당한가
쓸 곳에 따라 필요한 단계 수가 다릅니다. 너무 잘게 나누면 옆 색과 구분이 안 되고, 너무 성기면 그라데이션이 뚝뚝 끊겨 보입니다.
| 단계 | 어울리는 곳 |
|---|---|
| 8 | 버튼·배지처럼 단계가 적은 UI |
| 12~16 | 일반적인 색 단계(50~900 같은 팔레트) |
| 20 | 부드러운 그라데이션 배경 |
컬러 믹서가 필요한 순간
두 색 사이의 중간색이 필요한 자리, 단계별 색 조합을 만들어야 하는 자리에서 씁니다. 디자인 도구 없이도 값을 바로 뽑아 쓸 수 있어 편합니다.
| 상황 | 이유 |
|---|---|
| 브랜드 색으로 팔레트 만들기 | 밝은 색과 진한 색을 이어 단계 뽑기 |
| 그래프 색 정하기 | 항목 수만큼 고르게 나눠 쓰기 |
| 그라데이션 배경 | 두 색 사이 단계를 그대로 |
| 두 색의 중간색 찾기 | 가운데 값 하나만 골라 쓰기 |
색 값은 그대로 복사해 씁니다
각 단계의 색은 복사 형식에서 고른 대로 #RRGGBB 또는 rgb(r, g, b) 형태의 값으로 나옵니다. 눌러서 복사하면 디자인 도구·엑셀·코드 어디에나 그대로 넣을 수 있습니다.
같은 값이면 어느 프로그램에서 열어도 똑같은 색이 나오므로, 팀에 색을 전달할 때 "이 파랑"이라고 말하는 대신 값을 주면 어긋나지 않습니다.
이런 경우에는
중간색이 탁한 갈색으로 죽어요
색상환에서 마주 보는 두 색(빨강↔초록 등)을 섞으면 중간에서 서로 섞여 탁한 올리브·갈색 쪽으로 흐려집니다.
이럴 때는 경유색을 하나 두고 두 번 나눠 섞으세요. 빨강에서 곧장 파랑으로 가는 대신 빨강→자주, 자주→파랑 구간을 각각 뽑아 이어 붙이면 중간이 죽지 않습니다.
어두운 쪽이 너무 빨리 어두워져요
사람 눈은 밝기를 균등하게 느끼지 않습니다. 숫자로는 고르게 나눠도 어두운 구간이 더 급하게 느껴집니다. 이럴 때는 단계를 늘리고 필요한 구간의 색만 골라 쓰는 편이 자연스럽습니다.
두 색은 어떻게 정하나요
색상 원을 눌러 직접 고르거나, 이미 아는 색 값이 있다면 #RRGGBB 형태로 입력하면 됩니다.
- 브랜드 팔레트를 만들 때 — 브랜드 색의 아주 밝은 버전과 아주 진한 버전을 양 끝에 두세요
- 그래프 색을 정할 때 — 서로 충분히 구분되는 두 색을 고르고 항목 수만큼 단계를 나누세요
- 회색 계열이 필요할 때 — 흰색과 검정 대신 아주 연한 색과 아주 진한 색을 쓰면 화면이 덜 딱딱해 보입니다
단계 수를 더 늘리고 싶어요
한 번에 나눌 수 있는 단계는 8·12·16·20 중에서 고릅니다. 더 잘게 나눠야 한다면 구간을 쪼개서 두 번 뽑으세요.
예를 들어 40단계가 필요하면, 시작색에서 중간색까지 20단계·중간색에서 끝색까지 20단계를 각각 뽑아 이어 붙이면 됩니다.
이 도구로는 안 되는 것
- CSS 그라데이션 코드를 만들지 않습니다. 색 값만 뽑아 줍니다
- 세 가지 이상의 색을 한 번에 섞을 수 없습니다 — 두 색씩 나눠 뽑아 이어 붙이세요
- 기준 색에서 어울리는 조합을 찾으려면 컬러 팔레트 생성기
- 사진에서 색을 뽑으려면 색상 코드 추출
용어 설명
- HEX 코드
색을
#RRGGBB여섯 자리로 적는 방식입니다. 앞에서부터 두 자리씩 빨강·초록·파랑의 세기를 16진수로 나타냅니다. 웹에서 가장 널리 쓰입니다.- 선형 보간
시작값과 끝값 사이를 일정한 간격으로 나누는 계산입니다. 두 색 사이 중간색을 만들 때 가장 기본이 되는 방식입니다.
컬러 믹서 자주 묻는 질문
색을 20단계보다 잘게 쪼갤 수는 없나요?
지금은 눈으로 구분하기 좋고 실무에서 자주 쓰이는 8·12·16·20단계를 제공합니다. 더 잘게 나눠야 한다면 구간을 둘로 쪼개 두 번 뽑아 이어 붙이시면 됩니다. 앞으로 더 세밀한 스텝 조절 기능을 검토 중입니다.
HEX 코드 외에 RGB나 HSL 코드로는 복사할 수 없나요?
오른쪽 위 '복사 형식'에서 HEX와 RGB 중 하나를 고를 수 있습니다. HEX를 고르면 #7B2A72처럼, RGB를 고르면 rgb(123, 42, 114) 형태로 복사되어 CSS에 그대로 붙여넣을 수 있습니다. HSL 형식은 아직 지원하지 않으며, 복사한 HEX 코드는 포토샵, 일러스트레이터, 피그마 등 대부분의 디자인 프로그램에 바로 붙여넣어 사용할 수 있습니다.
두 색을 어떤 방식으로 섞어서 중간색을 계산하나요?
두 색의 R, G, B 값을 각각 따로 놓고 시작값에서 끝값 사이를 설정한 단계 수만큼 균등하게 나누는 선형 보간(linear interpolation) 방식을 씁니다. 중간값이 어긋나지 않고 눈으로 예상한 대로 나와서, 색 단계를 만들 때 가장 표준적으로 쓰이는 방법입니다. 예를 들어 검정에서 흰색으로 8단계를 뽑으면 #242424·#494949·#6D6D6D·#929292·#B6B6B6·#DBDBDB가 사이에 놓입니다. 고를 수 있는 단계 수가 모두 짝수라 딱 절반인 #808080 칸은 나오지 않습니다.
컬러 믹스 결과를 CSS 그라데이션에 그대로 쓸 수 있나요?
쓸 수 있습니다. 복사되는 값이 #RRGGBB 또는 rgb(r, g, b) 형태라 linear-gradient 안에 그대로 넣으면 됩니다. 다만 두 색만 이어지는 배경이라면 CSS에 시작색과 끝색만 적어도 브라우저가 알아서 이어 주므로 굳이 단계를 뽑을 필요가 없습니다. 컬러 믹스로 뽑은 단계가 필요한 쪽은 그래프 계열색이나 50~900 같은 팔레트 토큰처럼 칸마다 확정된 색 코드가 있어야 하는 경우입니다.
물감 섞기와 화면에서의 색상 혼합은 결과가 다른가요?
다릅니다. 물감은 빛을 걷어내며 섞이는 방식이라 파랑과 노랑을 섞으면 초록이 되지만, 화면은 빛을 더하는 방식이라 같은 두 색의 중간을 잡으면 #808080 회색이 나옵니다. 이 도구는 화면 기준(RGB)으로 계산하므로 결과도 화면에서 보는 색입니다. 인쇄물이나 실제 물감 배합을 예상하는 용도로는 맞지 않습니다.
빨강과 초록을 섞었더니 중간이 탁한 갈색으로 죽어버립니다. 왜 그런가요?
두 색의 R·G·B 값을 그대로 평균 내기 때문입니다. RGB에서 정반대인 쌍(빨강↔시안, 파랑↔노랑)은 중간이 정확히 회색 #808080이 되고, 빨강↔초록처럼 어긋난 쌍은 탁한 올리브색 #808000이 됩니다. 어느 쪽이든 중간이 죽어 보이죠. 이럴 때는 중간에 경유색을 하나 두고 두 번 나눠 섞으세요. 빨강에서 곧장 파랑으로 가는 대신 빨강→자주, 자주→파랑 구간을 각각 뽑아 이어 붙이면 중간이 죽지 않는 그라데이션이 됩니다.
마지막 업데이트: