이 도구에 대해
셰이드와 틴트는 사용 가능한 UI 색상 시스템의 기초입니다. 브랜드 색상 하나만으로는 충분한 경우가 거의 없습니다. 배경, 호버 상태, 은은한 채우기에는 더 밝은 틴트가 필요하고, 텍스트, 테두리, 밝은 배경 위에서도 읽기 쉬워야 하는 상태에는 더 어두운 셰이드가 필요합니다. 디자인 용어에서 "셰이드"와 "틴트"는 정확한 의미를 가집니다 — 셰이드는 기본 색상에 검정을 섞은 것이고, 틴트는 흰색을 섞은 것입니다 — 회색을 섞는 "톤"과는 다르며, 이 도구는 톤을 생성하지 않습니다.
기본 색상과 단계 수를 선택하면 어두운 색에서 밝은 색까지 전체 진행을 생성합니다: 가장 어두운 셰이드가 처음에, 원래 색상이 가운데에, 가장 밝은 틴트가 마지막에 표시됩니다. 색상 견본을 클릭하면 헥스 코드가 클립보드에 복사되어 CSS 변수, 디자인 토큰 또는 Tailwind 설정에 사용할 수 있습니다. 색상이나 단계 수를 조정하는 동안 모든 과정이 브라우저에서 로컬로 실행되며, 아무것도 업로드되지 않습니다.
자주 묻는 질문
음영(shade)과 명도(tint)의 차이는 무엇인가요?
음영(shade)은 기본 색상을 검은색 쪽으로 섞은 것(더 어두움)이고, 명도(tint)는 기본 색상을 흰색 쪽으로 섞은 것(더 밝음)입니다. 둘 다 같은 색조(hue)를 유지합니다.
디자인 시스템 팔레트에는 몇 단계를 생성해야 하나요?
대부분의 디자인 시스템은 5-10단계를 사용합니다(Tailwind의 50-900 스케일과 유사) — 배경, 테두리, 텍스트, 호버 상태를 커버하기에 충분하면서 거의 중복된 색상이 너무 많지 않습니다.