틴트·쉐이드 생성기

이 도구 소개

틴트 & 쉐이드 생성기는 기본 색상에서 더 밝고 어두운 변형을 만듭니다. 틴트는 기본 색상에 흰색을 혼합하여(밝기 추가) 만들고, 쉐이드는 검정을 혼합하여(밝기 감소) 만듭니다.

최대 5단계의 틴트와 5단계의 쉐이드, 그리고 원본 기본 색상을 생성하여 선택한 색상을 중심으로 한 11단계 팔레트를 제공합니다. 각 스왓치를 클릭하면 헥스 코드를 복사할 수 있습니다.

사용 방법

1. 색상 선택기를 사용하거나 헥스 코드를 입력하여 기본 색상을 선택하세요.
2. 샘플 버튼으로 사전 설정 색상을 빠르게 시험해 보세요.
3. 단계 수(3–5)를 조정하여 팔레트 폭을 제어하세요.
4. 스왓치를 클릭하여 헥스 코드를 복사하거나, 모두 복사를 클릭하세요.

활용 사례

디자인 시스템은 각 브랜드 색상에 체계적인 색상 스케일이 필요합니다. UI 디자이너는 단일 동작 색상에서 호버, 활성 및 비활성 상태를 생성하고, 프론트엔드 개발자는 일관된 버튼, 배지 및 카드 색상 변형을 만듭니다.

자주 묻는 질문

• 틴트와 쉐이드의 차이점은 무엇인가요? — 틴트는 흰색과 혼합하여(밝게), 쉐이드는 검정과 혼합합니다(어둡게). 톤은 회색과 혼합되며 여기서는 생성되지 않습니다.
• 단계는 어떻게 계산되나요? — 각 단계는 기본 색상을 흰색 또는 검정과 10%, 30%, 50%, 70%, 90% 비율로 혼합하여 일관된 시각적 단계를 제공합니다.
• CSS 변수를 얻을 수 있나요? — 출력은 헥스 코드입니다. --color-500, --color-400 등으로 CSS에 붙여넣을 수 있습니다.