색상 명도(쉐이드·틴트) 단계를 한 번에 만들기
웹사이트나 앱 디자인을 하다 보면 하나의 브랜드 색만으로는 부족할 때가 많습니다. 버튼의 기본·호버·눌림 상태, 카드 배경, 비활성 텍스트, 경계선처럼 같은 색조를 유지하면서도 밝기만 다른 여러 단계의 색이 필요하기 때문입니다. 이 색상 명도(쉐이드/틴트) 생성기는 기준이 되는 색 하나의 HEX 코드만 입력하면, 흰색을 섞어 밝게 만든 틴트와 검정을 섞어 어둡게 만든 쉐이드를 단계별로 자동 계산해 일관성 있는 색 밝기 단계 팔레트를 만들어 줍니다.
틴트와 쉐이드, 톤의 차이
색 이론에서 틴트(tint)는 원래 색에 흰색을 더한 것으로, 더할수록 점점 밝고 부드러운 색이 됩니다. 반대로 쉐이드(shade)는 검정을 더한 것으로, 더할수록 깊고 묵직한 색이 됩니다. 참고로 회색을 섞으면 채도가 낮아지는 톤(tone)이 되는데, 이 도구는 디자인 시스템에서 가장 자주 쓰이는 명도 단계, 즉 흰색·검정 혼합 기반의 틴트와 쉐이드에 집중합니다. 같은 색조(hue)를 유지한 채 밝기만 단계적으로 바꾸기 때문에, 만들어진 색들이 자연스럽게 한 가족처럼 보입니다.
계산 방식
각 색은 R·G·B 세 채널을 0~255 범위에서 선형 보간(linear interpolation)하여 만듭니다. 틴트는 각 채널을 흰색(255) 방향으로, 쉐이드는 검정(0) 방향으로 일정 비율씩 이동시킵니다. 예를 들어 5단계로 설정하면 기준 색을 가운데 두고 위로 흰색을 점점 더 섞은 5개의 밝은 색, 아래로 검정을 점점 더 섞은 5개의 어두운 색, 합쳐서 총 11개의 색이 생성됩니다. 단계 간 간격이 일정해 색 스케일(50, 100, 200 ~ 900 형태)처럼 활용하기 좋습니다.
- 밝은 단계(틴트): 배경, 호버 하이라이트, 비활성 영역에 적합합니다.
- 기준 색: 주요 버튼·링크 등 메인 컬러로 사용합니다.
- 어두운 단계(쉐이드): 눌림 상태, 텍스트, 강조 테두리에 적합합니다.
이렇게 활용하세요
생성된 팔레트의 색 칸을 클릭하면 해당 HEX가 바로 복사되고, 결과 영역의 복사하기 버튼으로는 전체 단계 HEX 목록을 한 번에 가져올 수 있습니다. 복사한 값은 CSS 커스텀 프로퍼티(:root 변수), Tailwind의 색상 확장, Figma 색 스타일, 디자인 토큰 JSON 등에 그대로 붙여넣어 사용할 수 있습니다. 다만 흰색·검정 선형 혼합은 sRGB 수치 기준이라 사람의 눈이 느끼는 명도와 미세하게 다를 수 있으므로, 최종 색은 실제 화면에서 한 번 확인하는 것을 권장하며 본 결과는 참고용 가이드값으로 활용하세요.
자주 묻는 질문 (FAQ)
Q. 쉐이드(shade)와 틴트(tint)는 무엇이 다른가요?
A. 틴트는 흰색을 섞어 밝게, 쉐이드는 검정을 섞어 어둡게 만든 색입니다. 이 도구는 둘을 단계별로 함께 생성해 색상 명도 단계 팔레트를 만듭니다.
Q. 색상 명도 단계는 어떻게 계산되나요?
A. R·G·B 채널을 0~255 범위에서 선형 보간합니다. 틴트는 255 방향으로, 쉐이드는 0 방향으로 단계마다 일정 비율씩 이동시킵니다.
Q. HEX 코드는 어떻게 복사하나요?
A. 색 칸을 클릭하면 그 색의 HEX가 복사되고, 복사하기 버튼을 누르면 전체 단계의 HEX 목록을 한 번에 복사할 수 있습니다.
Q. 이 도구로 만든 색은 웹/디자인에 바로 써도 되나요?
A. 네, 표준 6자리 HEX라 CSS·Figma·Tailwind 등에 바로 사용할 수 있습니다. 다만 체감 밝기와 미세한 차이가 있을 수 있어 참고값으로 쓰는 것이 좋습니다.