컬러 믹서
두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.
결과
#8033B3
11단계 블렌드
LAB이 지각적으로 가장 균일한 그라데이션. RGB·HSL은 빠르지만 중간이 불균일해 보일 수 있음.
사용법
- 색상 A·B 설정(hex 또는 색 선택기).
- RGB·HSL·LAB 블렌딩 선택.
- 비율 슬라이드 또는 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 중간점은 수학적 중간 — 종종 두 끝점 중 어두운 쪽에 지각적으로 더 가까움.
관련 도구
CSS color-mix() 미리보기 (보간 공간 비교)
모던 CSS color-mix() 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab 등)에 따라 어떻게 다르게 섞는지 비교 — 실시간 스와치와 복사 가능한 CSS.
색상·CSS
색 밝기 비교 (HSL vs Lab L* vs WCAG vs HSP)
HSL 명도, HSV 값, WCAG 상대 휘도, CIE L*, Rec. 709 루마, HSP, (R+G+B)/3 등 7가지 밝기 척도로 한두 색을 비교해, 더 밝아 보여야 할 색이 왜 어두워 보이는지 확인합니다.
색상·CSS
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상·CSS
컬러 보간 / 그라데이션 스텝
두 헥스 컬러 → N개 이산 중간 스텝 — sRGB·linear RGB·OKLab·HSL — 옵션 이징.
색상·CSS
Conic Gradient 생성기
CSS conic-gradient() 비주얼 빌더 — 회전 각도·중심 위치·컬러 스톱·도형 미리보기. 파이 차트·링 차트·체커보드 패턴·컬러 휠에 유용.
색상·CSS
CMYK ↔ RGB 색상 변환기 (인쇄용)
화면용 RGB/hex 색상을 인쇄용 CMYK 퍼센트로 (또는 그 반대로) 변환합니다. Simple, GCR (그레이 성분 대체), UCR (언더컬러 제거) 블랙 생성 방식과 채널 분판 미리보기, 총 잉크 커버리지 표시를 지원합니다.
색상·CSS