단색 팔레트 생성기

틴트 vs 셰이드 vs 톤

• 틴트 = 기준 색상 + 흰색. 더 밝고 파스텔 톤. mix(base, #fff, p%)에서 p는 흰색 비율입니다.
• 셰이드 = 기준 색상 + 검정. 더 어둡고 묵직함. mix(base, #000, p%).
• 톤 = 기준 색상 + 회색. 명도는 같고 채도만 낮춰, 더 차분합니다.

세 가지 변환은 서로 다른 시각적 성격을 만듭니다. 틴트는 가볍고 낙관적으로, 셰이드는 안정적이고 진지하게, 톤은 절제되고 세련되게 느껴집니다.

하나의 기준에서 나온 9단계 램프

숫자 라벨은 일반적인 토큰 규칙에서 착안했으며, 생성된 색상은 Material이나 Tailwind의 공식 색상 값이 아닙니다.

단색이 인터페이스에 잘 맞는 이유

• 친숙함. 모든 요소가 명백히 연관되어 보입니다.
• 일관성. 같은 색조를 반복하면 관계를 알아보기 쉽지만, 그것만으로 다양한 색각을 지원하는 인터페이스가 되지는 않습니다.
• 단순함. 한 가지 결정, 기준 색상, 이 팔레트 전체를 결정합니다.

중성색과의 조합

단색 팔레트에도 회색이 필요합니다. 일반적인 패턴:

• 브랜드 색상에서 만든 주 램프(9단계).
• 주색의 채도를 낮춘 버전에서 만든 중성 램프(9단계).
• 가능하면 강조색 하나(알림과 CTA용으로 잘 고른 단일 단계).

이는 시작 구조일 뿐 고정 규칙이 아닙니다. 필요한 팔레트 수는 제품 상태, 데이터 시각화, 의미 색상, 접근성 요구 사항에 따라 달라집니다.

대비 체크포인트

배경 위 텍스트의 경우 WCAG는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다. 100, 500, 900 같은 라벨이 일정한 명암비를 뜻하지는 않습니다. 결과는 기본 색상, 팔레트 유형, 보간 색 공간에 따라 달라집니다.

사용할 구체적 조합은 항상 대비 검사기로 확인하세요.

디자인 시스템으로 내보내기

출력 형식:

• CSS 커스텀 프로퍼티: --primary-50: #f0f9ff; --primary-100: ...
• Tailwind 설정: tailwind.config.js → theme.extend.colors에 붙여넣을 JS 객체.
• SCSS 맵 Sass 프로젝트용.
• Design Tokens Community Group의 $type/$value 구조를 쓰는 디자인 토큰 JSON.