palette 틴트 & 셰이드 스케일 생성기 star

스케일은 어떻게 만들어지나요

색채 이론은 HSL 모델에서 기준 색상을 체계적으로 바꾸는 세 가지 방법을 정의합니다: 틴트(tint)(흰색 쪽으로 섞어 Lightness(명도)를 높임 — 색이 더 창백해 보입니다), 셰이드(shade)(검은색 쪽으로 섞어 Lightness를 낮춤 — 색이 더 어둡고 진해 보입니다), 그리고 톤(tone)(회색 쪽으로 섞어 Lightness는 거의 그대로 두고 Saturation(채도)을 낮춤 — 색이 흐릿하거나 "탁하게" 보입니다)입니다. 이 생성기는 이 세 가지 중 틴트/셰이드 절반을 만듭니다: 기준 색상에서 시작해 밝은 단계에서는 Lightness를 흰색 쪽으로, 어두운 단계에서는 검은색 쪽으로 단계적으로 조정해, Tailwind나 Material 같은 디자인 시스템이 사용하는 50~900 사이의 10단계 스케일을 만들며, 원래 브랜드 컬러는 500 단계 부근에 고정됩니다.

구체적인 예로, hsl(217, 91%, 60%) 부근의 파란색에서 시작하면, 50 단계는 hsl(217, 91%, 97%) 근처에 위치합니다 — 거의 흰색이며, 색상의 흔적만 살짝 남습니다 — 반면 900 단계는 hsl(217, 60%, 20%) 근처에 위치합니다 — 매우 어두우며, 색이 검은색에 가까워질수록 채도가 압축됩니다. 각 단계는 hex 코드와 바로 사용할 수 있는 CSS 변수를 함께 제공하며, 색상 견본을 클릭하면 복사됩니다.

몇 가지 색조를 눈대중으로 고르는 대신 전체 스케일을 생성하는 실질적인 이점은 일관성입니다: 모든 단계가 같은 기준 색상에서 같은 혼합 규칙으로 파생되므로, 200 단계의 카드 테두리와 100 단계의 호버 상태는 몇 달 뒤 다른 디자이너나 다른 컴포넌트가 같은 브랜드 컬러의 새로운 색조를 필요로 할 때도 항상 같은 색상 계열에 속하는 것처럼 느껴집니다.

알아두어야 할 사항

• 틴트, 셰이드, 톤은 서로 다른 연산입니다: 이 도구는 틴트와 셰이드, 즉 Lightness 변화만 수행합니다. 진정한 톤은 Lightness는 거의 그대로 두고 Saturation을 낮춰, 더 밝거나 어두운 색이 아니라 흐릿한 버전의 색을 만듭니다 — 이 별도의 조작은 이 생성기가 적용하는 방식이 아닙니다.
• 각 단계는 어디에 쓰이나요: 50~100은 페이지 배경과 호버 채우기에, 200~300은 테두리와 구분선에, 500~600은 버튼과 링크(브랜드 컬러 자체)에, 700~900은 밝은 배경 위 본문 텍스트에 사용됩니다.
• 명암비는 자동으로 보장되지 않습니다: ≥700 단계와 ≤100 단계를 짝지으면 대체로 WCAG AA 명암비 기준을 통과하지만, "대체로"가 "항상"을 의미하지는 않습니다 — 실제로 사용할 정확한 조합은 전용 명암비 검사기로 검증하세요.
• Tailwind의 자체 팔레트와 동일하지 않습니다: Tailwind의 내장 색상은 설계상 색조마다 손으로 조정되어 있는 반면, 이 생성기는 어떤 입력에도 하나의 일관된 혼합 공식을 적용합니다 — 커스텀 브랜드 컬러에서는 예측 가능하며, 실제 인터페이스에 쓰기에 충분히 가깝습니다.
• 다크 모드는 보통 스케일을 뒤집습니다: 라이트 모드에서 50 단계를 사용하는 배경은 다크 모드에서 흔히 900 단계에 가까운 값으로 대응되며, 그 반대도 마찬가지입니다 — 전체 스케일을 미리 생성해 두면 두 테마 모두를 이미 준비해 둔 셈이 됩니다.