색상 음영 팔레트 생성기

기준 HEX 색상 하나로 50~950 단계의 Tailwind 스타일 음영 팔레트를 생성합니다.

언제 사용하나요?

브랜드 색상 하나를 기준으로 버튼, 배경, border, hover 상태에 쓸 밝고 어두운 색상 단계를 만들 때 사용합니다. Tailwind 커스텀 colors, 디자인 토큰, UI 팔레트 초안을 빠르게 정리할 수 있습니다.

사용 방법

색상 피커 또는 HEX 코드를 입력합니다.
50~950 단계의 음영이 자동 생성됩니다.
밝은 배경, 기본색, 어두운 강조색을 비교합니다.
각 단계별 코드를 개별 복사하거나 전체를 한 번에 복사합니다.

입력값 안내

#rrggbb 형식의 HEX 코드나 색상 피커로 기준 색상을 설정합니다. 브랜드 대표색, 버튼 기본색, 차트 색상처럼 팔레트 중심이 되는 색을 넣으면 됩니다.

계산·변환 기준

HEX를 HSL로 변환한 뒤 색조와 채도를 기준으로 명도를 단계적으로 조정해 11가지 음영을 생성합니다. Tailwind 기본 팔레트와 완전히 동일한 알고리즘은 아니며 실무 초안용 근사값입니다.

사용 예시

Tailwind 커스텀 색상 - tailwind.config의 colors나 CSS 변수 기반 디자인 토큰 초안으로 사용합니다.
상태 색상 설계 - primary, success, warning 같은 UI 상태 색상의 배경·테두리·텍스트 단계를 만듭니다.
디자인 리뷰 공유 - 색상 단계별 HEX 값을 디자인 시스템 문서나 PR 설명에 붙여 넣습니다.

예시

#3b82f6 → 50: #EFF6FF ~ 950: #1E3A5F
브랜드 파란색 1개 입력 → 50~950까지 11단계 음영 팔레트 생성
#16a34a 입력 → 성공 상태 배경, border, 텍스트용 녹색 스케일 생성

주의사항

생성된 색상 팔레트는 참고용입니다. 모니터 색 보정 환경마다 시각적 차이가 있을 수 있습니다.
입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

색상 스케일 활용

50~100 단계는 옅은 배경, 500~600 단계는 기본 버튼이나 링크, 700~950 단계는 hover·active·강조 텍스트에 활용하기 좋습니다.

Tailwind 커스텀 팔레트

생성된 단계별 HEX 값을 tailwind.config의 colors나 CSS 변수에 넣으면 브랜드 색상 기반의 일관된 UI 팔레트를 빠르게 구성할 수 있습니다.

접근성 대비 확인

자동 생성된 음영은 대비를 보장하지 않습니다. 텍스트와 배경 조합에 쓰기 전에는 WCAG 대비 기준을 별도로 확인하세요.

디자인 토큰 정리

primary-50, primary-500, primary-900처럼 단계 이름을 붙이면 디자인과 코드에서 같은 색상을 같은 이름으로 관리할 수 있습니다.

자주 묻는 질문

정확히 Tailwind 기본 팔레트와 같나요?

HSL 기반 근사값으로 생성하므로 약간 다를 수 있습니다.

몇 단계 음영이 생성되나요?

50부터 950까지 Tailwind 스타일의 음영 단계를 한 번에 만들어 줍니다.

생성한 색상을 어디에 쓰나요?

디자인 시스템의 색상 토큰이나 Tailwind 커스텀 팔레트 설정에 활용할 수 있습니다.

음영 단계는 어떻게 정해지나요?

기준 색상의 명도를 단계별로 조절해 50(밝음)부터 950(어두움)까지의 음영을 계산합니다.

접근성 대비도 보장하나요?

아니요. 팔레트 단계는 색상 후보를 만드는 용도입니다. 실제 텍스트와 배경 조합은 별도 대비 검사를 거쳐야 합니다.

브랜드 색상은 어느 단계로 두면 좋나요?

보통 기준색은 500 또는 600 단계에 가깝게 쓰고, 50~100은 배경, 700~900은 hover나 강조 텍스트에 활용합니다.