색상 혼합기이란?
비율 슬라이더로 두 가지 색상을 혼합하고 결과를 실시간으로 확인하세요. HEX, RGB, HSL 값을 코드나 디자인 도구에 바로 복사할 수 있습니다.
두 색을 고르고 혼합 모드(RGB, RYB, LAB, LCH, HSL, OKLCH)를 선택한 뒤 0%에서 100%까지 비율 슬라이더를 움직입니다. RGB는 화면 색공간에서 바로 평균을 내므로 가장 빠르지만 중간점이 탁해질 수 있습니다. RYB는 실제 물감처럼 섞여서 파랑과 노랑은 초록, 빨강과 노랑은 주황이 됩니다. LAB와 LCH는 지각 색공간에서 섞어 색조 전환이 더 부드럽고, OKLCH는 CSS color-mix 사양에 맞춘 최신 지각 모델로 중간색이 가장 자연스럽게 보이는 경우가 많습니다. 결과는 HEX, RGB, HSL, CMYK와 가장 가까운 색 이름은 물론, 흰색·검은색 배경에 대한 WCAG 대비 값과 복사 가능한 CSS 선형 그라데이션까지 함께 출력됩니다. 25 / 50 / 75% 빠른 버튼으로 자주 쓰는 혼합 지점에 곧바로 이동할 수 있습니다.
사용 방법
- 1단계 — 색상 선택기를 사용하거나 HEX 값을 입력하여 첫 번째 색상을 선택하세요.
- 2단계 — 두 번째 색상을 선택한 다음, 혼합 비율 슬라이더를 조절하세요 (0% = 첫 번째 색상만, 100% = 두 번째 색상만).
- 3단계 — 혼합 결과를 색상 코드와 함께 확인하고 필요한 값을 복사하세요.
사용 시기
- 브랜드 색을 흰색 또는 회색과 섞어 호버/비활성 버튼 상태 만들기.
- CSS 그라데이션 중간 지점을 만들어 가운데가 탁해지지 않도록 하기.
- 브랜드 두 색을 낮은 비율로 섞어 부드러운 알림용 액센트 만들기.
결과
디자이너가 브랜드 블루(#2196F3)와 화이트(#FFFFFF)를 30%로 혼합하여 UI 키트의 호버 상태에 사용할 은은한 색조(#A1C9F8)를 만듭니다.
자주 묻는 질문
- 보통은 어떤 혼합 모드를 선택해야 하나요?
- 빌드 파이프라인이 지원한다면 OKLCH가 최선의 선택입니다. 지각적으로 가장 균일하고, 최신 CSS color-mix 사양과도 맞물려 있습니다. 그다음은 LAB로, 디자인 도구에서의 지원도 넓습니다. 두 색의 밝기가 비슷하면 RGB로 충분하고, LCH는 채도 보존이 가장 좋으며, HSL은 부드러운 보간보다 색조 회전에 어울립니다.
- RGB의 중간점이 가끔 회색이나 탁한 색으로 보이는 이유는?
- RGB는 지각이 아니라 숫자를 평균합니다. 파랑과 주황 같은 보색은 R, G, B 채널이 서로 상쇄되어 결과가 채도가 낮은 회색이 됩니다. LAB 또는 LCH로 바꾸면 중간점의 채도가 유지됩니다. 실제 물감을 섞은 것과 같은 결과를 원한다면 RYB 모드를 쓰세요. 파랑과 노랑을 회색이 아니라 초록으로 섞어 줍니다.
- CSS `color-mix()`와는 무엇이 다른가요?
- color-mix()는 최신 브라우저에 내장되어 srgb, lab, oklab, lch, oklch에서 동작합니다. 본 도구는 구버전 스타일시트에 그대로 붙여 넣을 수 있는 HEX를 반환하고, 비율을 추측하지 않도록 시각 슬라이더를 제공합니다.
- 두 가지 이상의 색을 혼합할 수 있나요?
- 한 번에는 안 되지만 연쇄 사용은 가능합니다. A와 B를 섞어 C를 만든 뒤 C와 D를 다시 섞으세요. 세 색의 부드러운 그라데이션이 필요하다면 A→B를 50%로, B→C를 50%로 섞어 두 중간점을 원래의 B 양쪽 그라데이션 스톱으로 사용하면 됩니다.
- 비율 0%와 100%는 각각 무엇을 뜻하나요?
- 0%는 Color 1 그대로, 100%는 Color 2 그대로, 50%는 중간점입니다. 슬라이더는 1% 단위로 움직이므로 틴트와 셰이드를 세밀하게 조정할 수 있고, UI 상태 디자인에서는 10%와 15% 혼합의 느낌이 분명히 다르게 다가옵니다.