두 색 → N단계 중간 그라데이션 자동 생성. RGB·HSL·OKLCH 3가지 보간 방식 비교 가능.
🎨 블렌드 결과 한 칸 클릭 = HEX 복사
3가지 보간 방식 비교
CSS 그라데이션
색 배열 (JSON)
컬러 블렌더 사용법
- 시작 색과 끝 색 두 가지를 선택합니다.
- 중간 단계 수를 슬라이더로 조정합니다 (3~20).
- OKLCH·RGB·HSL 세 가지 보간 방식 중 선택합니다.
- 한 칸 클릭으로 HEX 코드를 복사하거나 전체를 CSS·JSON으로 export합니다.
주요 기능
- 3가지 보간 방식 (OKLCH 추천 / RGB Linear / HSL)
- 3~20단계 자유 조절
- 세 가지 방식 동시 시각 비교
- CSS
linear-gradient()+ HEX 배열 JSON 동시 export - 한 칸 클릭 즉시 복사
활용 예시
- 데이터 시각화 — heatmap·choropleth 차트 색상 단계
- 스플릿 그라데이션 — 정확한 N단계 컬러로 분할된 영역
- 스토리북 디자인 토큰 — 두 브랜드 색 사이 자동 보간
- 색약자 그라데이션 — OKLCH로 인지적 균일하게
- SVG 그라데이션 stops — 정확한 N개 stop 컬러
왜 보간 방식이 중요한가요?
RGB Linear 보간은 두 색의 R·G·B 값을 단순 평균합니다. 빠르지만 중간에 회색 띠가 생기는 경우가 많습니다(보색 보간 시). HSL 보간은 색조를 따라가지만 채도/밝기 균일성이 떨어집니다. OKLCH 보간은 인간 시각에 균일해서 모든 중간색이 자연스럽게 이어집니다 — 2024년 모던 디자인 시스템의 기본 추천입니다. Tailwind v4, Chrome color-mix(in oklch)도 OKLCH 보간을 사용합니다.
자주 묻는 질문
color-mixer와 뭐가 다른가요?
color-mixer는 두 색의 한 가지 중간값(슬라이더로 비율 조정)을 출력합니다. 본 도구는 N단계 그라데이션(여러 중간색을 한 번에)을 출력합니다.
OKLCH가 항상 좋은가요?
대부분의 경우 자연스럽지만, 명확한 채도 단계를 원할 때는 HSL이 더 적합할 수 있습니다. 세 가지 다 미리보기로 확인하세요.
20단계 이상 만들 수 있나요?
현재는 최대 20단계로 제한했습니다. 더 많은 단계는 CSS linear-gradient()로 직접 그릴 수 있습니다.
무료?
네, 모든 처리는 브라우저에서 진행되며 회원가입 없이 무제한 사용 가능합니다.