색상 셰이드 생성기

색상 셰이드 생성기란?

색상 셰이드 생성기는 기준 HEX 색 하나를 완전한 틴트·셰이드 스케일로 바꿔 주는 무료 온라인 도구로, Tailwind CSS 색상 토큰처럼 50, 100, 200부터 900, 950까지 번호가 매겨집니다. 기준색을 흰색 쪽으로 선형 보간해 밝은 단계(50~400)를, 검정 쪽으로 보간해 어두운 단계(600~950)를 만들고 500은 기준색 그대로 유지합니다. 디자이너와 프론트엔드 개발자는 디자인 시스템용 일관된 색 단계 생성, CSS 커스텀 속성이나 Tailwind 테마 색 설정, 브랜드 색의 밝은/어두운 변형 고르기에 활용합니다. 각 단계는 색 견본과 HEX 값이 나란히 표시되며 원클릭 복사 버튼이 제공됩니다.

색상 셰이드 생성기 사용법

1. 기준 색상(HEX) 입력란에 #rrggbb 또는 #rgb 형식으로 기준 색상을 입력하거나, 큰 색상 선택기 견본을 클릭해 시각적으로 고릅니다.
2. 50~950 스케일이 즉시 갱신됩니다. 밝은 틴트(50~400)는 흰색 쪽으로, 500은 기준 색상, 어두운 셰이드(600~950)는 검정 쪽으로 섞입니다.
3. 각 행에서 단계 번호(50 … 950), 색 견본, HEX 값을 나란히 확인하세요.
4. 아무 행 끝의 복사 버튼을 클릭하면 해당 단계의 HEX 값이 클립보드에 복사됩니다.
5. 500 단계만 필요할 때는 입력란 옆의 복사 버튼으로 기준 색상의 HEX 값을 복사하세요.

예시

#4f86f7

#f6f9ff

#4f86f7

#0b1323

자주 묻는 질문

어떤 색상 형식을 입력할 수 있나요?

기준 색상은 #rrggbb(여섯 자리) 또는 #rgb(세 자리 단축) 형식의 HEX 값으로 입력합니다. 값이 유효한 HEX 색상이 아니면 'Invalid HEX color' 메시지가 나타나며 스케일이 생성되지 않습니다. 출력의 모든 단계는 #rrggbb HEX 값으로 표시됩니다.

셰이드는 어떻게 계산되나요?

각 단계는 기준색과 순백 또는 순흑 사이의 선형 혼합입니다. 50~400 단계는 점점 줄어드는 비율로 흰색 쪽으로 섞이고, 500 단계는 기준색 그대로이며, 600~950 단계는 점점 늘어나는 비율로 검정 쪽으로 섞입니다. 번호 체계는 Tailwind CSS 색 스케일과 일치합니다.

왜 500 단계가 항상 제 기준색 번호와 일치하지는 않나요?

500 단계는 언제나 정확히 입력한 기준색입니다. 이 도구는 색을 지각적 명도 곡선으로 다시 중심 정렬하지 않으므로, 입력이 매우 밝거나 매우 어두우면 스케일의 밝은 쪽이나 어두운 쪽 범위가 좁아집니다 — 가장 고른 스케일을 원하면 중간 톤 기준색을 고르세요.

HEX를 입력하는 대신 색을 시각적으로 고를 수 있나요?

네. 내장 색상 선택기가 있는 큰 견본을 클릭해 색을 고르면 됩니다. HEX 입력란이 자동으로 갱신되고, 색을 바꿀 때마다 50~950 스케일 전체가 즉시 다시 계산됩니다.

제 색상 데이터가 어딘가로 업로드되나요?

아니요. 모든 처리는 로컬 색상 연산을 사용해 브라우저 안에서 완결됩니다. 어떤 색상 값도 서버로 전송되지 않으므로 오프라인에서도 작동하며 팔레트가 비공개로 유지됩니다.