색상 블렌딩
🎨 색상두 색을 지정하면 그 사이 중간 색상들을 단계별로 산출합니다.
중간색
#95639D
#3B82F6
#5978D8
#776DBB
#95639D
#B3597F
#D14E62
#EF4444
--blend-0: #3B82F6; --blend-1: #5978D8; --blend-2: #776DBB; --blend-3: #95639D; --blend-4: #B3597F; --blend-5: #D14E62; --blend-6: #EF4444;
🎨 색상 블렌더란?
색상 블렌더는 두 색상 사이의 중간 색을 자동으로 생성하는 도구입니다. 시작 색상과 끝 색상을 선택하고 단계 수를 지정하면, 부드럽게 변화하는 색상 시퀀스를 얻을 수 있습니다. 그라데이션 디자인, 색상 팔레트 제작, UI 테마 설계 등 다양한 용도로 활용됩니다. 생성된 색상은 HEX 코드로 제공되며, CSS 변수로 바로 복사하여 사용할 수 있습니다.
🎨 디자인 팁
시작색을 brand-500으로 잡고 9단계로 뽑으면 Tailwind의 100~900 톤이 한 번에 만들어져 디자인 토큰 정의가 깔끔해집니다.
📊 블렌딩 방식 비교
| 방식 | 설명 | 특징 |
|---|---|---|
| RGB 선형 보간 | R, G, B 각 채널을 선형 보간 | 가장 기본적, 중간에 어두워질 수 있음 |
| HSL 보간 | 색상, 채도, 명도를 개별 보간 | 자연스러운 색상 전환 |
| LAB 보간 | 인간 시각 기반 색공간에서 보간 | 지각적으로 균일한 변화 |
| HCL 보간 | 색상-채도-명도 원통 좌표계 | 선명도 유지, 디자인에 적합 |
💡 색상 블렌딩 활용 팁
- Tailwind 스케일 재현: 시작색을 brand-500으로 잡고 9단계로 뽑으면 100~900까지의 톤이 자연스럽게 만들어져 디자인 토큰 정의가 한 번에 끝납니다.
- 호버/액티브 상태: 기본 버튼 색을 시작, 같은 색의 명도 -15%를 끝으로 두고 3단계만 뽑으면 정중앙 색이 hover, 끝이 active로 그대로 쓰입니다.
- 데이터 시각화: 라이트한 베이지 → 진한 인디고처럼 명도/채도 차이가 큰 두 색을 7단계로 잘라 heat map 범례를 만들면 시선이 자연스럽게 흘러갑니다.
- 다크모드 페어링: 라이트 모드의 brand 색을 시작점, 다크 배경에서 잘 보이는 같은 색조의 채도 낮은 버전을 끝점으로 두면 모드별 토큰 매핑이 쉬워집니다.
- 그라데이션 부드럽게: linear-gradient에 시작/끝만 넣으면 중간에 회색 띠가 보일 때가 있는데, 5단계 색을 stop으로 모두 넣어주면 띠가 사라집니다.
🧪 두 색을 고를 때 체크할 것
블렌딩 결과의 품질은 출발/도착 색의 채도 차이와 색조 거리에 크게 좌우됩니다. 색조가 180° 떨어진 보색(예: 파랑-주황)은 RGB 보간 시 중간이 탁한 회갈색으로 빠지기 쉬워 HSL을 권장하며, 색조 차이가 60° 이하인 인접 색은 어떤 방식으로 보간해도 결과가 안정적입니다. 또한 명도(L) 차이가 40 이상 벌어져야 단계가 시각적으로 구별되며, 차이가 10 미만이면 사람 눈에는 같은 색으로 보일 수 있다는 점도 고려하세요.
자주 묻는 질문
RGB 블렌딩 시 중간 색상이 어두워지는 이유는?▼
RGB 선형 보간은 두 색상의 각 채널을 평균내므로, 보색 관계의 색상(빨강-청록 등)을 혼합하면 회색에 가까워집니다. 이를 피하려면 HSL/LAB 보간 방식을 사용하거나, 중간에 보조 색상을 하나 더 끼워 stop을 늘리는 방법이 있습니다.
몇 단계의 중간색이 적당한가요?▼
용도에 따라 다릅니다. 버튼 호버 효과는 2~3단계, 색상 팔레트는 5~9단계, 데이터 시각화 범례는 7~11단계가 일반적입니다. Tailwind 호환을 노린다면 11단계(50, 100~900, 950)가 표준입니다.
CSS 변수로 어떻게 활용하나요?▼
:root에 --blend-0, --blend-1 등으로 선언하고, var(--blend-3) 형태로 사용합니다. Tailwind에서는 extend colors로 등록하여 bg-blend-3 등으로 활용 가능합니다. CSS-in-JS라면 객체로 매핑해 theme.colors.brand[300] 같은 접근도 가능합니다.
같은 두 색인데 결과가 매번 다른가요?▼
아닙니다. 블렌딩은 결정론적이라 입력과 단계가 같으면 항상 동일한 출력이 나옵니다. 결과가 다르게 보인다면 모니터 캘리브레이션이나 다크/라이트 모드 차이일 가능성이 큽니다.