명암 팔레트 생성기(틴트·셰이드) 완벽 가이드
디자인 시스템을 만들 때 가장 먼저 막히는 작업 중 하나가 "브랜드 컬러 하나로 밝고 어두운 색 단계표를 어떻게 만들지"입니다. 버튼 hover 색상, 배경 강조색, 비활성 상태 색상 등은 결국 기준 색의 명도(Lightness)를 단계적으로 조절한 파생 색상인데, 감으로 하나씩 고르면 색상 간 간격이 들쭉날쭉해지고 톤이 어긋나기 쉽습니다. 이 도구는 기준 HEX 색상 하나만 입력하면 HSL 색공간에서 명도를 흰색 방향(틴트, Tint)과 검은색 방향(셰이드, Shade)으로 균등하게 보간하여 5~11단계의 일관된 색 계단을 자동 생성합니다.
단순히 밝기만 조절하면 밝은 단계는 색이 바래 보이고 어두운 단계는 탁하게 보이는 문제가 생깁니다. 그래서 명도 보간과 함께 채도(Saturation)도 함께 미세 조정합니다. 밝은 틴트로 갈수록 채도를 살짝 낮춰 파스텔 톤처럼 은은하게 만들고, 어두운 셰이드로 갈수록 채도를 살짝 높여 색이 죽지 않고 깊이감 있게 보이도록 보정합니다. 기준 색상은 Tailwind CSS의 명명 규칙을 참고해 500번 자리에 정확히 그대로 배치되며, 나머지 단계는 50(가장 밝음)부터 900 또는 950(가장 어두움)까지 순서대로 채워집니다.
각 색상 단계마다 HEX, RGB, HSL 값을 함께 보여주고, 텍스트를 올렸을 때 가독성이 좋은 대비 라벨 색(흰색/검은색)을 자동으로 계산해 표시합니다. 생성된 팔레트는 클릭 한 번으로 개별 HEX 코드를 복사할 수 있고, 전체 팔레트를 CSS 커스텀 프로퍼티(:root 변수) 코드와 Tailwind 설정 스타일의 JS 객체 코드로도 바로 출력하므로, 복사해서 프로젝트에 그대로 붙여넣기만 하면 됩니다. 웹 서비스의 브랜드 컬러 시스템, 앱 UI 컬러 토큰, 프레젠테이션 배색표, 로고 색상 활용 가이드 등을 만들 때 시간을 크게 줄여줍니다.
자주 묻는 질문 (FAQ)
Q. 왜 500 단계는 항상 제가 입력한 색과 똑같나요?
A. 기준 색상을 팔레트의 중심(보통 500 라벨)에 그대로 두고, 그보다 밝은 단계(50~400)는 흰색 방향으로, 어두운 단계(600~900)는 검은색 방향으로 명도를 보간하는 방식이기 때문입니다. 이렇게 하면 원래 선택한 브랜드 컬러를 그대로 유지하면서 밝고 어두운 파생 색상을 얻을 수 있습니다.
Q. 5단계, 7단계처럼 10단계가 아닌 팔레트도 만들 수 있나요?
A. 네, 단계 수 선택 메뉴에서 5·7·9·10·11단계 중 원하는 개수를 선택할 수 있습니다. 단계 수가 적을수록 라벨 간 명도 차이가 커지고, 많을수록 더 세밀한 그러데이션 톤을 얻을 수 있습니다.
Q. 채도 보정은 어떤 기준으로 이루어지나요?
A. 밝은 틴트 단계는 채도를 점진적으로 낮춰 자연스러운 파스텔 톤에 가깝게 만들고, 어두운 셰이드 단계는 채도를 점진적으로 높여 색이 탁해 보이지 않게 보정합니다. 기준 색(500 단계)에서 멀어질수록 보정 강도가 커지는 선형 보간 방식을 사용합니다
상세 가이드
이 도구는 복잡한 작업을 간단하게 처리합니다. 정확한 결과를 얻기 위해 올바른 입력 값을 제공하세요. 모든 계산은 최신 알고리즘을 기반으로 수행되며, 결과의 정확성을 보장합니다. 모바일 기기를 포함한 모든 플랫폼에서 완벽하게 작동합니다.
주요 기능
빠른 처리 속도, 정확한 결과, 사용하기 쉬운 인터페이스, 안전한 데이터 처리, 광고 없는 경험을 제공합니다. 이 도구는 매일 수천 명의 사용자가 신뢰하는 온라인 유틸리티입니다.
사용 방법
필요한 정보를 입력란에 입력하고 실행 버튼을 클릭하면 즉시 결과를 확인할 수 있습니다. 설치나 회원가입이 필요 없으며, 완전히 무료로 사용할 수 있습니다. 여러 번 사용해도 추가 요금이 발생하지 않습니다.
자주 묻는 질문
이 도구는 얼마나 정확한가요? 매우 정확합니다. 최신 알고리즘과 검증된 수식을 사용하여 높은 정확도를 보장합니다.
비용이 드나요? 아니요, 완전히 무료입니다. 광고도 없습니다.
모바일에서 사용할 수 있나요? 네, 모든 기기에서 완벽하게 작동합니다.
.