색상 믹서

두 색을 섞어 중간 색과 단계별 그러데이션을 만듭니다. RGB 값을 그냥 평균 내지 않고 감마를 되돌린 뒤 섞어 눈에 보이는 대로 자연스럽게 이어집니다. 두 색의 대비비도 함께 알려 줍니다.

색 고르기

색상 믹서는 두 색을 섞어 중간 색과 단계별 그러데이션을 만듭니다. RGB 값을 그냥 평균 내지 않고 감마를 되돌린 뒤 섞기 때문에 눈에 보이는 밝기가 자연스럽게 이어집니다. 두 색의 대비비도 함께 계산해 글자로 써도 되는지 알려 줍니다.

색상믹서 사용 방법

  1. 두 색을 고릅니다. 색상판을 누르거나 헥스 코드를 직접 넣을 수 있습니다.
  2. 단계 수를 조절하면 그러데이션이 그만큼 나뉩니다.
  3. 색을 누르면 헥스 코드가 복사됩니다. 전체 복사로 한 번에 가져갈 수도 있습니다.

지원 형식과 입력 조건

섞는 방식
감마 보정(권장) · 단순 평균. 두 결과를 함께 비교해 줍니다
단계
2 ~ 21 단계
대비비
WCAG 기준으로 계산해 본문 글자로 쓸 수 있는지 알려 줍니다
입력
색상판 또는 헥스 코드(#RGB · #RRGGBB)

감마 보정이 왜 필요한가요

  • 화면의 RGB 값은 밝기에 정비례하지 않습니다. 사람 눈의 특성에 맞춰 값이 휘어 있습니다(감마).
  • 그래서 검정(#000000)과 흰색(#FFFFFF)의 중간을 단순 평균하면 #808080 이 나오는데, 눈에는 중간보다 어둡게 보입니다.
  • 감마를 되돌려 섞으면 #BCBCBC 가 나오고, 이쪽이 실제로 중간 밝기로 보입니다.
  • 이 차이는 밝기가 크게 다른 두 색을 섞을 때 특히 두드러집니다. 그러데이션 중간이 탁해 보인다면 대개 이 문제입니다.

대비비 읽는 법

  • 4.5 : 1 이상이면 본문 글자로 써도 읽힙니다(WCAG AA).
  • 3 : 1 이상이면 큰 글자(18pt 이상 또는 굵은 14pt)에만 쓸 수 있습니다.
  • 검정과 흰색의 대비비는 21 : 1 로 가장 높습니다.
  • 브랜드 색을 정할 때 이 값을 먼저 확인하면 나중에 접근성 때문에 다시 만드는 일을 줄일 수 있습니다.

자주 묻는 질문

물감 섞는 것과 결과가 다릅니다.

화면의 색은 빛을 더하는 방식(RGB)이고 물감은 빛을 빼는 방식(CMY)입니다. 파랑과 노랑을 화면에서 섞으면 초록이 아니라 회색에 가깝게 나옵니다.

어느 방식을 써야 하나요?

눈에 보이는 그러데이션이 목적이면 감마 보정을 쓰세요. 다른 도구와 값을 맞춰야 하면 단순 평균이 필요할 수 있습니다.