Tint·Shade·Tone (색 변형 팔레트)

사용법

1. 기준 색 선택 (또는 프리셋)
2. 단계 수 조정 (보통 10단계)
3. 최대 변형 비율
4. Tint·Shade·Tone 3종 팔레트 자동 생성
5. CSS 변수 복사 또는 PNG 다운로드

주요 기능

• Tint (밝게) + Shade (어둡게) + Tone (탁하게) 3종
• 단계 5~20개 자유 조정
• 5가지 프리셋 (핑크·블루·그린·옐로·퍼플)
• CSS 변수 자동 생성 (--color-50, --color-100 등)
• Tailwind·Material 디자인 표준 단계

활용 예시

• UI 디자인 시스템 — 브랜드 컬러 50~900 단계
• 다크 모드 — 같은 색의 어두운 변형
• 차트 그라데이션 — 데이터 시각화
• 호버·active 상태 — 단계별 색 변경
• 일러스트 음영 — 하나의 색에서 하이라이트·그림자

Tint·Shade·Tone 차이

색채 이론에서 같은 색의 변형 3가지: (1) Tint(틴트)는 흰색을 섞어 밝고 부드럽게. (2) Shade(셰이드)는 검정을 섞어 어둡고 깊게. (3) Tone(톤)은 회색을 섞어 채도 낮춰 차분하게. Tailwind CSS의 50~900 단계가 이 원리 — 50이 가장 밝은 Tint, 900이 가장 진한 Shade.

자주 묻는 질문