Developer Design Utility
Color Palette 생성기
기준 색상 하나를 입력하면 밝기 단계별 색상 팔레트와 Tailwind 스타일 색상 코드를 자동으로 생성할 수 있습니다.
팔레트 자동 생성
기준 색상에서 50~900 단계 색상 생성
실시간 미리보기
HEX, RGB, CSS 변수 형태로 확인
복사·다운로드
CSS 변수와 JSON 형태 결과 저장 지원
Palette 설정
기준 색상과 팔레트 이름을 입력하세요.
CSS 변수명과 JSON 키 이름에 사용됩니다.
HEX 색상 코드를 입력하거나 컬러 피커를 사용하세요.
필요한 단계 수에 맞춰 팔레트를 생성합니다.
복사할 코드 형식을 선택하세요.
색상 팔레트 미리보기
각 색상 카드를 클릭하면 HEX 코드가 복사됩니다.
기준 색상을 입력한 뒤 팔레트 생성하기 버튼을 눌러주세요.
생성 결과
아래 코드를 CSS 파일, SCSS 파일 또는 설정 파일에 사용할 수 있습니다.
팔레트를 생성하면 이곳에 코드가 표시됩니다.
도움말
Color Palette는 어디에 사용하나요?
버튼, 배경, 테두리, hover 상태, 다크모드 색상 등 UI 전체의 색상 체계를 통일할 때 사용합니다.
추천 사용 방식
- 50~100 단계는 밝은 배경색에 사용
- 400~600 단계는 기본 버튼과 포인트 색상에 사용
- 700~900 단계는 강조 텍스트나 어두운 배경에 사용
팁
너무 밝거나 어두운 색상을 기준으로 삼으면 중간 단계 색상 대비가 약해질 수 있습니다. 브랜드 포인트 색상은 500 또는 600 단계로 사용할 색상을 기준으로 잡는 것이 좋습니다.