중간색
#95639D
#3B82F6
#5978D8
#776DBB
#95639D
#B3597F
#D14E62
#EF4444
#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 변수로 바로 복사하여 사용할 수 있습니다.
📊 블렌딩 방식 비교
| 방식 | 설명 | 특징 |
|---|---|---|
| RGB 선형 보간 | R, G, B 각 채널을 선형 보간 | 가장 기본적, 중간에 어두워질 수 있음 |
| HSL 보간 | 색상, 채도, 명도를 개별 보간 | 자연스러운 색상 전환 |
| LAB 보간 | 인간 시각 기반 색공간에서 보간 | 지각적으로 균일한 변화 |
| HCL 보간 | 색상-채도-명도 원통 좌표계 | 선명도 유지, 디자인에 적합 |
💡 색상 블렌딩 활용 팁
- 브랜드 컬러 확장: 주요 색상에서 밝은/어두운 변형 생성
- 데이터 시각화: 차트 색상 범위를 부드럽게 연결
- 호버 효과: 버튼의 기본/호버 상태 색상 생성
- 테마 색상: primary-100부터 primary-900까지 일관된 스케일
- 그라데이션 배경: CSS gradient에 중간 색상 추가로 부드러운 효과
자주 묻는 질문
RGB 블렌딩 시 중간 색상이 어두워지는 이유는?▼
RGB 선형 보간은 두 색상의 각 채널을 평균내므로, 보색 관계의 색상(빨강-청록 등)을 혼합하면 회색에 가까워집니다. 이를 피하려면 HSL/LAB 보간 방식을 사용하세요.
몇 단계의 중간색이 적당한가요?▼
용도에 따라 다릅니다. 버튼 호버 효과는 2~3단계, 색상 팔레트는 5~9단계, 데이터 시각화 범례는 7~11단계가 일반적입니다.
CSS 변수로 어떻게 활용하나요?▼
:root에 --blend-0, --blend-1 등으로 선언하고, var(--blend-3) 형태로 사용합니다. Tailwind에서는 extend colors로 등록하여 bg-blend-3 등으로 활용 가능합니다.