본문으로 건너뛰기
AZ Tools

컬러 믹서

두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.

결과

#8033B3

11단계 블렌드

0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

LAB이 지각적으로 가장 균일한 그라데이션. RGB·HSL은 빠르지만 중간이 불균일해 보일 수 있음.

사용법

  1. 색상 A·B 설정(hex 또는 색 선택기).
  2. RGB·HSL·LAB 블렌딩 선택.
  3. 비율 슬라이드 또는 11단계 스트립 확인.

자세한 설명

펼치기

색 두 개와 섞는 비율(0~100%)을 고릅니다. 툴은 고른 색 공간에서 둘 사이를 보간합니다. 산수가 가장 단순한 RGB, 색상을 유지하는 HSL, 지각적으로 균일한 전이를 주는 CIELAB 중에서 고를 수 있고, 결과와 함께 11단계 그라데이션 띠를 보여 줍니다. 중간 강조색을 고르거나, 그라데이션의 색 정지점을 만들거나, 두 색이 가운데에서 왜 탁해 보이는지 확인할 때 씁니다(대개 RGB 중간값이 지각적으로 절반이 아니기 때문입니다).

탁한 중간에는 분명한 원인이 있습니다. sRGB 값은 빛에 비례하는 것이 아니라 감마로 인코딩되어 있어서, 두 값을 평균 내면 밝기가 아니라 인코딩을 평균 내게 됩니다. 순수한 빨강과 순수한 초록을 RGB에서 섞으면 빛 자체를 섞었을 때 나올 노랑과는 전혀 다른 어두운 올리브가 나오고, 빨강에서 초록으로 가는 그라데이션이 가운데에서 죽은 구간을 지나는 이유도 같은 지름길 때문입니다. 선형 빛에서 보간하면 그것을 피할 수 있고, CIELAB에서 보간하면 그것도 피하면서 단계 간격까지 눈에 고르게 유지됩니다.

HSL 보간에는 자기 함정이 있는데, 색상이 각도라는 점입니다. 0의 빨강에서 240의 파랑으로 갈 때 노랑과 초록을 지나 앞으로 갈 수도, 자홍을 지나 뒤로 갈 수도 있고, 두 경로는 완전히 다른 그라데이션을 만듭니다. 대부분의 구현은 짧은 호를 택하는데, 대개 옳고 가끔은 원하던 것과 정반대입니다.

고르게 보이는 띠가 CIELAB이 사 주는 것입니다. RGB에서의 같은 간격은 겉보기에서 같은 간격이 아니므로, 두 색 사이의 선형 경사는 한쪽 끝에서 머뭇거리고 다른 쪽에서 내달리는 것처럼 보일 수 있습니다. 이 공간은 주어진 수치적 거리가 어디에서나 대략 같은 지각 차이에 대응하도록 설계되었습니다.

이 중 무엇도 물감이 행동하는 방식은 아닙니다. 안료를 섞는 것은 감산이라 파랑과 노랑이 초록을 주지만, 빛을 섞는 것은 가산이라 같은 짝이 옅은 회색을 줍니다. 여기의 모든 공간은 화면이 내보내는 것, 즉 빛을 모형화하므로, 이렇게 고른 색은 팔레트 위에서 일어나는 일과 맞지 않습니다.

자주 묻는 질문

왜 RGB 블렌드는 중간이 탁해 보이나요?

RGB는 채널 값 직접 평균. 채도 높은 빨강에서 채도 높은 파랑으로 가는데 녹색 채널이 0에 머물러 중간이 저채도 보랏빛 회색. 중간 채도 유지하려면 HSL 또는 LAB 시도.

LAB을 언제 사용?

LAB은 지각적 균일 — 같은 수치 간격이 같은 지각 간격으로 보임. 그라데이션 부드러움 중요할 때 최적. 모던 브라우저 CSS color-mix(in lab, …)도 동일.

HSL에서 두 색이 반대일 때 색조는?

HSL은 색상환 짧은 호 선택. 빨강(0°)과 청록(180°) 혼합은 모호 — 도구가 한 방향 선택; 결과가 예상 밖이면 LAB 시도.

50% 혼합이 시각적으로 정확히 중간이 아닌 이유?

LAB만 지각적 중간 결과 제공. RGB·HSL 중간점은 수학적 중간 — 종종 두 끝점 중 어두운 쪽에 지각적으로 더 가까움.

관련 도구