CodeKitHub이 도구는 무엇인가요?
색상 믹서는 선택한 비율로 두 색상의 빨강, 초록, 파랑 채널을 선형 보간합니다. 이는 그러데이션이 내부적으로 사용하는 것과 동일한 계산 방식입니다. 0%에서는 결과가 색상 A, 100%에서는 색상 B가 되며, 50%에서는 각 RGB 채널의 산술적 중간값이 됩니다.
이는 실제 물감을 섞는 것(감산 혼합이며 안료에 따라 달라짐)과는 다르며, HSL 공간에서 평균을 내는 것과도 같지 않습니다 — RGB 선형 보간은 CSS 그러데이션, 디자인 도구, 그리고 대부분의 "두 색상 사이의 색상" 유틸리티가 사용하는 방식이므로, 결과는 브라우저에서 동일한 두 색상 사이의 그러데이션을 볼 때와 일치합니다.
왜 사용해야 할까요?
- 무작위로 조정값을 추측하는 대신, 기본 색상과 강조 색상 사이에 자연스럽게 위치하는 호버 또는 활성 상태 색상을 찾으세요.
- 그러데이션 스크린샷을 눈대중으로 보는 대신 원하는 비율에서 정확한 HEX 코드를 확인하세요.
- 11단계 램프는 클릭 한 번으로 한 색상에서 다른 색상까지 완전한 팔레트를 생성하며, 데이터 시각화나 다중 포인트 그러데이션에 유용합니다.
- 아무 단계나 클릭하면 즉시 해당 HEX 코드가 복사됩니다.
- 무료, 즉시, 완전히 로컬에서 실행 — 업로드 불필요, 계정 불필요.
사용 방법
- 색상 선택기를 사용하거나 HEX 코드를 입력하여 색상 A와 색상 B를 선택하세요.
- 비율 슬라이더를 드래그하여 색상 B를 얼마나 섞을지 설정하세요.
- 스와치 위에서 결과 HEX 및 RGB 값을 확인하세요.
- 아래 11단계 램프에서 아무 스와치나 클릭하여 HEX 코드를 복사하세요.
예시
입력
색상 A #3B82F6 (파랑), 색상 B #F59E0B (앰버), 비율 50%결과
#9B9E7D — rgb(155, 158, 125)정확히 50%일 때 각 RGB 채널은 두 입력 색상의 해당 채널의 산술 평균입니다.
자주 묻는 질문
왜 이것이 실제 물감을 섞었을 때와 다른가요?
물감 혼합은 감산 방식(안료가 빛을 흡수함)이며 관련된 특정 안료에 따라 달라집니다 — 예를 들어 파란색과 노란색 물감을 섞으면 초록색이 됩니다. 이 도구는 빛(RGB 채널)을 가산적/선형적으로 섞으며, 이는 화면, CSS 그러데이션, 대부분의 디지털 디자인 도구가 색상을 결합하는 방식입니다. 두 시스템은 오류가 아니라 설계상 실제로 다른 결과를 만들어냅니다.
이것은 두 색상 사이의 CSS linear-gradient와 같은가요?
네 — CSS의 linear-gradient(색상A, 색상B)는 이 도구와 동일한 방식으로 RGB 채널을 보간하므로, 해당 그러데이션의 중간 지점에서 보이는 색상은 여기의 50% 결과와 일치합니다.
혼합된 색상이 때때로 탁하거나 회색빛으로 보이는 이유는 무엇인가요?
채도는 높지만 색상이 매우 다른 두 색(파랑과 주황처럼 거의 보색인 경우)을 RGB 공간에서 섞으면 채도가 낮고 회갈색을 띠는 중간값이 나오는 경우가 많습니다 — 이는 버그가 아니라 RGB 보간의 실제 특성입니다. 더 선명한 혼합을 원한다면 색상환에서 서로 더 가까운 색을 시도하거나, 채도를 높게 유지하면서 색조를 조정하여 HSL 공간에서 혼합해 보세요(이 단순 RGB 믹서는 그렇게 하지 않습니다).
한 번에 두 개 이상의 색상을 섞을 수 있나요?
한 단계에서는 불가능합니다 — 이 도구는 정확히 두 색상만 혼합합니다. 세 가지를 결합하려면 처음 두 색상을 원하는 비율로 섞고 결과를 복사한 다음, 이를 세 번째 색상에 대한 새로운 색상 A로 붙여넣으세요. 단계적으로 진행하면 단일 3방향 평균으로는 얻을 수 없는 각 색상의 가중치 조절도 가능합니다.
이 도구를 사용해야 할까요, 아니면 색상 명암 생성기를 사용해야 할까요?
브랜드 블루와 앰버 강조색 사이의 전환 색상처럼 서로 다른 두 색상 사이에 위치하는 색상이 필요하다면 이 믹서를 사용하세요. 하나의 색상에서 더 밝고 어두운 변형(호버 상태, 배경, Tailwind 스타일 50-900 램프 등)이 필요하다면 대신 색상 명암 생성기를 사용하세요. 이 도구는 색조와 채도를 고정하고 명도만 변화시키므로 모든 결과가 명확하게 동일한 색상군에 유지됩니다.
입력 필드에 어떤 색상 형식을 입력할 수 있나요?
텍스트 필드는 앞에 #가 있든 없든 6자리 HEX 코드를 허용합니다(예: 3B82F6 또는 #3B82F6). 3자리 축약형 HEX, rgb() 표기법, CSS 색상 이름은 여기서 파싱되지 않습니다 — 하지만 각 필드 옆의 기본 색상 선택기를 사용하면 시각적으로 원하는 색상을 선택할 수 있으며, HEX 필드가 그에 맞춰 자동으로 업데이트됩니다.