틴트·셰이드 색상 생성기

틴트는 흰색을, 셰이드는 검정을, 톤은 회색을 섞은 색입니다. 이런 단계 목록으로 디자인 시스템은 하나의 브랜드 색에 속하는 호버 상태, 테두리, 배경을 얻습니다. 이 생성기는 세 가지를 원하는 단계 수로 만들어 주며, Sass와 대부분의 사이트가 쓰는 고전적인 sRGB 혼합이나 눈에 고르게 보이는 OKLCH 단계 중 고를 수 있고, CSS 사용자 지정 속성으로도 내보냅니다.

사용 방법

1. 기준 색을 입력합니다.
2. 단계 수와 만들 종류를 고릅니다.
3. 혼합 방식을 고릅니다. 익숙한 결과는 sRGB 혼합, 고르게 보이는 단계는 OKLCH입니다.
4. HEX 목록이나 CSS 변수를 복사하거나 색상 견본을 내려받습니다.

계산식

sRGB 혼합: 채널마다 c = c₀ + (t − c₀) × p, t = 255(틴트), 0(셰이드), 128(톤), p = 단계 ÷ 단계 수. OKLCH: L은 p만큼 1, 0, 0.6 쪽으로 움직이고 채도는 × (1 − p)가 됩니다.

0단계는 항상 기준 색이며, 마지막 단계는 순수한 흰색·검정·회색에 못 미치는 곳에서 멈춥니다. 채널 값은 정수로 반올림합니다.

예시

순수한 빨강 #FF0000을 2단계로 만들면 기준 색과 50% 단계가 나옵니다. 셰이드는 255 × 0.5 = 127.5 → #800000(마룬), 틴트는 0 + 255 × 0.5 → #FF8080, 톤은 (255 + 128) ÷ 2 = 191.5 → #C04040입니다.