틴트 & 셰이드

이 도구 소개

틴트 & 셰이드 생성기는 기준 색에서 흰색을 섞은 밝은 틴트와 검정을 섞은 어두운 셰이드를 5, 10, 20단계로 만들고 CSS 변수로 출력합니다.

사용 방법

1. 기준 색을 고릅니다.
2. 5, 10, 20단계 중 하나를 선택합니다.
3. 견본을 클릭하면 HEX 값이 복사됩니다.
4. CSS 변수로 복사를 눌러 전체 스케일을 내보냅니다.

알아두면 좋은 점

• 틴트는 색에 흰색을 섞은 것이고, 셰이드는 색에 검정을 섞은 것입니다.
• RGB에서 같은 간격으로 섞으므로 단계마다 색이 같은 양만큼 바뀝니다.
• Tailwind 같은 디자인 시스템은 각 브랜드 색의 틴트와 셰이드로 50–900 스케일을 만듭니다.
• 스케일의 중간 단계는 흰 배경에서 WCAG AA를 통과하지 못하는 경우가 많으므로, 스케일에서 글자색을 고를 때는 대비를 확인하세요.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문