Developer Design Utility
Color Palette 생성기
기준 색상 하나로 Tailwind 스타일의 50~900 단계 팔레트를 만들고, CSS 변수·SCSS 변수·JSON 코드로 변환해 디자인 시스템에 바로 활용할 수 있습니다.
Palette 설정
브랜드 색상, 팔레트 이름, 생성 방식과 출력 형식을 선택하세요.
CSS 변수명, SCSS 변수명, JSON 키 이름에 사용됩니다.
브랜드 메인 색상이나 버튼에 사용할 포인트 색상을 기준으로 입력하세요.
디자인 시스템용은 Tailwind Style, 간단한 UI용은 Compact를 추천합니다.
프로젝트에서 사용하는 스타일 관리 방식에 맞춰 선택하세요.
색상 팔레트 미리보기
색상 카드를 클릭하면 해당 HEX 코드가 클립보드에 복사됩니다.
생성 결과
아래 코드를 CSS 파일, SCSS 파일 또는 테마 설정 파일에 사용할 수 있습니다.
팔레트를 생성하면 이곳에 코드가 표시됩니다.
도움말
Color Palette 생성기는 언제 사용하나요?
웹사이트나 유틸리티 페이지의 버튼, 배경, 테두리, hover 상태, 다크모드 색상처럼 UI 전반의 색상 체계를 통일하고 싶을 때 사용합니다.
50~900 단계는 어떤 의미인가요?
숫자가 낮을수록 밝은 색상이고, 숫자가 높을수록 어두운 색상입니다. 일반적으로 500 또는 600 단계를 브랜드의 기본 포인트 색상으로 사용합니다.
- 50~100: 밝은 배경색
- 200~300: 연한 테두리 또는 hover 배경
- 400~600: 버튼, 링크, 포인트 색상
- 700~900: 강조 텍스트, 어두운 배경
추천 사용 방식
- 브랜드 메인 컬러는 500 또는 600 단계 기준으로 잡는 것이 좋습니다.
- 버튼 배경은 500~600, 버튼 hover는 600~700 단계를 사용하면 자연스럽습니다.
- 연한 카드 배경이나 알림 배경은 50~100 단계를 사용하면 좋습니다.
- 테두리는 200~300 단계를 사용하면 과하지 않게 구분할 수 있습니다.
CSS 변수로 관리하면 좋은 이유
색상을 CSS 변수로 관리하면 여러 페이지에서 같은 색상 체계를 재사용하기 쉽고, 나중에 브랜드 색상을 변경할 때도 변수 값만 수정하면 전체 UI에 반영할 수 있습니다.
기준 색상은 어떤 색으로 잡는 것이 좋나요?
사이트에서 가장 자주 사용하는 버튼 색상이나 브랜드 포인트 색상을 기준으로 잡는 것이 좋습니다. 너무 밝거나 너무 어두운 색상보다는 중간 밝기의 색상이 팔레트 생성에 유리합니다.
CSS Variables와 SCSS Variables 중 무엇을 선택해야 하나요?
일반 CSS만 사용하는 프로젝트라면 CSS Variables를 추천합니다. SCSS 기반으로 빌드하는 프로젝트라면 SCSS Variables를 사용하면 관리하기 좋습니다.
JSON 출력은 어디에 사용하나요?
디자인 토큰, 테마 설정 파일, 프론트엔드 설정 객체처럼 JavaScript나 빌드 시스템에서 색상 데이터를 관리할 때 사용할 수 있습니다.