🌗 Tint·Shade 단계 생성기 | 단계 수 골라 생성

베이스 색상 (HEX)

혼합 방식

혼합할 회색 (Tone 방식에서만 사용)

단계 수 (3~12, 정수)

단계

단계당 혼합 간격 (%)

단계	혼합 비율	sRGB 혼합 HEX / RGB	선형광 혼합 HEX / RGB

단계 수와 간격을 직접 정하는 Tint·Shade 생성

버튼의 기본·호버·비활성 상태처럼 같은 색을 여러 밝기로 써야 할 때, 단계를 눈대중으로 찍으면 간격이 들쭉날쭉해집니다. 베이스 HEX 하나와 단계 수(3~12), 단계당 혼합 간격을 넣으면 요청한 개수만큼 HEX와 RGB를 한 번에 만듭니다. 단계가 고정된 도구와 달리 간격까지 정할 수 있어, 쓰고 있는 색 토큰 체계에 맞춰 폭을 좁히거나 넓힐 수 있습니다.

용어와 혼합 공간 표기

용어는 섞어 쓰지 않습니다. Tint는 흰색, Shade는 검정, Tone은 회색을 섞는 것을 뜻합니다. 혼합은 두 방식을 나란히 계산합니다. 감마 인코딩된 sRGB 값에서 그대로 섞는 방식과, W3C가 정의한 sRGB 전달 함수(임계값 0.04045)로 선형광으로 바꿔 섞은 뒤 다시 인코딩하는 방식입니다. 같은 비율이어도 결과가 다르므로 표에서 어느 쪽을 복사하는지 확인하세요. 변환식은 2026년 10월 기준 W3C 문서를 따랐습니다.

한계

이 도구는 색만 만듭니다. 어느 단계를 어디에 써야 하는지, 글자와 배경의 명암비가 충분한지는 판단하지 않습니다. 접근성 통과 여부는 명암비 도구에서 따로 확인하세요.

자주 묻는 질문

Tint와 Shade는 무엇이 다른가요?

Tint는 베이스 색에 흰색을 섞어 밝게 만들고, Shade는 검정을 섞어 어둡게 만듭니다. 회색을 섞는 경우는 Tone이라고 따로 부르며, 이 도구에서 세 방식을 골라 쓸 수 있습니다.

sRGB 혼합과 선형광 혼합 중 어느 값을 써야 하나요?

정해진 정답은 없습니다. 기존 색 토큰이나 편집기 결과와 맞추려면 sRGB 혼합, 빛의 양 기준으로 간격이 고르게 보이는 단계를 원하면 선형광 혼합이 맞습니다. 표에 두 값을 모두 냅니다.

단계 수와 간격은 어떻게 정하나요?

단계 수와 간격을 곱한 값이 100%를 넘지 않는 범위에서 정합니다. 넘으면 안내 문구가 그 단계 수에서 쓸 수 있는 최대 간격을 함께 알려 줍니다.

🌗색상 명암(Tint·Shade) 단계 생성기

관련된 도구

색상 밝기·채도 단계 생성기

보색 자동 생성기

단계 수와 간격을 직접 정하는 Tint·Shade 생성

용어와 혼합 공간 표기

한계

자주 묻는 질문

관련된 도구

색상 밝기·채도 단계 생성기

보색 자동 생성기

단계 수와 간격을 직접 정하는 Tint·Shade 생성

용어와 혼합 공간 표기

한계

자주 묻는 질문

같은 카테고리 도구